purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-08 19:45:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Angular to v13.1

Browse Source 
Updated ESLint to v13
Updated Tailwind to v3
Updated various other packages
This commit is contained in:
Sercan Yemen 2021-12-22 14:19:21 +03:00
parent 3fd522de31
commit 805b50707e
86 changed files with 2738 additions and 3354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
angular.json
View File

@ -1,6 +1,12 @@
{ {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1, "version": 1,
"cli": {
"defaultCollection": "@angular-eslint/schematics",
"cache": {
"enabled": false
}
},
"newProjectRoot": "projects", "newProjectRoot": "projects",
"projects": { "projects": {
"fuse": { "fuse": {
@ -137,8 +143,5 @@
} }
} }
}, },
"defaultProject": "fuse", "defaultProject": "fuse"
"cli": {
"defaultCollection": "@angular-eslint/schematics"
}
} }

5069
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

76
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@fuse/demo", "name": "@fuse/demo",
"version": "14.0.0", "version": "14.1.0",
"description": "Fuse - Angular Admin Template and Starter Project", "description": "Fuse - Angular Admin Template and Starter Project",
"author": "https://themeforest.net/user/srcn", "author": "https://themeforest.net/user/srcn",
"license": "https://themeforest.net/licenses/standard", "license": "https://themeforest.net/licenses/standard",
@ -14,26 +14,26 @@
"lint": "ng lint" "lint": "ng lint"
}, },
"dependencies": { "dependencies": {
"@angular/animations": "13.0.1", "@angular/animations": "13.1.1",
"@angular/cdk": "13.0.0", "@angular/cdk": "13.1.1",
"@angular/common": "13.0.1", "@angular/common": "13.1.1",
"@angular/compiler": "13.0.1", "@angular/compiler": "13.1.1",
"@angular/core": "13.0.1", "@angular/core": "13.1.1",
"@angular/forms": "13.0.1", "@angular/forms": "13.1.1",
"@angular/material": "13.0.0", "@angular/material": "13.1.1",
"@angular/material-moment-adapter": "13.0.0", "@angular/material-moment-adapter": "13.1.1",
"@angular/platform-browser": "13.0.1", "@angular/platform-browser": "13.1.1",
"@angular/platform-browser-dynamic": "13.0.1", "@angular/platform-browser-dynamic": "13.1.1",
"@angular/router": "13.0.1", "@angular/router": "13.1.1",
"@ngneat/transloco": "3.1.0", "@ngneat/transloco": "3.1.1",
"apexcharts": "3.29.0", "apexcharts": "3.32.0",
"crypto-js": "3.3.0", "crypto-js": "3.3.0",
"highlight.js": "11.3.1", "highlight.js": "11.3.1",
"lodash-es": "4.17.21", "lodash-es": "4.17.21",
"moment": "2.29.1", "moment": "2.29.1",
"ng-apexcharts": "1.5.12", "ng-apexcharts": "1.6.0",
"ngx-markdown": "13.0.0", "ngx-markdown": "13.0.0",
"ngx-quill": "16.0.1", "ngx-quill": "16.1.1",
"perfect-scrollbar": "1.5.3", "perfect-scrollbar": "1.5.3",
"quill": "1.3.7", "quill": "1.3.7",
"rxjs": "7.4.0", "rxjs": "7.4.0",
@ -41,41 +41,41 @@
"zone.js": "0.11.4" "zone.js": "0.11.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "13.0.2", "@angular-devkit/build-angular": "13.1.2",
"@angular-eslint/builder": "12.6.1", "@angular-eslint/builder": "13.0.1",
"@angular-eslint/eslint-plugin": "12.6.1", "@angular-eslint/eslint-plugin": "13.0.1",
"@angular-eslint/eslint-plugin-template": "12.6.1", "@angular-eslint/eslint-plugin-template": "13.0.1",
"@angular-eslint/schematics": "12.6.1", "@angular-eslint/schematics": "13.0.1",
"@angular-eslint/template-parser": "12.6.1", "@angular-eslint/template-parser": "13.0.1",
"@angular/cli": "13.0.2", "@angular/cli": "13.1.2",
"@angular/compiler-cli": "13.0.1", "@angular/compiler-cli": "13.1.1",
"@tailwindcss/aspect-ratio": "0.3.0", "@tailwindcss/aspect-ratio": "0.4.0",
"@tailwindcss/line-clamp": "0.2.2", "@tailwindcss/line-clamp": "0.3.0",
"@tailwindcss/typography": "0.4.1", "@tailwindcss/typography": "0.5.0",
"@types/chroma-js": "2.1.3", "@types/chroma-js": "2.1.3",
"@types/crypto-js": "3.1.47", "@types/crypto-js": "3.1.47",
"@types/highlight.js": "10.1.0", "@types/highlight.js": "10.1.0",
"@types/jasmine": "3.10.2", "@types/jasmine": "3.10.2",
"@types/lodash": "4.14.176", "@types/lodash": "4.14.178",
"@types/lodash-es": "4.17.5", "@types/lodash-es": "4.17.5",
"@types/node": "12.20.37", "@types/node": "12.20.38",
"@typescript-eslint/eslint-plugin": "5.3.1", "@typescript-eslint/eslint-plugin": "5.8.0",
"@typescript-eslint/parser": "5.3.1", "@typescript-eslint/parser": "5.8.0",
"autoprefixer": "10.4.0", "autoprefixer": "10.4.0",
"chroma-js": "2.1.2", "chroma-js": "2.1.2",
"eslint": "7.32.0", "eslint": "8.5.0",
"eslint-plugin-import": "2.25.3", "eslint-plugin-import": "2.25.3",
"eslint-plugin-jsdoc": "37.0.3", "eslint-plugin-jsdoc": "37.4.0",
"eslint-plugin-prefer-arrow": "1.2.3", "eslint-plugin-prefer-arrow": "1.2.3",
"jasmine-core": "3.10.1", "jasmine-core": "3.10.1",
"karma": "6.3.8", "karma": "6.3.9",
"karma-chrome-launcher": "3.1.0", "karma-chrome-launcher": "3.1.0",
"karma-coverage": "2.0.3", "karma-coverage": "2.1.0",
"karma-jasmine": "4.0.1", "karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.7.0", "karma-jasmine-html-reporter": "1.7.0",
"lodash": "4.17.21", "lodash": "4.17.21",
"postcss": "8.3.11", "postcss": "8.4.5",
"tailwindcss": "2.2.19", "tailwindcss": "3.0.7",
"typescript": "4.4.4" "typescript": "4.5.4"
} }
} }

2
src/@fuse/fuse.module.ts
View File

