diff --git a/angular.json b/angular.json index 887741a0..e7ce2915 100644 --- a/angular.json +++ b/angular.json @@ -2,10 +2,7 @@ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "cli": { - "defaultCollection": "@angular-eslint/schematics", - "cache": { - "enabled": false - } + "defaultCollection": "@angular-eslint/schematics" }, "newProjectRoot": "projects", "projects": { diff --git a/package.json b/package.json index 81d37529..e5700c30 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fuse/starter", - "version": "14.1.1", + "version": "14.2.0", "description": "Fuse - Angular Admin Template and Starter Project", "author": "https://themeforest.net/user/srcn", "license": "https://themeforest.net/licenses/standard", diff --git a/src/@fuse/components/drawer/drawer.component.scss b/src/@fuse/components/drawer/drawer.component.scss index 2016b2d4..e10cad2a 100644 --- a/src/@fuse/components/drawer/drawer.component.scss +++ b/src/@fuse/components/drawer/drawer.component.scss @@ -1,14 +1,16 @@ /* Variables */ -$fuse-drawer-width: 320; +:root { + --fuse-drawer-width: 320px; +} fuse-drawer { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; - width: #{$fuse-drawer-width}px; - min-width: #{$fuse-drawer-width}px; - max-width: #{$fuse-drawer-width}px; + width: var(--fuse-drawer-width); + min-width: var(--fuse-drawer-width); + max-width: var(--fuse-drawer-width); z-index: 300; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35); @apply bg-card; @@ -43,7 +45,7 @@ fuse-drawer { /* Side mode */ &.fuse-drawer-mode-side { - margin-left: -#{$fuse-drawer-width}px; + margin-left: calc(var(--fuse-drawer-width) * -1); &.fuse-drawer-opened { margin-left: 0; @@ -71,7 +73,7 @@ fuse-drawer { /* Side mode */ &.fuse-drawer-mode-side { - margin-right: -#{$fuse-drawer-width}px; + margin-right: calc(var(--fuse-drawer-width) * -1); &.fuse-drawer-opened { margin-right: 0; diff --git a/src/@fuse/components/masonry/masonry.component.scss b/src/@fuse/components/masonry/masonry.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/src/@fuse/components/masonry/masonry.component.ts b/src/@fuse/components/masonry/masonry.component.ts index bf49f65c..6737ab97 100644 --- a/src/@fuse/components/masonry/masonry.component.ts +++ b/src/@fuse/components/masonry/masonry.component.ts @@ -5,7 +5,6 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; @Component({ selector : 'fuse-masonry', templateUrl : './masonry.component.html', - styleUrls : ['./masonry.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations, exportAs : 'fuseMasonry' diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss index dd63b1f9..e91fbc66 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/compact.scss @@ -1,20 +1,22 @@ /* Variables */ -$fuse-vertical-navigation-compact-width: 112px; +:root { + --fuse-vertical-navigation-compact-width: 112px; +} fuse-vertical-navigation { /* Compact appearance overrides */ &.fuse-vertical-navigation-appearance-compact { - width: $fuse-vertical-navigation-compact-width; - min-width: $fuse-vertical-navigation-compact-width; - max-width: $fuse-vertical-navigation-compact-width; + width: var(--fuse-vertical-navigation-compact-width); + min-width: var(--fuse-vertical-navigation-compact-width); + max-width: var(--fuse-vertical-navigation-compact-width); /* Left positioned */ &.fuse-vertical-navigation-position-left { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-left: -$fuse-vertical-navigation-compact-width; + margin-left: calc(var(--fuse-vertical-navigation-compact-width) * -1); } /* Opened */ @@ -28,7 +30,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-right: -$fuse-vertical-navigation-compact-width; + margin-right: calc(var(--fuse-vertical-navigation-compact-width) * -1); } /* Opened */ @@ -39,7 +41,7 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { left: auto; - right: $fuse-vertical-navigation-compact-width; + right: var(--fuse-vertical-navigation-compact-width); } } @@ -104,7 +106,7 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { - left: $fuse-vertical-navigation-compact-width; + left: var(--fuse-vertical-navigation-compact-width); } } } diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss index c336c564..569ad4f0 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/default.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/default.scss @@ -1,5 +1,7 @@ /* Variables */ -$fuse-vertical-navigation-width: 280px; +:root { + --fuse-vertical-navigation-width: 280px; +} fuse-vertical-navigation { position: sticky; @@ -7,9 +9,9 @@ fuse-vertical-navigation { flex-direction: column; flex: 1 0 auto; top: 0; - width: $fuse-vertical-navigation-width; - min-width: $fuse-vertical-navigation-width; - max-width: $fuse-vertical-navigation-width; + width: var(--fuse-vertical-navigation-width); + min-width: var(--fuse-vertical-navigation-width); + max-width: var(--fuse-vertical-navigation-width); height: 100vh; min-height: 100vh; max-height: 100vh; @@ -45,7 +47,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-left: -$fuse-vertical-navigation-width; + margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1); &.fuse-vertical-navigation-opened { margin-left: 0; @@ -73,7 +75,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-right: -$fuse-vertical-navigation-width; + margin-right: calc(var(--fuse-vertical-navigation-width) * -1); &.fuse-vertical-navigation-opened { margin-right: 0; @@ -170,8 +172,8 @@ fuse-vertical-navigation { flex-direction: column; top: 0; bottom: 0; - left: $fuse-vertical-navigation-width; - width: $fuse-vertical-navigation-width; + left: var(--fuse-vertical-navigation-width); + width: var(--fuse-vertical-navigation-width); height: 100%; z-index: 5; overflow-x: hidden; @@ -196,7 +198,7 @@ fuse-vertical-navigation { .fuse-vertical-navigation-aside-wrapper { left: auto; - right: $fuse-vertical-navigation-width; + right: var(--fuse-vertical-navigation-width); } } diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss index 791ff17b..8bbebe24 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/dense.scss @@ -1,6 +1,8 @@ /* Variables */ -$fuse-vertical-navigation-width: 280px; -$fuse-vertical-navigation-dense-width: 80px; +:root { + --fuse-vertical-navigation-width: 280px; + --fuse-vertical-navigation-dense-width: 80px; +} fuse-vertical-navigation { @@ -8,16 +10,16 @@ fuse-vertical-navigation { &.fuse-vertical-navigation-appearance-dense { &:not(.fuse-vertical-navigation-mode-over) { - width: $fuse-vertical-navigation-dense-width; - min-width: $fuse-vertical-navigation-dense-width; - max-width: $fuse-vertical-navigation-dense-width; + width: var(--fuse-vertical-navigation-dense-width); + min-width: var(--fuse-vertical-navigation-dense-width); + max-width: var(--fuse-vertical-navigation-dense-width); /* Left positioned */ &.fuse-vertical-navigation-position-left { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-left: -$fuse-vertical-navigation-dense-width; + margin-left: calc(var(--fuse-vertical-navigation-dense-width) * -1); } /* Opened */ @@ -31,7 +33,7 @@ fuse-vertical-navigation { /* Side mode */ &.fuse-vertical-navigation-mode-side { - margin-right: -$fuse-vertical-navigation-dense-width; + margin-right: calc(var(--fuse-vertical-navigation-dense-width) * -1); } /* Opened */ @@ -42,14 +44,14 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { left: auto; - right: $fuse-vertical-navigation-dense-width; + right: var(--fuse-vertical-navigation-dense-width); } &.fuse-vertical-navigation-hover { .fuse-vertical-navigation-aside-wrapper { left: auto; - right: $fuse-vertical-navigation-width; + right: var(--fuse-vertical-navigation-width); } } } @@ -69,9 +71,9 @@ fuse-vertical-navigation { .fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item { - width: $fuse-vertical-navigation-dense-width - 24px; - min-width: $fuse-vertical-navigation-dense-width - 24px; - max-width: $fuse-vertical-navigation-dense-width - 24px; + width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); + min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); + max-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px); .fuse-vertical-navigation-item-arrow, .fuse-vertical-navigation-item-badge, @@ -142,23 +144,23 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { - left: $fuse-vertical-navigation-dense-width; + left: var(--fuse-vertical-navigation-dense-width); } /* Hover */ &.fuse-vertical-navigation-hover { .fuse-vertical-navigation-wrapper { - width: $fuse-vertical-navigation-width; + width: var(--fuse-vertical-navigation-width); .fuse-vertical-navigation-content { .fuse-vertical-navigation-item-wrapper { .fuse-vertical-navigation-item { - width: $fuse-vertical-navigation-width - 24px; - min-width: $fuse-vertical-navigation-width - 24px; - max-width: $fuse-vertical-navigation-width - 24px; + width: calc(var(--fuse-vertical-navigation-width) - 24px); + min-width: calc(var(--fuse-vertical-navigation-width) - 24px); + max-width: calc(var(--fuse-vertical-navigation-width) - 24px); .fuse-vertical-navigation-item-arrow, .fuse-vertical-navigation-item-badge, @@ -173,7 +175,7 @@ fuse-vertical-navigation { } .fuse-vertical-navigation-aside-wrapper { - left: $fuse-vertical-navigation-width; + left: var(--fuse-vertical-navigation-width); } } } diff --git a/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss index eadefbc2..997bf254 100644 --- a/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss +++ b/src/@fuse/components/navigation/vertical/styles/appearances/thin.scss @@ -1,19 +1,21 @@ /* Variables */ -$fuse-vertical-navigation-thin-width: 80px; +:root { + --fuse-vertical-navigation-thin-width: 80px; +} fuse-vertical-navigation { /* Thin appearance overrides */ &.fuse-vertical-navigation-appearance-thin { - width: $fuse-vertical-navigation-thin-width; - min-width: $fuse-vertical-navigation-thin-width; - max-width: $fuse-vertical-navigation-thin-width; + width: var(--fuse-vertical-navigation-thin-width); + min-width: var(--fuse-vertical-navigation-thin-width); + max-width: var(--fuse-vertical-navigation-thin-width); /* Left positioned */ &.fuse-vertical-navigation-position-left { &.fuse-vertical-navigation-mode-side { - margin-left: -$fuse-vertical-navigation-thin-width; + margin-left: calc(var(--fuse-vertical-navigation-thin-width) * -1); } &.fuse-vertical-navigation-opened { @@ -25,7 +27,7 @@ fuse-vertical-navigation { &.fuse-vertical-navigation-position-right { &.fuse-vertical-navigation-mode-side { - margin-right: -$fuse-vertical-navigation-thin-width; + margin-right: calc(var(--fuse-vertical-navigation-thin-width) * -1); } &.fuse-vertical-navigation-opened { @@ -34,7 +36,7 @@ fuse-vertical-navigation { .fuse-vertical-navigation-aside-wrapper { left: auto; - right: $fuse-vertical-navigation-thin-width; + right: var(--fuse-vertical-navigation-thin-width); } } @@ -91,7 +93,7 @@ fuse-vertical-navigation { /* Aside wrapper */ .fuse-vertical-navigation-aside-wrapper { - left: $fuse-vertical-navigation-thin-width; + left: var(--fuse-vertical-navigation-thin-width); } } } diff --git a/src/@fuse/version/fuse-version.ts b/src/@fuse/version/fuse-version.ts index 1c73db1d..5a485a4a 100644 --- a/src/@fuse/version/fuse-version.ts +++ b/src/@fuse/version/fuse-version.ts @@ -1,3 +1,3 @@ import { Version } from '@fuse/version/version'; -export const FUSE_VERSION = new Version('14.1.1').full; +export const FUSE_VERSION = new Version('14.2.0').full; diff --git a/src/app/layout/layouts/vertical/dense/dense.component.ts b/src/app/layout/layouts/vertical/dense/dense.component.ts index c55621d0..58525cdd 100644 --- a/src/app/layout/layouts/vertical/dense/dense.component.ts +++ b/src/app/layout/layouts/vertical/dense/dense.component.ts @@ -66,6 +66,9 @@ export class DenseLayoutComponent implements OnInit, OnDestroy // Check if the screen is small this.isScreenSmall = !matchingAliases.includes('md'); + + // Change the navigation appearance + this.navigationAppearance = this.isScreenSmall ? 'default' : 'dense'; }); }