@ -5,7 +5,6 @@ import { FuseConfirmationModule } from '@fuse/services/confirmation';
import { FuseLoadingModule } from '@fuse/services/loading'; import { FuseLoadingModule } from '@fuse/services/loading';
import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module'; import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module'; import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
import { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module';
import { FuseUtilsModule } from '@fuse/services/utils/utils.module'; import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
@NgModule({ @NgModule({
@ -14,7 +13,6 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
FuseLoadingModule, FuseLoadingModule,
FuseMediaWatcherModule, FuseMediaWatcherModule,
FuseSplashScreenModule, FuseSplashScreenModule,
FuseTailwindConfigModule,
FuseUtilsModule FuseUtilsModule
], ],
providers: [ providers: [

12
src/@fuse/services/media-watcher/media-watcher.service.ts
View File

@ -1,7 +1,8 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { map, Observable, ReplaySubject, switchMap } from 'rxjs'; import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service'; import { fromPairs } from 'lodash-es';
import { FuseConfigService } from '@fuse/services/config';
@Injectable() @Injectable()
export class FuseMediaWatcherService export class FuseMediaWatcherService
@ -13,11 +14,12 @@ export class FuseMediaWatcherService
*/ */
constructor( constructor(
private _breakpointObserver: BreakpointObserver, private _breakpointObserver: BreakpointObserver,
private _fuseTailwindConfigService: FuseTailwindService private _fuseConfigService: FuseConfigService
) )
{ {
this._fuseTailwindConfigService.tailwindConfig$.pipe( this._fuseConfigService.config$.pipe(
switchMap(config => this._breakpointObserver.observe(Object.values(config.breakpoints)).pipe( map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
map((state) => { map((state) => {
// Prepare the observable values and set their defaults // Prepare the observable values and set their defaults
@ -29,7 +31,7 @@ export class FuseMediaWatcherService
for ( const [query] of matchingBreakpoints ) for ( const [query] of matchingBreakpoints )
{ {
// Find the alias of the matching query // Find the alias of the matching query
const matchingAlias = Object.entries(config.breakpoints).find(([alias, q]) => q === query)[0]; const matchingAlias = Object.entries(screens).find(([alias, q]) => q === query)[0];
// Add the matching query to the observable values // Add the matching query to the observable values
if ( matchingAlias ) if ( matchingAlias )

1
src/@fuse/services/tailwind/index.ts
View File

@ -1 +0,0 @@
export * from '@fuse/services/tailwind/public-api';

2
src/@fuse/services/tailwind/public-api.ts
View File

@ -1,2 +0,0 @@
export * from '@fuse/services/tailwind/tailwind.module';
export * from '@fuse/services/tailwind/tailwind.service';

17
src/@fuse/services/tailwind/tailwind.module.ts
View File

@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
@NgModule({
providers: [
FuseTailwindService
]
})
export class FuseTailwindConfigModule
{
/**
* Constructor
*/
constructor(private _fuseTailwindConfigService: FuseTailwindService)
{
}
}

58
src/@fuse/services/tailwind/tailwind.service.ts
View File

@ -1,58 +0,0 @@
import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';
import { fromPairs, map } from 'lodash-es';
import * as extractedTailwindConfigStyle from '@fuse/styles/core/tailwind-config.scss';
@Injectable()
export class FuseTailwindService
{
private _tailwindConfig: ReplaySubject<any> = new ReplaySubject<any>(1);
/**
* Constructor
*/
constructor()
{
// Prepare the config object
const config: any = {};
// Extract the style from the class
const regexpForClass = /\.fuse-tailwind-extracted-config\s\{([\s\S]*)\}/g;
const style = regexpForClass.exec(extractedTailwindConfigStyle.default)[1].trim();
// Extract the rules
const regexp = /(--[\s\S]*?):'([\s\S]*?)';/g;
let rules = regexp.exec(style);
// Add to the config
while ( rules !== null )
{
const configGroup = /--([\s\S]*?)-/g.exec(rules[1])[1];
if ( !config[configGroup] )
{
config[configGroup] = {};
}
config[configGroup][rules[1].replace(/(--[\s\S]*?-)/g, '')] = rules[2];
rules = regexp.exec(style);
}
// Parse the themes objects
config.themes = fromPairs(map(config.themes, (value, key) => [key, JSON.parse(value)]));
// Execute the observable with the config
this._tailwindConfig.next(config);
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for _tailwindConfig
*/
get tailwindConfig$(): Observable<any>
{
return this._tailwindConfig.asObservable();
}
}

6
src/@fuse/styles/core/tailwind-config.scss
View File

@ -1,6 +0,0 @@
/* ----------------------------------------------------------------------------------------------------- */
/* @ Any configuration we need from Tailwind's config file will be extracted here so we can import this
/* @ file from "config.ts" to access the extracted configuration from TypeScript
/* ----------------------------------------------------------------------------------------------------- */
@variants fuse-tailwind-extracted-config {
}

7
src/@fuse/styles/main.scss
View File

@ -1,11 +1,8 @@
/* 1. Core */ /* 1. Components */
@import 'core/tailwind-config';
/* 2. Components */
@import 'components/example-viewer'; @import 'components/example-viewer';
@import 'components/input'; @import 'components/input';
/* 3. Overrides */ /* 2. Overrides */
@import 'overrides/angular-material'; @import 'overrides/angular-material';
@import 'overrides/highlightjs'; @import 'overrides/highlightjs';
@import 'overrides/perfect-scrollbar'; @import 'overrides/perfect-scrollbar';

100
src/@fuse/styles/themes.scss
View File

@ -72,38 +72,38 @@ body .light {
is-dark: map.get(map.get($base-light-theme, color), is-dark), is-dark: map.get(map.get($base-light-theme, color), is-dark),
foreground: ( foreground: (
base: #000000, base: #000000,
divider: #E2E8F0, /* blueGray.200 */ divider: #E2E8F0, /* slate.200 */
dividers: #E2E8F0, /* blueGray.200 */ dividers: #E2E8F0, /* slate.200 */
disabled: #94A3B8, /* blueGray.400 */ disabled: #94A3B8, /* slate.400 */
disabled-button: #94A3B8, /* blueGray.400 */ disabled-button: #94A3B8, /* slate.400 */
disabled-text: #94A3B8, /* blueGray.400 */ disabled-text: #94A3B8, /* slate.400 */
elevation: #000000, elevation: #000000,
hint-text: #94A3B8, /* blueGray.400 */ hint-text: #94A3B8, /* slate.400 */
secondary-text: #64748B, /* blueGray.500 */ secondary-text: #64748B, /* slate.500 */
icon: #64748B, /* blueGray.500 */ icon: #64748B, /* slate.500 */
icons: #64748B, /* blueGray.500 */ icons: #64748B, /* slate.500 */
mat-icon: #64748B, /* blueGray.500 */ mat-icon: #64748B, /* slate.500 */
text: #1E293B, /* blueGray.800 */ text: #1E293B, /* slate.800 */
slider-min: #1E293B, /* blueGray.800 */ slider-min: #1E293B, /* slate.800 */
slider-off: #CBD5E1, /* blueGray.300 */ slider-off: #CBD5E1, /* slate.300 */
slider-off-active: #94A3B8 /* blueGray.400 */ slider-off-active: #94A3B8 /* slate.400 */
), ),
background: ( background: (
status-bar: #CBD5E1, /* blueGray.300 */ status-bar: #CBD5E1, /* slate.300 */
app-bar: #FFFFFF, app-bar: #FFFFFF,
background: #F1F5F9, /* blueGray.100 */ background: #F1F5F9, /* slate.100 */
hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */ hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
card: #FFFFFF, card: #FFFFFF,
dialog: #FFFFFF, dialog: #FFFFFF,
disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */ disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
raised-button: #FFFFFF, raised-button: #FFFFFF,
focused-button: #64748B, /* blueGray.500 */ focused-button: #64748B, /* slate.500 */
selected-button: #E2E8F0, /* blueGray.200 */ selected-button: #E2E8F0, /* slate.200 */
selected-disabled-button: #E2E8F0, /* blueGray.200 */ selected-disabled-button: #E2E8F0, /* slate.200 */
disabled-button-toggle: #CBD5E1, /* blueGray.300 */ disabled-button-toggle: #CBD5E1, /* slate.300 */
unselected-chip: #E2E8F0, /* blueGray.200 */ unselected-chip: #E2E8F0, /* slate.200 */
disabled-list-option: #CBD5E1, /* blueGray.300 */ disabled-list-option: #CBD5E1, /* slate.300 */
tooltip: #1E293B /* blueGray.800 */ tooltip: #1E293B /* slate.800 */
) )
) )
); );
@ -126,38 +126,38 @@ body .dark {
is-dark: map.get(map.get($base-dark-theme, color), is-dark), is-dark: map.get(map.get($base-dark-theme, color), is-dark),
foreground: ( foreground: (
base: #FFFFFF, base: #FFFFFF,
divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */ divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */ dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
disabled: #475569, /* blueGray.600 */ disabled: #475569, /* slate.600 */
disabled-button: #1E293B, /* blueGray.800 */ disabled-button: #1E293B, /* slate.800 */
disabled-text: #475569, /* blueGray.600 */ disabled-text: #475569, /* slate.600 */
elevation: #000000, elevation: #000000,
hint-text: #64748B, /* blueGray.500 */ hint-text: #64748B, /* slate.500 */
secondary-text: #94A3B8, /* blueGray.400 */ secondary-text: #94A3B8, /* slate.400 */
icon: #F1F5F9, /* blueGray.100 */ icon: #F1F5F9, /* slate.100 */
icons: #F1F5F9, /* blueGray.100 */ icons: #F1F5F9, /* slate.100 */
mat-icon: #94A3B8, /* blueGray.400 */ mat-icon: #94A3B8, /* slate.400 */
text: #FFFFFF, text: #FFFFFF,
slider-min: #FFFFFF, slider-min: #FFFFFF,
slider-off: #64748B, /* blueGray.500 */ slider-off: #64748B, /* slate.500 */
slider-off-active: #94A3B8 /* blueGray.400 */ slider-off-active: #94A3B8 /* slate.400 */
), ),
background: ( background: (
status-bar: #0F172A, /* blueGray.900 */ status-bar: #0F172A, /* slate.900 */
app-bar: #0F172A, /* blueGray.900 */ app-bar: #0F172A, /* slate.900 */
background: #0F172A, /* blueGray.900 */ background: #0F172A, /* slate.900 */
hover: rgba(255, 255, 255, 0.05), hover: rgba(255, 255, 255, 0.05),
card: #1E293B, /* blueGray.800 */ card: #1E293B, /* slate.800 */
dialog: #1E293B, /* blueGray.800 */ dialog: #1E293B, /* slate.800 */
disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */ disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
raised-button: #0F172A, /* blueGray.900 */ raised-button: #0F172A, /* slate.900 */
focused-button: #E2E8F0, /* blueGray.200 */ focused-button: #E2E8F0, /* slate.200 */
selected-button: rgba(255, 255, 255, 0.05), selected-button: rgba(255, 255, 255, 0.05),
selected-disabled-button: #1E293B, /* blueGray.800 */ selected-disabled-button: #1E293B, /* slate.800 */
disabled-button-toggle: #0F172A, /* blueGray.900 */ disabled-button-toggle: #0F172A, /* slate.900 */
unselected-chip: #475569, /* blueGray.600 */ unselected-chip: #475569, /* slate.600 */
disabled-list-option: #E2E8F0, /* blueGray.200 */ disabled-list-option: #E2E8F0, /* slate.200 */
tooltip: #64748B /* blueGray.500 */ tooltip: #64748B /* slate.500 */
) )
) )
); );

38
src/@fuse/tailwind/plugins/extract-config.js
View File

@ -1,38 +0,0 @@
const plugin = require('tailwindcss/plugin');
const buildMediaQuery = require('tailwindcss/lib/util/buildMediaQuery').default;
const extractConfig = plugin(({
addVariant,
theme
}) =>
{
addVariant('fuse-tailwind-extracted-config', ({container}) =>
{
// Prepare the extracted config variable
let extractedConfig = '';
// Breakpoints
Object.entries(theme('screens')).forEach(([key, value]) =>
{
extractedConfig = `${extractedConfig} --breakpoints-${key}:'${buildMediaQuery(value)}';`;
});
// Themes
(theme('fuse.themes')).forEach((value) =>
{
Object.entries(value).forEach(([key, value]) =>
{
extractedConfig = `${extractedConfig} --themes-${key}:'${JSON.stringify(value)}';`;
});
});
// Append the extracted config
container.append(`
.fuse-tailwind-extracted-config {
${extractedConfig}
}
`);
});
});
module.exports = extractConfig;

36
src/@fuse/tailwind/plugins/icon-size.js
View File

@ -1,17 +1,14 @@
const plugin = require('tailwindcss/plugin'); const plugin = require('tailwindcss/plugin');
const iconSize = plugin(({ module.exports = plugin(
addUtilities, ({
theme, matchUtilities,
e, theme
variants
}) => }) =>
{ {
const values = theme('iconSize'); matchUtilities(
{
addUtilities( 'icon-size': (value) => ({
Object.entries(values).map(([key, value]) => ({
[`.${e(`icon-size-${key}`)}`]: {
width : value, width : value,
height : value, height : value,
minWidth : value, minWidth : value,
@ -22,13 +19,14 @@ const iconSize = plugin(({
width : value, width : value,
height: value height: value
} }
} })
})), },
variants('iconSize') {
); values: theme('iconSize')
});
}, },
{ {
theme : { theme: {
iconSize: { iconSize: {
3 : '0.75rem', 3 : '0.75rem',
3.5: '0.875rem', 3.5: '0.875rem',
@ -47,10 +45,6 @@ const iconSize = plugin(({
22 : '5.5rem', 22 : '5.5rem',
24 : '6rem' 24 : '6rem'
} }
},
variants: {
iconSize: ['responsive']
} }
}); }
);
module.exports = iconSize;

51
src/@fuse/tailwind/plugins/theming.js
View File

@ -102,7 +102,7 @@ const theming = plugin.withOptions((options) => ({
// @ Map variable colors // @ Map variable colors
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [ const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [
themeName === 'default' ? 'body' : `body.theme-${e(themeName)}`, themeName === 'default' ? '.theme-default' : `.theme-${e(themeName)}`,
_.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [ _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
[ [
e(paletteName), e(paletteName),
@ -185,47 +185,46 @@ const theming = plugin.withOptions((options) => ({
light: { light: {
'bg-app-bar' : '#FFFFFF', 'bg-app-bar' : '#FFFFFF',
'bg-card' : '#FFFFFF', 'bg-card' : '#FFFFFF',
'bg-default' : colors.blueGray[100], 'bg-default' : colors.slate[100],
'bg-dialog' : '#FFFFFF', 'bg-dialog' : '#FFFFFF',
'bg-hover' : chroma(colors.blueGray[400]).alpha(0.12).css(), 'bg-hover' : chroma(colors.slate[400]).alpha(0.12).css(),
'bg-status-bar': colors.blueGray[300] 'bg-status-bar': colors.slate[300]
}, },
dark : { dark : {
'bg-app-bar' : colors.blueGray[900], 'bg-app-bar' : colors.slate[900],
'bg-card' : colors.blueGray[800], 'bg-card' : colors.slate[800],
'bg-default' : colors.blueGray[900], 'bg-default' : colors.slate[900],
'bg-dialog' : colors.blueGray[800], 'bg-dialog' : colors.slate[800],
'bg-hover' : 'rgba(255, 255, 255, 0.05)', 'bg-hover' : 'rgba(255, 255, 255, 0.05)',
'bg-status-bar': colors.blueGray[900] 'bg-status-bar': colors.slate[900]
} }
}, },
foreground: { foreground: {
light: { light: {
'text-default' : colors.blueGray[800], 'text-default' : colors.slate[800],
'text-secondary': colors.blueGray[500], 'text-secondary': colors.slate[500],
'text-hint' : colors.blueGray[400], 'text-hint' : colors.slate[400],
'text-disabled' : colors.blueGray[400], 'text-disabled' : colors.slate[400],
'border' : colors.blueGray[200], 'border' : colors.slate[200],
'divider' : colors.blueGray[200], 'divider' : colors.slate[200],
'icon' : colors.blueGray[500], 'icon' : colors.slate[500],
'mat-icon' : colors.blueGray[500] 'mat-icon' : colors.slate[500]
}, },
dark : { dark : {
'text-default' : '#FFFFFF', 'text-default' : '#FFFFFF',
'text-secondary': colors.blueGray[400], 'text-secondary': colors.slate[400],
'text-hint' : colors.blueGray[500], 'text-hint' : colors.slate[500],
'text-disabled' : colors.blueGray[600], 'text-disabled' : colors.slate[600],
'border' : chroma(colors.blueGray[100]).alpha(0.12).css(), 'border' : chroma(colors.slate[100]).alpha(0.12).css(),
'divider' : chroma(colors.blueGray[100]).alpha(0.12).css(), 'divider' : chroma(colors.slate[100]).alpha(0.12).css(),
'icon' : colors.blueGray[400], 'icon' : colors.slate[400],
'mat-icon' : colors.blueGray[400] 'mat-icon' : colors.slate[400]
} }
} }
}, },
themes : generateThemesObject(options.themes) themes : generateThemesObject(options.themes)
} }
}, }
variants: {}
}; };
} }
); );

10
src/@fuse/tailwind/plugins/utilities.js
View File

@ -1,6 +1,6 @@
const plugin = require('tailwindcss/plugin'); const plugin = require('tailwindcss/plugin');
const utilities = plugin(({ module.exports = plugin(({
addComponents addComponents
}) => }) =>
{ {
@ -54,9 +54,6 @@ const utilities = plugin(({
'--tw-ring-opacity': '1 !important', '--tw-ring-opacity': '1 !important',
'--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important' '--tw-ring-color' : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important'
} }
},
{
variants: ['dark', 'responsive', 'group-hover', 'hover']
} }
); );
@ -65,11 +62,6 @@ const utilities = plugin(({
'.bg-hover': { '.bg-hover': {
backgroundColor: 'var(--fuse-bg-hover) !important' backgroundColor: 'var(--fuse-bg-hover) !important'
} }
},
{
variants: ['dark', 'group-hover', 'hover']
} }
); );
}); });
module.exports = utilities;

2
src/@fuse/version/fuse-version.ts
View File

@ -1,3 +1,3 @@
import { Version } from '@fuse/version/version'; import { Version } from '@fuse/version/version';
export const FUSE_VERSION = new Version('14.0.0').full; export const FUSE_VERSION = new Version('14.1.0').full;

2
src/app/app.component.scss
View File

@ -3,4 +3,4 @@
flex: 1 1 auto; flex: 1 1 auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

49
src/app/core/config/app.config.ts
View File

@ -2,7 +2,9 @@ import { Layout } from 'app/layout/layout.types';
// Types // Types
export type Scheme = 'auto' | 'dark' | 'light'; export type Scheme = 'auto' | 'dark' | 'light';
export type Theme = 'default' | string; export type Screens = { [key: string]: string };
export type Theme = 'theme-default' | string;
export type Themes = { id: string; name: string }[];
/** /**
* AppConfig interface. Update this interface to strictly type your config * AppConfig interface. Update this interface to strictly type your config
@ -12,7 +14,9 @@ export interface AppConfig
{ {
layout: Layout; layout: Layout;
scheme: Scheme; scheme: Scheme;
screens: Screens;
theme: Theme; theme: Theme;
themes: Themes;
} }
/** /**
@ -22,9 +26,46 @@ export interface AppConfig
* If you need to store global configuration for your app, you can use this * If you need to store global configuration for your app, you can use this
* object to set the defaults. To access, update and reset the config, use * object to set the defaults. To access, update and reset the config, use
* FuseConfigService and its methods. * FuseConfigService and its methods.
*
* "Screens" are carried over to the BreakpointObserver for accessing them within
* components, and they are required.
*
* "Themes" are required for Tailwind to generate themes.
*/ */
export const appConfig: AppConfig = { export const appConfig: AppConfig = {
layout: 'classy', layout : 'classy',
scheme: 'light', scheme : 'light',
theme : 'default' screens: {
sm: '600px',
md: '960px',
lg: '1280px',
xl: '1440px'
},
theme : 'theme-default',
themes : [
{
id : 'theme-default',
name: 'Default'
},
{
id : 'theme-brand',
name: 'Brand'
},
{
id : 'theme-teal',
name: 'Teal'
},
{
id : 'theme-rose',
name: 'Rose'
},
{
id : 'theme-purple',
name: 'Purple'
},
{
id : 'theme-amber',
name: 'Amber'
}
]
}; };

8
src/app/layout/common/messages/messages.component.html
View File

@ -5,7 +5,7 @@
#messagesOrigin> #messagesOrigin>
<ng-container *ngIf="unreadCount > 0"> <ng-container *ngIf="unreadCount > 0">
<span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3"> <span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
<span class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium"> <span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium">
{{unreadCount}} {{unreadCount}}
</span> </span>
</span> </span>
@ -19,7 +19,7 @@
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg"> <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
<!-- Header --> <!-- Header -->
<div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary"> <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
<div class="sm:hidden -ml-1 mr-3"> <div class="sm:hidden -ml-1 mr-3">
<button <button
mat-icon-button mat-icon-button
@ -108,7 +108,7 @@
<ng-template #messageContent> <ng-template #messageContent>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="message.icon && !message.image"> <ng-container *ngIf="message.icon && !message.image">
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700"> <div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
[svgIcon]="message.icon"> [svgIcon]="message.icon">
@ -118,7 +118,7 @@
<!-- Image --> <!-- Image -->
<ng-container *ngIf="message.image"> <ng-container *ngIf="message.image">
<img <img
class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center" class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
[src]="message.image" [src]="message.image"
[alt]="'Message image'"> [alt]="'Message image'">
</ng-container> </ng-container>

8
src/app/layout/common/notifications/notifications.component.html
View File

@ -5,7 +5,7 @@
#notificationsOrigin> #notificationsOrigin>
<ng-container *ngIf="unreadCount > 0"> <ng-container *ngIf="unreadCount > 0">
<span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3"> <span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
<span class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium"> <span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
{{unreadCount}} {{unreadCount}}
</span> </span>
</span> </span>
@ -19,7 +19,7 @@
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg"> <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
<!-- Header --> <!-- Header -->
<div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary"> <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
<div class="sm:hidden -ml-1 mr-3"> <div class="sm:hidden -ml-1 mr-3">
<button <button
mat-icon-button mat-icon-button
@ -109,7 +109,7 @@
<ng-template #notificationContent> <ng-template #notificationContent>
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="notification.icon && !notification.image"> <ng-container *ngIf="notification.icon && !notification.image">
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700"> <div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
<mat-icon <mat-icon
class="icon-size-5" class="icon-size-5"
[svgIcon]="notification.icon"> [svgIcon]="notification.icon">
@ -119,7 +119,7 @@
<!-- Image --> <!-- Image -->
<ng-container *ngIf="notification.image"> <ng-container *ngIf="notification.image">
<img <img
class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center" class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
[src]="notification.image" [src]="notification.image"
[alt]="'Notification image'"> [alt]="'Notification image'">
</ng-container> </ng-container>

20
src/app/layout/common/quick-chat/quick-chat.component.html
View File

@ -1,6 +1,6 @@
<div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen lg:shadow"> <div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen lg:shadow">
<div <div
class="flex flex-col w-full sm:w-96 h-full transform transition-transform duration-400 ease-drawer bg-card" class="flex flex-col w-full sm:w-96 h-full transition-transform duration-400 ease-drawer bg-card"
[ngClass]="{'-translate-x-full sm:-translate-x-96 lg:-translate-x-80 shadow': opened, 'translate-x-0': !opened}"> [ngClass]="{'-translate-x-full sm:-translate-x-96 lg:-translate-x-80 shadow': opened, 'translate-x-0': !opened}">
<!-- Header --> <!-- Header -->
@ -93,7 +93,7 @@
<div class="flex flex-col flex-auto border-l overflow-hidden bg-gray-50 dark:bg-transparent"> <div class="flex flex-col flex-auto border-l overflow-hidden bg-gray-50 dark:bg-transparent">
<ng-container *ngIf="chat; else selectChatOrStartNew"> <ng-container *ngIf="chat; else selectChatOrStartNew">
<div class="flex flex-col-reverse overflow-y-auto overscroll-y-contain"> <div class="flex flex-col-reverse overflow-y-auto overscroll-y-contain">
<div class="flex flex-col flex-auto flex-shrink p-6"> <div class="flex flex-col flex-auto shrink p-6">
<ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn"> <ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
<!-- Start of the day --> <!-- Start of the day -->
<ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')"> <ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
@ -108,20 +108,20 @@
<div <div
class="flex flex-col" class="flex flex-col"
[ngClass]="{'items-end': message.isMine, [ngClass]="{'items-end': message.isMine,
'items-start': !message.isMine, 'items-start': !message.isMine,
'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine, 'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}"> 'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
<!-- Bubble --> <!-- Bubble -->
<div <div
class="relative max-w-3/4 px-3 py-2 rounded-lg" class="relative max-w-3/4 px-3 py-2 rounded-lg"
[ngClass]="{'bg-blue-500 text-blue-50': message.isMine, [ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
'bg-gray-500 text-gray-50': !message.isMine}"> 'bg-gray-500 text-gray-50': !message.isMine}">
<!-- Speech bubble tail --> <!-- Speech bubble tail -->
<ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine"> <ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
<div <div
class="absolute bottom-0 w-3 transform" class="absolute bottom-0 w-3"
[ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine, [ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}"> 'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
<ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container> <ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
</div> </div>
</ng-container> </ng-container>
@ -140,7 +140,7 @@
<div <div
class="my-0.5 text-sm font-medium text-secondary" class="my-0.5 text-sm font-medium text-secondary"
[ngClass]="{'mr-3': message.isMine, [ngClass]="{'mr-3': message.isMine,
'ml-3': !message.isMine}"> 'ml-3': !message.isMine}">
{{message.createdAt | date:'HH:mm'}} {{message.createdAt | date:'HH:mm'}}
</div> </div>
</ng-container> </ng-container>
@ -163,7 +163,7 @@
<button <button
mat-icon-button> mat-icon-button>
<mat-icon <mat-icon
class="transform rotate-90" class="rotate-90"
[svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon> [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
</button> </button>
</div> </div>

6
src/app/layout/common/search/search.component.html
View File

@ -7,7 +7,7 @@
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
</button> </button>
<div <div
class="absolute inset-0 flex items-center flex-shrink-0 z-99 bg-card" class="absolute inset-0 flex items-center shrink-0 z-99 bg-card"
*ngIf="opened" *ngIf="opened"
@slideInTop @slideInTop
@slideOutTop> @slideOutTop>
@ -55,7 +55,7 @@
</ng-container> </ng-container>
</mat-autocomplete> </mat-autocomplete>
<button <button
class="absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5" class="absolute top-1/2 right-5 sm:right-7 shrink-0 w-10 h-10 -mt-5"
mat-icon-button mat-icon-button
(click)="close()"> (click)="close()">
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
@ -118,7 +118,7 @@
#contactResult #contactResult
let-result> let-result>
<div class="flex items-center"> <div class="flex items-center">
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800"> <div class="flex shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
<img <img
*ngIf="result.avatar" *ngIf="result.avatar"
[src]="result.avatar"> [src]="result.avatar">

15
src/app/layout/common/settings/settings.component.html
View File

@ -38,18 +38,19 @@
<!-- Theme --> <!-- Theme -->
<div class="text-md font-semibold text-secondary">THEME</div> <div class="text-md font-semibold text-secondary">THEME</div>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
<ng-container *ngFor="let theme of themes"> <ng-container *ngFor="let theme of config.themes">
<div <div
class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover" class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
[class.ring-2]="config.theme === theme[0]" [class.ring-2]="config.theme === theme.id"
(click)="setTheme(theme[0])"> [ngClass]="theme.id"
(click)="setTheme(theme.id)">
<div <div
class="flex-0 w-3 h-3 rounded-full" class="flex-0 w-3 h-3 rounded-full bg-primary"
[style.background-color]="theme[1].primary"></div> ></div>
<div <div
class="ml-2.5 font-medium leading-5 truncate" class="ml-2.5 font-medium leading-5 truncate"
[class.text-secondary]="config.theme !== theme[0]"> [class.text-secondary]="config.theme !== theme.id">
{{theme[0] | titlecase}} {{theme.name}}
</div> </div>
</div> </div>
</ng-container> </ng-container>

15
src/app/layout/common/settings/settings.component.ts
View File

@ -2,8 +2,7 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
import { FuseConfigService } from '@fuse/services/config'; import { FuseConfigService } from '@fuse/services/config';
import { FuseTailwindService } from '@fuse/services/tailwind'; import { AppConfig, Scheme, Theme, Themes } from 'app/core/config/app.config';
import { AppConfig, Scheme, Theme } from 'app/core/config/app.config';
import { Layout } from 'app/layout/layout.types'; import { Layout } from 'app/layout/layout.types';
@Component({ @Component({
@ -27,7 +26,7 @@ export class SettingsComponent implements OnInit, OnDestroy
layout: Layout; layout: Layout;
scheme: 'dark' | 'light'; scheme: 'dark' | 'light';
theme: string; theme: string;
themes: [string, any][] = []; themes: Themes;
private _unsubscribeAll: Subject<any> = new Subject<any>(); private _unsubscribeAll: Subject<any> = new Subject<any>();
/** /**
@ -35,8 +34,7 @@ export class SettingsComponent implements OnInit, OnDestroy
*/ */
constructor( constructor(
private _router: Router, private _router: Router,
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService
private _fuseTailwindService: FuseTailwindService
) )
{ {
} }
@ -50,13 +48,6 @@ export class SettingsComponent implements OnInit, OnDestroy
*/ */
ngOnInit(): void ngOnInit(): void
{ {
// Get the themes
this._fuseTailwindService.tailwindConfig$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.themes = Object.entries(config.themes);
});
// Subscribe to config changes // Subscribe to config changes
this._fuseConfigService.config$ this._fuseConfigService.config$
.pipe(takeUntil(this._unsubscribeAll)) .pipe(takeUntil(this._unsubscribeAll))

4
src/app/layout/common/shortcuts/shortcuts.component.html
View File

@ -11,7 +11,7 @@
<div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg"> <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
<!-- Header --> <!-- Header -->
<div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary"> <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
<div class="sm:hidden -ml-1 mr-3"> <div class="sm:hidden -ml-1 mr-3">
<button <button
mat-icon-button mat-icon-button
@ -128,7 +128,7 @@
</a> </a>
<!-- Link content template --> <!-- Link content template -->
<ng-template #linkContent> <ng-template #linkContent>
<div class="relative flex flex-shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700"> <div class="relative flex shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700">
<mat-icon <mat-icon
class="absolute opacity-0 group-hover:opacity-100 z-20 icon-size-5" class="absolute opacity-0 group-hover:opacity-100 z-20 icon-size-5"
*ngIf="mode === 'modify'" *ngIf="mode === 'modify'"

2
src/app/layout/layout.component.ts
View File

@ -203,6 +203,6 @@ export class LayoutComponent implements OnInit, OnDestroy
}); });
// Add class name for the currently selected theme // Add class name for the currently selected theme
this._document.body.classList.add(`theme-${this.theme}`); this._document.body.classList.add(this.theme);
} }
} }

4
src/app/layout/layouts/vertical/classy/classy.component.html
View File

@ -37,10 +37,10 @@
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon> [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
</div> </div>
<div class="flex flex-col items-center justify-center w-full mt-6"> <div class="flex flex-col items-center justify-center w-full mt-6">
<div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden text-center leading-normal font-medium"> <div class="w-full whitespace-nowrap text-ellipsis overflow-hidden text-center leading-normal font-medium">
{{user.name}} {{user.name}}
</div> </div>
<div class="w-full mt-0.5 whitespace-nowrap overflow-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary"> <div class="w-full mt-0.5 whitespace-nowrap text-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
{{user.email}} {{user.email}}
</div> </div>
</div> </div>

4
src/app/layout/layouts/vertical/futuristic/futuristic.component.html
View File

@ -23,10 +23,10 @@
<div class="flex items-center w-full px-6 py-8 border-t"> <div class="flex items-center w-full px-6 py-8 border-t">
<user></user> <user></user>
<div class="flex flex-col w-full ml-4 overflow-hidden"> <div class="flex flex-col w-full ml-4 overflow-hidden">
<div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden leading-normal text-current opacity-80"> <div class="w-full whitespace-nowrap text-ellipsis overflow-hidden leading-normal text-current opacity-80">
{{user.name}} {{user.name}}
</div> </div>
<div class="w-full mt-0.5 whitespace-nowrap text-sm overflow-ellipsis overflow-hidden leading-normal text-current opacity-50"> <div class="w-full mt-0.5 whitespace-nowrap text-sm text-ellipsis overflow-hidden leading-normal text-current opacity-50">
brian.hughes@company.com brian.hughes@company.com
</div> </div>
</div> </div>

2
src/app/mock-api/common/navigation/data.ts
View File

@ -973,7 +973,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
icon : 'heroicons_outline:speakerphone', icon : 'heroicons_outline:speakerphone',
link : '/docs/changelog', link : '/docs/changelog',
badge: { badge: {
title : '14.0.0', title : '14.1.0',
classes: 'px-2 bg-yellow-300 text-black rounded-full' classes: 'px-2 bg-yellow-300 text-black rounded-full'
} }
}, },

14
src/app/mock-api/ui/icons/api.ts
View File

@ -41,7 +41,7 @@ export class IconsMockApi
{ {
namespace: 'feather', namespace: 'feather',
name : 'Feather', name : 'Feather',
grid : 6, grid : 'icon-size-6',
list : cloneDeep(this._feather) list : cloneDeep(this._feather)
} }
]); ]);
@ -56,7 +56,7 @@ export class IconsMockApi
{ {
namespace: 'heroicons_outline', namespace: 'heroicons_outline',
name : 'Heroicons Outline', name : 'Heroicons Outline',
grid : 6, grid : 'icon-size-6',
list : cloneDeep(this._heroicons) list : cloneDeep(this._heroicons)
} }
]); ]);
@ -71,7 +71,7 @@ export class IconsMockApi
{ {
namespace: 'heroicons_solid', namespace: 'heroicons_solid',
name : 'Heroicons Solid', name : 'Heroicons Solid',
grid : 5, grid : 'icon-size-5',
list : cloneDeep(this._heroicons) list : cloneDeep(this._heroicons)
} }
]); ]);
@ -86,7 +86,7 @@ export class IconsMockApi
{ {
namespace: 'iconsmind', namespace: 'iconsmind',
name : 'Iconsmind', name : 'Iconsmind',
grid : 10, grid : 'icon-size-10',
list : cloneDeep(this._iconsmind) list : cloneDeep(this._iconsmind)
} }
]); ]);
@ -101,7 +101,7 @@ export class IconsMockApi
{ {
namespace: 'mat_solid', namespace: 'mat_solid',
name : 'Material Solid', name : 'Material Solid',
grid : 6, grid : 'icon-size-6',
list : cloneDeep(this._material) list : cloneDeep(this._material)
} }
]); ]);
@ -116,7 +116,7 @@ export class IconsMockApi
{ {
namespace: 'mat_outline', namespace: 'mat_outline',
name : 'Material Outline', name : 'Material Outline',
grid : 6, grid : 'icon-size-6',
list : cloneDeep(this._material) list : cloneDeep(this._material)
} }
]); ]);
@ -131,7 +131,7 @@ export class IconsMockApi
{ {
namespace: '', namespace: '',
name : 'Material Twotone', name : 'Material Twotone',
grid : 6, grid : 'icon-size-6',
list : cloneDeep(this._material) list : cloneDeep(this._material)
} }
]); ]);

18
src/app/modules/admin/apps/chat/conversation/conversation.component.html
View File

@ -99,7 +99,7 @@
<!-- Conversation --> <!-- Conversation -->
<div class="flex overflow-y-auto flex-col-reverse"> <div class="flex overflow-y-auto flex-col-reverse">
<div class="flex flex-col flex-auto flex-shrink p-6 bg-card dark:bg-transparent"> <div class="flex flex-col flex-auto shrink p-6 bg-card dark:bg-transparent">
<ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn"> <ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
<!-- Start of the day --> <!-- Start of the day -->
<ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')"> <ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
@ -114,20 +114,20 @@
<div <div
class="flex flex-col" class="flex flex-col"
[ngClass]="{'items-end': message.isMine, [ngClass]="{'items-end': message.isMine,
'items-start': !message.isMine, 'items-start': !message.isMine,
'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine, 'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}"> 'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
<!-- Bubble --> <!-- Bubble -->
<div <div
class="relative max-w-3/4 px-3 py-2 rounded-lg" class="relative max-w-3/4 px-3 py-2 rounded-lg"
[ngClass]="{'bg-blue-500 text-blue-50': message.isMine, [ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
'bg-gray-500 text-gray-50': !message.isMine}"> 'bg-gray-500 text-gray-50': !message.isMine}">
<!-- Speech bubble tail --> <!-- Speech bubble tail -->
<ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine"> <ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
<div <div
class="absolute bottom-0 w-3 transform" class="absolute bottom-0 w-3"
[ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine, [ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}"> 'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
<ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container> <ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
</div> </div>
</ng-container> </ng-container>
@ -146,7 +146,7 @@
<div <div
class="my-0.5 text-sm font-medium text-secondary" class="my-0.5 text-sm font-medium text-secondary"
[ngClass]="{'mr-3': message.isMine, [ngClass]="{'mr-3': message.isMine,
'ml-3': !message.isMine}"> 'ml-3': !message.isMine}">
{{message.createdAt | date:'HH:mm'}} {{message.createdAt | date:'HH:mm'}}
</div> </div>
</ng-container> </ng-container>
@ -179,7 +179,7 @@
<button <button
mat-icon-button> mat-icon-button>
<mat-icon <mat-icon
class="transform rotate-90" class="rotate-90"
[svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon> [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
</button> </button>
</div> </div>

2
src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html
View File

@ -11,7 +11,7 @@
<!-- Title --> <!-- Title -->
<div class="text-4xl font-extrabold tracking-tight">Inventory</div> <div class="text-4xl font-extrabold tracking-tight">Inventory</div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<!-- Search --> <!-- Search -->
<mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"> <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64">
<mat-icon <mat-icon

2
src/app/modules/admin/apps/help-center/guides/guide/guide.component.html
View File

@ -37,7 +37,7 @@
<!-- Next --> <!-- Next -->
<a <a
class="mt-8 flex items-center justify-between p-6 sm:px-10 rounded-2xl shadow hover:shadow-lg bg-card transform transition-shadow ease-in-out duration-150" class="mt-8 flex items-center justify-between p-6 sm:px-10 rounded-2xl shadow hover:shadow-lg bg-card transition-shadow ease-in-out duration-150"
[routerLink]="'.'"> [routerLink]="'.'">
<div> <div>
<div class="text-secondary">Next</div> <div class="text-secondary">Next</div>

6
src/app/modules/admin/apps/help-center/help-center.component.html
View File

@ -35,7 +35,7 @@
<!-- Cards --> <!-- Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-y-8 md:gap-y-0 md:gap-x-6 w-full max-w-sm md:max-w-4xl -mt-16 sm:-mt-24"> <div class="grid grid-cols-1 md:grid-cols-3 gap-y-8 md:gap-y-0 md:gap-x-6 w-full max-w-sm md:max-w-4xl -mt-16 sm:-mt-24">
<!-- FAQs card --> <!-- FAQs card -->
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150"> <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
<div class="flex flex-col flex-auto items-center p-8 text-center"> <div class="flex flex-col flex-auto items-center p-8 text-center">
<div class="text-2xl font-semibold">FAQs</div> <div class="text-2xl font-semibold">FAQs</div>
<div class="md:max-w-40 mt-1 text-secondary">Frequently asked questions and answers</div> <div class="md:max-w-40 mt-1 text-secondary">Frequently asked questions and answers</div>
@ -53,7 +53,7 @@
</div> </div>
</div> </div>
<!-- Guides card --> <!-- Guides card -->
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150"> <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
<div class="flex flex-col flex-auto items-center p-8 text-center"> <div class="flex flex-col flex-auto items-center p-8 text-center">
<div class="text-2xl font-semibold">Guides</div> <div class="text-2xl font-semibold">Guides</div>
<div class="md:max-w-40 mt-1 text-secondary">Articles and resources to guide you</div> <div class="md:max-w-40 mt-1 text-secondary">Articles and resources to guide you</div>
@ -71,7 +71,7 @@
</div> </div>
</div> </div>
<!-- Support card --> <!-- Support card -->
<div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150"> <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
<div class="flex flex-col flex-auto items-center p-8 text-center"> <div class="flex flex-col flex-auto items-center p-8 text-center">
<div class="text-2xl font-semibold">Support</div> <div class="text-2xl font-semibold">Support</div>
<div class="md:max-w-40 mt-1 text-secondary">Contact us for more detailed support</div> <div class="md:max-w-40 mt-1 text-secondary">Contact us for more detailed support</div>

2
src/app/modules/admin/apps/mailbox/details/details.component.html
View File

@ -128,7 +128,7 @@
<!-- Threads --> <!-- Threads -->
<div <div
class="flex flex-col flex-auto flex-shrink-0 lg:flex-shrink p-3 lg:overflow-y-auto bg-gray-100 dark:bg-transparent" class="flex flex-col flex-auto shrink-0 lg:shrink p-3 lg:overflow-y-auto bg-gray-100 dark:bg-transparent"
fuseScrollReset> fuseScrollReset>
<!-- Thread --> <!-- Thread -->

2
src/app/modules/admin/apps/scrumboard/board/board.component.html
View File

@ -9,7 +9,7 @@
</h2> </h2>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<a <a
mat-stroked-button mat-stroked-button
[routerLink]="['..']"> [routerLink]="['..']">

2
src/app/modules/admin/dashboards/crypto/crypto.component.html
View File

@ -49,7 +49,7 @@
</div> </div>
<!-- Buy / Sell --> <!-- Buy / Sell -->
<div class="flex flex-col flex-auto flex-shrink-0 pt-6 bg-gray-50 dark:bg-transparent"> <div class="flex flex-col flex-auto shrink-0 pt-6 bg-gray-50 dark:bg-transparent">
<!-- Action --> <!-- Action -->
<div class="flex flex-col px-6 pb-2"> <div class="flex flex-col px-6 pb-2">

16
src/app/modules/admin/docs/changelog/changelog.ts
View File

@ -10,6 +10,22 @@ export class ChangelogComponent
{ {
changelog: any[] = [ changelog: any[] = [
// v14.1.0
{
version : 'v14.1.0',
releaseDate: 'Dec 22, 2021',
changes : [
{
type: 'Changed',
list: [
'(dependencies) Updated Angular & Angular Material to v13.1',
'(dependencies) Updated Tailwind to v3',
'(dependencies) Updated various other packages',
'(AngularCLI) Disabled file based cache as it causes issues with Tailwind v3'
]
}
]
},
// v14.0.0 // v14.0.0
{ {
version : 'v14.0.0', version : 'v14.0.0',

8
src/app/modules/admin/docs/guides/customization/tailwindcss/tailwindcss.html
View File

@ -61,12 +61,8 @@
<h2>Tailwind and Fuse</h2> <h2>Tailwind and Fuse</h2>
<p> <p>
Fuse also uses Tailwind as its main configuration source for Angular Material components. Basically, some of the Tailwind configuration is exported during Fuse also uses Tailwind as its main configuration source for Angular Material theming. If you want to add/edit/remove any color or change the font families,
the Tailwind's build process and made available for Fuse's internal use cases. This allows Fuse to use Tailwind's configuration as the single source of truth. you have to do that via the Tailwind's config file
</p>
<p>
To summarize; if you want to add/edit/remove any color, change the font families, modify the breakpoints or change any other visual configuration, you have to do
that via the Tailwind's config file and they will be carried over to the Angular Material components.
</p> </p>
<h2>Building Tailwind</h2> <h2>Building Tailwind</h2>

8
src/app/modules/admin/docs/guides/customization/theming/theming.html
View File

@ -73,8 +73,8 @@
DEFAULT: colors.indigo[600] DEFAULT: colors.indigo[600]
}, },
accent : { accent : {
...colors.blueGray, ...colors.slate,
DEFAULT: colors.blueGray[800] DEFAULT: colors.slate[800]
}, },
warn : { warn : {
...colors.red, ...colors.red,
@ -184,8 +184,8 @@
// It uses the default "blue-gray" color palette from Tailwind's default // It uses the default "blue-gray" color palette from Tailwind's default
// color palettes and sets the 800 hue level as the DEFAULT color. // color palettes and sets the 800 hue level as the DEFAULT color.
accent : { accent : {
...colors.blueGray, ...colors.slate,
DEFAULT: colors.blueGray[800] DEFAULT: colors.slate[800]
}, },
// Here we define the "Warn" palette for the default theme. // Here we define the "Warn" palette for the default theme.

6
src/app/modules/admin/docs/guides/development/component-structure/component-structure.html
View File

@ -54,13 +54,13 @@
<div class="my-8 p-8 rounded bg-card shadow"> <div class="my-8 p-8 rounded bg-card shadow">
<!-- AppComponent --> <!-- AppComponent -->
<div class="relative border-2 border-gray-400 rounded h-120 p-6 pt-12"> <div class="relative border-2 border-gray-400 rounded h-120 p-6 pt-12">
<span class="absolute left-0 top-0 ml-3 -mt-px px-2 transform -translate-y-1/2 bg-card text-gray-500 font-medium">AppComponent</span> <span class="absolute left-0 top-0 ml-3 -mt-px px-2 -translate-y-1/2 bg-card text-gray-500 font-medium">AppComponent</span>
<!-- LayoutComponent --> <!-- LayoutComponent -->
<div class="relative border-2 border-purple-400 rounded w-full h-full p-6 pt-12"> <div class="relative border-2 border-purple-400 rounded w-full h-full p-6 pt-12">
<span class="absolute left-0 top-0 ml-3 -mt-px px-2 transform -translate-y-1/2 bg-card text-purple-500 font-medium">LayoutComponent</span> <span class="absolute left-0 top-0 ml-3 -mt-px px-2 -translate-y-1/2 bg-card text-purple-500 font-medium">LayoutComponent</span>
<!-- xxxLayoutComponent --> <!-- xxxLayoutComponent -->
<div class="relative border-2 border-green-400 rounded w-full h-full"> <div class="relative border-2 border-green-400 rounded w-full h-full">
<span class="absolute left-0 top-0 ml-3 -mt-px px-2 transform -translate-y-1/2 bg-card text-green-500 font-medium">Layout</span> <span class="absolute left-0 top-0 ml-3 -mt-px px-2 -translate-y-1/2 bg-card text-green-500 font-medium">Layout</span>
<div class="flex w-full h-full"> <div class="flex w-full h-full">
<!-- Navigation --> <!-- Navigation -->

4
src/app/modules/admin/pages/activities/activities.component.html
View File

@ -36,7 +36,7 @@
<div class="relative flex flex-auto"> <div class="relative flex flex-auto">
<!-- Icon --> <!-- Icon -->
<ng-container *ngIf="activity.icon && !activity.image"> <ng-container *ngIf="activity.icon && !activity.image">
<div class="flex flex-shrink-0 items-center justify-center w-10 h-10 mr-4 rounded-full bg-gray-400"> <div class="flex shrink-0 items-center justify-center w-10 h-10 mr-4 rounded-full bg-gray-400">
<mat-icon <mat-icon
class="icon-size-5 text-white" class="icon-size-5 text-white"
[svgIcon]="activity.icon"> [svgIcon]="activity.icon">
@ -47,7 +47,7 @@
<!-- Image --> <!-- Image -->
<ng-container *ngIf="activity.image"> <ng-container *ngIf="activity.image">
<img <img
class="flex-shrink-0 w-10 h-10 mr-4 rounded-full overflow-hidden object-cover object-center" class="shrink-0 w-10 h-10 mr-4 rounded-full overflow-hidden object-cover object-center"
[src]="activity.image" [src]="activity.image"
[alt]="'Activity image'"> [alt]="'Activity image'">
</ng-container> </ng-container>

2
src/app/modules/admin/pages/profile/profile.component.html
View File

@ -786,7 +786,7 @@
(click)="expandableCard02.expanded = !expandableCard02.expanded"> (click)="expandableCard02.expanded = !expandableCard02.expanded">
<span class="mr-1">5 Comments</span> <span class="mr-1">5 Comments</span>
<mat-icon <mat-icon
class="icon-size-5 transform transition-transform ease-in-out duration-150 rotate-0" class="icon-size-5 transition-transform ease-in-out duration-150 rotate-0"
[ngClass]="{'rotate-180': expandableCard02.expanded}" [ngClass]="{'rotate-180': expandableCard02.expanded}"
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon> [svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
</button> </button>

4
src/app/modules/admin/ui/cards/cards.component.html
View File

@ -160,7 +160,7 @@
(click)="expandableCard01.expanded = !expandableCard01.expanded"> (click)="expandableCard01.expanded = !expandableCard01.expanded">
<span class="mr-1">Details</span> <span class="mr-1">Details</span>
<mat-icon <mat-icon
class="icon-size-5 transform transition-transform ease-in-out duration-150 rotate-0" class="icon-size-5 transition-transform ease-in-out duration-150 rotate-0"
[ngClass]="{'rotate-180': expandableCard01.expanded}" [ngClass]="{'rotate-180': expandableCard01.expanded}"
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon> [svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
</button> </button>
@ -2422,7 +2422,7 @@
(click)="expandableCard02.expanded = !expandableCard02.expanded"> (click)="expandableCard02.expanded = !expandableCard02.expanded">
<span class="mr-1">5 Comments</span> <span class="mr-1">5 Comments</span>
<mat-icon <mat-icon
class="icon-size-5 transform transition-transform ease-in-out duration-150 rotate-0" class="icon-size-5 transition-transform ease-in-out duration-150 rotate-0"
[ngClass]="{'rotate-180': expandableCard02.expanded}" [ngClass]="{'rotate-180': expandableCard02.expanded}"
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon> [svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
</button> </button>

49
src/app/modules/admin/ui/fuse-components/services/config/config.component.html
View File

@ -62,7 +62,9 @@
// Types // Types
export type Scheme = 'auto' | 'dark' | 'light'; export type Scheme = 'auto' | 'dark' | 'light';
export type Theme = 'default' | string; export type Screens = { [key: string]: string };
export type Theme = 'theme-default' | string;
export type Themes = { id: string; name: string }[];
/** /**
* AppConfig interface. Update this interface to strictly type your config * AppConfig interface. Update this interface to strictly type your config
@ -72,7 +74,9 @@
{ {
layout: Layout; layout: Layout;
scheme: Scheme; scheme: Scheme;
screens: Screens;
theme: Theme; theme: Theme;
themes: Themes;
} }
/** /**
@ -82,11 +86,48 @@
* If you need to store global configuration for your app, you can use this * If you need to store global configuration for your app, you can use this
* object to set the defaults. To access, update and reset the config, use * object to set the defaults. To access, update and reset the config, use
* FuseConfigService and its methods. * FuseConfigService and its methods.
*
* "Screens" are carried over to the BreakpointObserver for accessing them within
* components, and they are required.
*
* "Themes" are required for Tailwind to generate themes.
*/ */
export const appConfig: AppConfig = { export const appConfig: AppConfig = {
layout: 'classy', layout : 'classy',
scheme: 'light', scheme : 'light',
theme : 'default' screens: {
sm: '600px',
md: '960px',
lg: '1280px',
xl: '1440px'
},
theme : 'theme-default',
themes : [
{
id : 'theme-default',
name: 'Default'
},
{
id : 'theme-brand',
name: 'Brand'
},
{
id : 'theme-teal',
name: 'Teal'
},
{
id : 'theme-rose',
name: 'Rose'
},
{
id : 'theme-purple',
name: 'Purple'
},
{
id : 'theme-amber',
name: 'Amber'
}
]
}; };
</textarea> </textarea>
<!-- @formatter:on --> <!-- @formatter:on -->

16
src/app/modules/admin/ui/icons/icons.component.html
View File

@ -51,13 +51,13 @@
<mat-form-field class="min-w-40 ml-8 xs:ml-0"> <mat-form-field class="min-w-40 ml-8 xs:ml-0">
<mat-label>Icon size</mat-label> <mat-label>Icon size</mat-label>
<mat-select [(ngModel)]="iconSize"> <mat-select [(ngModel)]="iconSize">
<mat-option [value]="4">16</mat-option> <mat-option [value]="'icon-size-4'">16</mat-option>
<mat-option [value]="5">20</mat-option> <mat-option [value]="'icon-size-5'">20</mat-option>
<mat-option [value]="6">24</mat-option> <mat-option [value]="'icon-size-6'">24</mat-option>
<mat-option [value]="8">32</mat-option> <mat-option [value]="'icon-size-8'">32</mat-option>
<mat-option [value]="10">40</mat-option> <mat-option [value]="'icon-size-10'">40</mat-option>
<mat-option [value]="12">48</mat-option> <mat-option [value]="'icon-size-12'">48</mat-option>
<mat-option [value]="16">64</mat-option> <mat-option [value]="'icon-size-16'">64</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
@ -75,7 +75,7 @@
<div class="flex items-center justify-center mb-3"> <div class="flex items-center justify-center mb-3">
<mat-icon <mat-icon
[ngClass]="'icon-size-' + iconSize" [ngClass]="iconSize"
[svgIcon]="icons.namespace + ':' + icon"></mat-icon> [svgIcon]="icons.namespace + ':' + icon"></mat-icon>
</div> </div>

2
src/app/modules/admin/ui/icons/icons.component.ts
View File

@ -14,7 +14,7 @@ export class IconsComponent implements OnInit, OnDestroy
filteredIcons$: Observable<Icon>; filteredIcons$: Observable<Icon>;
filterValue$: BehaviorSubject<string> = new BehaviorSubject(''); filterValue$: BehaviorSubject<string> = new BehaviorSubject('');
iconSize: number = 24; iconSize: string = 'icon-size-8';
selectedIcon: string[]; selectedIcon: string[];
private _unsubscribeAll: Subject<any> = new Subject(); private _unsubscribeAll: Subject<any> = new Subject();

2
src/app/modules/admin/ui/material-components/material-components.component.html
View File

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<a <a
mat-flat-button mat-flat-button
href="https://material.angular.io/components/categories" href="https://material.angular.io/components/categories"

2
src/app/modules/admin/ui/page-layouts/carded/fullwidth/content-scroll/fullwidth.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button> <button mat-stroked-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5 mr-2"

2
src/app/modules/admin/ui/page-layouts/carded/fullwidth/normal-scroll/fullwidth.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button> <button mat-stroked-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5 mr-2"

2
src/app/modules/admin/ui/page-layouts/carded/fullwidth/page-scroll/fullwidth.component.html
View File

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button> <button mat-stroked-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5 mr-2"

2
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-1/content-scroll/left-sidebar-1.component.html
View File

@ -56,7 +56,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-1/normal-scroll/left-sidebar-1.component.html
View File

@ -56,7 +56,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-1/page-scroll/left-sidebar-1.component.html
View File

@ -58,7 +58,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-2/content-scroll/left-sidebar-2.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-2/normal-scroll/left-sidebar-2.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/left-sidebar-2/page-scroll/left-sidebar-2.component.html
View File

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-1/content-scroll/right-sidebar-1.component.html
View File

@ -57,7 +57,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-1/normal-scroll/right-sidebar-1.component.html
View File

@ -57,7 +57,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-1/page-scroll/right-sidebar-1.component.html
View File

@ -59,7 +59,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-2/content-scroll/right-sidebar-2.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-2/normal-scroll/right-sidebar-2.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/carded/right-sidebar-2/page-scroll/right-sidebar-2.component.html
View File

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button> <button mat-stroked-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5 mr-2"

2
src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button> <button mat-stroked-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5 mr-2"

2
src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.html
View File

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button> <button mat-stroked-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5 mr-2"

2
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button> <button mat-stroked-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5 mr-2"

2
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button> <button mat-stroked-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5 mr-2"

2
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html
View File

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button> <button mat-stroked-button>
<mat-icon <mat-icon
class="icon-size-5 mr-2" class="icon-size-5 mr-2"

2
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-2/content-scroll/left-sidebar-2.component.html
View File

@ -57,7 +57,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-2/inner-scroll/left-sidebar-2.component.html
View File

@ -57,7 +57,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-2/normal-scroll/left-sidebar-2.component.html
View File

@ -57,7 +57,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-2/page-scroll/left-sidebar-2.component.html
View File

@ -59,7 +59,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-3/content-scroll/left-sidebar-3.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-3/normal-scroll/left-sidebar-3.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/left-sidebar-3/page-scroll/left-sidebar-3.component.html
View File

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-2/content-scroll/right-sidebar-2.component.html
View File

@ -58,7 +58,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-2/inner-scroll/right-sidebar-2.component.html
View File

@ -58,7 +58,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-2/normal-scroll/right-sidebar-2.component.html
View File

@ -58,7 +58,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-2/page-scroll/right-sidebar-2.component.html
View File

@ -60,7 +60,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-3/content-scroll/right-sidebar-3.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-3/normal-scroll/right-sidebar-3.component.html
View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/app/modules/admin/ui/page-layouts/simple/right-sidebar-3/page-scroll/right-sidebar-3.component.html
View File

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"> <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button <button
mat-icon-button mat-icon-button
(click)="matDrawer.toggle()"> (click)="matDrawer.toggle()">

2
src/index.html
View File

@ -8,7 +8,7 @@
content="Admin Template and Starter Kit with Angular, Angular Material Components and TailwindCSS"> content="Admin Template and Starter Kit with Angular, Angular Material Components and TailwindCSS">
<meta <meta
name="keywords" name="keywords"
content="Fuse,HTML,CSS,Angular,Angular 2,Angular 10,Angular 11,Angular 12,Material,Material 2,Angular Components,Tailwind,Tailwind CSS,TailwindCSS,Admin Template,Admin Starter Kit"> content="Fuse,HTML,CSS,Angular,Angular 2,Angular 11,Angular 12,Angular 13,Material,Material 2,Angular Components,Tailwind,Tailwind CSS,TailwindCSS,Admin Template,Admin Starter Kit">
<meta <meta
name="viewport" name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"> content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">

218
tailwind.config.js
View File

@ -25,8 +25,8 @@ const themes = {
DEFAULT: colors.indigo[600] DEFAULT: colors.indigo[600]
}, },
accent : { accent : {
...colors.blueGray, ...colors.slate,
DEFAULT: colors.blueGray[800] DEFAULT: colors.slate[800]
}, },
warn : { warn : {
...colors.red, ...colors.red,
@ -41,7 +41,7 @@ const themes = {
'brand' : { 'brand' : {
primary: customPalettes.brand primary: customPalettes.brand
}, },
'indigo': { 'teal': {
primary: { primary: {
...colors.teal, ...colors.teal,
DEFAULT: colors.teal[600] DEFAULT: colors.teal[600]
@ -65,38 +65,10 @@ const themes = {
* Tailwind configuration * Tailwind configuration
*/ */
const config = { const config = {
experimental: {}, darkMode : 'class',
future : {}, content : ['./src/**/*.{html,scss,ts}'],
darkMode : 'class', important : true,
important : true, theme : {
purge : {
enabled: process.env.TAILWIND_MODE === 'build',
content: ['./src/**/*.{html,scss,ts}'],
options: {
safelist: {
standard: ['dark'],
deep : [/^theme/, /^mat/]
}
}
},
theme : {
colors : {
transparent: 'transparent',
current : 'currentColor',
black : colors.black,
white : colors.white,
pink : colors.pink,
gray : colors.blueGray,
red : colors.red,
orange : colors.orange,
amber : colors.amber,
yellow : colors.yellow,
green : colors.green,
teal : colors.teal,
blue : colors.blue,
indigo : colors.indigo,
purple : colors.purple
},
fontSize: { fontSize: {
'xs' : '0.625rem', 'xs' : '0.625rem',
'sm' : '0.75rem', 'sm' : '0.75rem',
@ -115,39 +87,41 @@ const config = {
'10xl': '8rem' '10xl': '8rem'
}, },
screens : { screens : {
print: {'raw': 'print'},
sm : '600px', sm : '600px',
md : '960px', md : '960px',
lg : '1280px', lg : '1280px',
xl : '1440px' xl : '1440px'
}, },
extend : { extend : {
animation : { animation : {
'spin-slow': 'spin 3s linear infinite' 'spin-slow': 'spin 3s linear infinite'
}, },
flex : { colors : {
gray: colors.slate
},
flex : {
'0': '0 0 auto' '0': '0 0 auto'
}, },
fontFamily: { fontFamily : {
sans: `"Inter var", ${defaultTheme.fontFamily.sans.join(',')}`, sans: `"Inter var", ${defaultTheme.fontFamily.sans.join(',')}`,
mono: `"IBM Plex Mono", ${defaultTheme.fontFamily.mono.join(',')}` mono: `"IBM Plex Mono", ${defaultTheme.fontFamily.mono.join(',')}`
}, },
opacity : { opacity : {
12: '0.12', 12: '0.12',
38: '0.38', 38: '0.38',
87: '0.87' 87: '0.87'
}, },
rotate : { rotate : {
'-270': '270deg', '-270': '270deg',
'15' : '15deg', '15' : '15deg',
'30' : '30deg', '30' : '30deg',
'60' : '60deg', '60' : '60deg',
'270' : '270deg' '270' : '270deg'
}, },
scale : { scale : {
'-1': '-1' '-1': '-1'
}, },
zIndex : { zIndex : {
'-1' : -1, '-1' : -1,
'49' : 49, '49' : 49,
'60' : 60, '60' : 60,
@ -159,7 +133,7 @@ const config = {
'9999' : 9999, '9999' : 9999,
'99999': 99999 '99999': 99999
}, },
spacing : { spacing : {
'13': '3.25rem', '13': '3.25rem',
'15': '3.75rem', '15': '3.75rem',
'18': '4.5rem', '18': '4.5rem',
@ -167,23 +141,7 @@ const config = {
'26': '6.5rem', '26': '6.5rem',
'30': '7.5rem', '30': '7.5rem',
'50': '12.5rem', '50': '12.5rem',
'90': '22.5rem' '90': '22.5rem',
},
/**
* Extended spacing values for width and height utilities.
* This way, we won't be adding these to other utilities
* that use 'spacing' config to keep the file size
* smaller by not generating useless utilities such as
* p-1/4 or m-480.
*/
extendedSpacing : {
// Fractional values
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
// Bigger values // Bigger values
'100': '25rem', '100': '25rem',
@ -200,30 +158,28 @@ const config = {
'320': '80rem', '320': '80rem',
'360': '90rem', '360': '90rem',
'400': '100rem', '400': '100rem',
'480': '120rem' '480': '120rem',
// Fractional values
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%'
}, },
height : theme => ({
...theme('extendedSpacing')
}),
minHeight : theme => ({ minHeight : theme => ({
...theme('spacing'), ...theme('spacing')
...theme('extendedSpacing')
}), }),
maxHeight : theme => ({ maxHeight : theme => ({
...theme('extendedSpacing'),
none: 'none' none: 'none'
}), }),
width : theme => ({
...theme('extendedSpacing')
}),
minWidth : theme => ({ minWidth : theme => ({
...theme('spacing'), ...theme('spacing'),
...theme('extendedSpacing'),
screen: '100vw' screen: '100vw'
}), }),
maxWidth : theme => ({ maxWidth : theme => ({
...theme('spacing'), ...theme('spacing'),
...theme('extendedSpacing'),
screen: '100vw' screen: '100vw'
}), }),
transitionDuration : { transitionDuration : {
@ -315,119 +271,7 @@ const config = {
}) })
} }
}, },
variants : { corePlugins: {
accessibility : [],
alignContent : ['responsive'],
alignItems : ['responsive'],
alignSelf : ['responsive'],
animation : [],
backgroundAttachment : [],
backgroundClip : [],
backgroundColor : ['dark', 'responsive', 'group-hover', 'hover', 'focus', 'focus-within'],
backgroundImage : [],
backgroundOpacity : ['dark', 'hover'],
backgroundPosition : [],
backgroundRepeat : [],
backgroundSize : [],
borderCollapse : [],
borderColor : ['dark', 'group-hover', 'hover', 'focus', 'focus-within'],
borderOpacity : ['group-hover', 'hover'],
borderRadius : ['responsive'],
borderStyle : [],
borderWidth : ['dark', 'responsive', 'first', 'last', 'odd', 'even'],
boxShadow : ['dark', 'responsive', 'hover', 'focus-within'],
boxSizing : [],
cursor : [],
display : ['dark', 'responsive', 'hover', 'group-hover'],
divideColor : ['dark'],
divideOpacity : [],
divideStyle : [],
divideWidth : ['responsive'],
fill : [],
flex : ['responsive'],
flexDirection : ['responsive'],
flexGrow : ['responsive'],
flexShrink : ['responsive'],
flexWrap : ['responsive'],
fontFamily : [],
fontSize : ['responsive'],
fontSmoothing : [],
fontStyle : ['responsive'],
fontVariantNumeric : [],
fontWeight : ['responsive'],
gap : ['responsive'],
gridAutoColumns : ['responsive'],
gridAutoFlow : ['responsive'],
gridAutoRows : ['responsive'],
gridColumn : ['responsive'],
gridColumnEnd : ['responsive'],
gridColumnStart : ['responsive'],
gridRow : ['responsive'],
gridRowEnd : ['responsive'],
gridRowStart : ['responsive'],
gridTemplateColumns : ['responsive'],
gridTemplateRows : ['responsive'],
height : ['responsive'],
inset : ['responsive'],
justifyContent : ['responsive'],
justifyItems : ['responsive'],
justifySelf : ['responsive'],
letterSpacing : ['responsive'],
lineHeight : ['responsive'],
listStylePosition : [],
listStyleType : [],
margin : ['responsive'],
maxHeight : ['responsive'],
maxWidth : ['responsive'],
minHeight : ['responsive'],
minWidth : ['responsive'],
objectFit : ['responsive'],
objectPosition : ['responsive'],
opacity : ['responsive', 'group-hover', 'hover'],
order : ['responsive'],
outline : [],
overflow : ['responsive'],
overscrollBehavior : ['responsive'],
padding : ['responsive'],
placeContent : ['responsive'],
placeItems : ['responsive'],
placeSelf : ['responsive'],
pointerEvents : ['responsive'],
position : ['responsive'],
resize : [],
ringColor : ['dark', 'group-hover'],
ringOffsetColor : ['dark'],
ringOffsetWidth : [],
ringOpacity : [],
ringWidth : [],
rotate : [],
scale : [],
skew : [],
space : ['responsive'],
stroke : ['responsive'],
strokeWidth : ['responsive'],
tableLayout : ['responsive'],
textAlign : ['responsive'],
textColor : ['dark', 'group-hover', 'hover'],
textDecoration : ['group-hover', 'hover'],
textOpacity : ['group-hover', 'hover'],
textOverflow : ['responsive'],
textTransform : [],
transform : [],
transformOrigin : [],
transitionDelay : [],
transitionDuration : [],
transitionProperty : [],
transitionTimingFunction: [],
translate : ['responsive', 'hover'],
userSelect : ['responsive'],
visibility : ['responsive'],
whitespace : ['responsive'],
width : ['responsive'],
wordBreak : ['responsive'],
zIndex : ['responsive']
},
corePlugins : {
appearance : false, appearance : false,
gradientColorStops: false, gradientColorStops: false,
container : false, container : false,
@ -437,7 +281,7 @@ const config = {
placeholderOpacity: false, placeholderOpacity: false,
verticalAlign : false verticalAlign : false
}, },
plugins : [ plugins : [
// Fuse - Tailwind plugins // Fuse - Tailwind plugins
require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/extract-config'))), require(path.resolve(__dirname, ('src/@fuse/tailwind/plugins/extract-config'))),