Updated the position attribute of the sidenav

Did some changes on the core styles + forced input font sizes to 16px
2025-01-10 04:25:08 +00:00 · 2018-05-05 15:28:05 +03:00 · 2018-05-05 15:28:05 +03:00 · 10dad46d7c
commit 10dad46d7c
parent 1c4983c756
28 changed files with 48 additions and 34 deletions
--- a/src/@fuse/scss/core.scss
+++ b/src/@fuse/scss/core.scss
@ -1,3 +1,6 @@
+// This file meant to be imported only once! Use fuse.scss to access
+// to the core Fuse and Angular Material mixins
+
 // ngx-datatable
@import '~@swimlane/ngx-datatable/release/themes/material';

@ -7,10 +10,13 @@
 // Fuse
@import "fuse";

-// Theming
+// Include core Angular Material styles
@include mat-core();

-// Include theme styles for core and each component used in your app.
+// Setup the typography
+@include angular-material-typography($typography);
+
+// Create an Angular Material theme from the $theme map
@include angular-material-theme($theme);

 // Partials
--- a/src/@fuse/scss/fuse.scss
+++ b/src/@fuse/scss/fuse.scss
@ -1,4 +1,5 @@
-// Variables
-@import "variables/theme";
-// Mixins
+// Material theming
+@import "theming";
+
+// Breakpoint mixins
@import "mixins/breakpoints";
--- a/src/@fuse/scss/variables/_theme.scss
+++ b/src/@fuse/scss/variables/_theme.scss
@ -1,5 +1,6 @@
@import '~@angular/material/theming';

+// Custom color maps
 $mat-white: (
    500: white,
    contrast: (
@ -47,13 +48,19 @@ $mat-fusedark: (
    )
 );

-// Palettes
+// Define the Material palettes
 $primary: mat-palette($mat-fusedark);
 $accent: mat-palette($mat-light-blue, 600, 400, 700);
 $warn: mat-palette($mat-red);

-// Create the theme object (a Sass map containing all of the palettes).
+// Create the Material theme object
 $theme: mat-light-theme($primary, $accent, $warn);

+// Store the background and foreground colors for easier access
 $background: map-get($theme, background);
 $foreground: map-get($theme, foreground);
+
+// Force the input field font sizes to 16px
+$typography: mat-typography-config(
+    $input: mat-typography-level(16px, 1.125, 400)
+)
--- a/src/app/main/content/apps/academy/course/course.component.html
+++ b/src/app/main/content/apps/academy/course/course.component.html
@ -3,7 +3,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="academy-left-sidenav" mat-is-locked-open="gt-md">

            <div class="sidenav-content" fusePerfectScrollbar>
--- a/src/app/main/content/apps/chat/chat.component.html
+++ b/src/app/main/content/apps/chat/chat.component.html
@ -13,7 +13,7 @@
            <mat-sidenav-container>

                <!-- LEFT SIDENAV -->
-                <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+                <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                             fuseMatSidenavHelper="chat-left-sidenav" mat-is-locked-open="gt-md">
                    <fuse-chat-left-sidenav></fuse-chat-left-sidenav>
                </mat-sidenav>
@ -26,7 +26,7 @@
                <!-- / CONTENT -->

                <!-- RIGHT SIDENAV -->
-                <mat-sidenav class="sidenav" align="end" opened="false" mode="over"
+                <mat-sidenav class="sidenav" position="end" opened="false" mode="over"
                             fuseMatSidenavHelper="chat-right-sidenav">
                    <fuse-chat-right-sidenav></fuse-chat-right-sidenav>
                </mat-sidenav>
--- a/src/app/main/content/apps/contacts/contacts.component.html
+++ b/src/app/main/content/apps/contacts/contacts.component.html
@ -42,7 +42,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="contacts-main-sidenav" mat-is-locked-open="gt-sm">

            <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>
--- a/src/app/main/content/apps/dashboards/project/project.component.html
+++ b/src/app/main/content/apps/dashboards/project/project.component.html
@ -750,7 +750,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="end" mode="side" opened="true"
+        <mat-sidenav class="sidenav" position="end" mode="side" opened="true"
                     fuseMatSidenavHelper="dashboards-right-sidenav" mat-is-locked-open="gt-md">

            <div class="sidenav-content" fusePerfectScrollbar>
--- a/src/app/main/content/apps/file-manager/file-manager.component.html
+++ b/src/app/main/content/apps/file-manager/file-manager.component.html
@ -3,7 +3,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
+        <mat-sidenav class="sidenav left-sidenav" position="start" opened="false" mode="over"
                     fuseMatSidenavHelper="file-manager-left-sidenav">
            <fuse-file-manager-main-sidenav></fuse-file-manager-main-sidenav>
        </mat-sidenav>
@ -69,7 +69,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav right-sidenav " align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav right-sidenav " position="end" opened="true" mode="side"
                     fuseMatSidenavHelper="file-manager-right-sidenav" mat-is-locked-open="gt-md">
            <fuse-file-manager-details-sidenav></fuse-file-manager-details-sidenav>
        </mat-sidenav>
--- a/src/app/main/content/apps/mail-ngrx/mail.component.html
+++ b/src/app/main/content/apps/mail-ngrx/mail.component.html
@ -7,7 +7,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" mode="side" opened="true"
+        <mat-sidenav class="sidenav mat-sidenav-opened" position="start" mode="side" opened="true"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
            <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
        </mat-sidenav>
--- a/src/app/main/content/apps/mail/mail.component.html
+++ b/src/app/main/content/apps/mail/mail.component.html
@ -7,7 +7,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" mode="side" opened="true"
+        <mat-sidenav class="sidenav" position="start" mode="side" opened="true"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
            <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
        </mat-sidenav>
--- a/src/app/main/content/apps/scrumboard/board/board.component.html
+++ b/src/app/main/content/apps/scrumboard/board/board.component.html
@ -80,7 +80,7 @@
        <!-- primary content -->
    </div>

-    <mat-sidenav #settingsSidenav align="end">
+    <mat-sidenav #settingsSidenav position="end">
        <fuse-scrumboard-board-settings></fuse-scrumboard-board-settings>
    </mat-sidenav>

--- a/src/app/main/content/apps/todo/todo.component.html
+++ b/src/app/main/content/apps/todo/todo.component.html
@ -7,7 +7,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
            <fuse-todo-main-sidenav></fuse-todo-main-sidenav>
        </mat-sidenav>
--- a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html
@ -7,7 +7,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">

            <!-- SIDENAV HEADER -->
--- a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
@ -7,7 +7,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">

            <!-- SIDENAV HEADER -->
--- a/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html
@ -7,7 +7,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">

            <!-- SIDENAV HEADER -->
--- a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
@ -7,7 +7,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">

            <!-- SIDENAV HEADER -->
--- a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html
@ -126,7 +126,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">

            <!-- SIDENAV HEADER -->
--- a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
@ -45,7 +45,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">

            <!-- SIDENAV HEADER -->
--- a/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html
@ -126,7 +126,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">

            <!-- SIDENAV HEADER -->
--- a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
@ -45,7 +45,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
                     fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">

            <!-- SIDENAV HEADER -->
--- a/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
@ -3,7 +3,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav  p-24" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav  p-24" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="simple-left-sidenav-2" mat-is-locked-open="gt-md">

            <fuse-demo-sidenav></fuse-demo-sidenav>
--- a/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
@ -19,7 +19,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="simple-left-sidenav-3" mat-is-locked-open="gt-md">

            <div class="sidenav-content" fusePerfectScrollbar>
--- a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html
@ -3,7 +3,7 @@
    <mat-sidenav-container>

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="start" opened="true" mode="side"
                     fuseMatSidenavHelper="simple-left-sidenav" mat-is-locked-open="gt-md">

            <div class="sidenav-content p-24" fusePerfectScrollbar>
--- a/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
@ -33,7 +33,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav  p-24" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav  p-24" position="end" opened="true" mode="side"
                     fuseMatSidenavHelper="simple-right-sidenav-2" mat-is-locked-open="gt-md">

            <fuse-demo-sidenav></fuse-demo-sidenav>
--- a/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
@ -33,7 +33,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
                     fuseMatSidenavHelper="simple-right-sidenav-3" mat-is-locked-open="gt-md">

            <div class="sidenav-content" fusePerfectScrollbar>
--- a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
@ -33,7 +33,7 @@
        <!-- / CENTER -->

        <!-- SIDENAV -->
-        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" position="end" opened="true" mode="side"
                     fuseMatSidenavHelper="simple-right-sidenav" mat-is-locked-open="gt-md">

            <div class="sidenav-content p-24" fusePerfectScrollbar>
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@ -67,7 +67,7 @@
    </div>

    <!-- QUICK PANEL -->
-    <mat-sidenav fuseMatSidenavHelper="quick-panel" align="end">
+    <mat-sidenav fuseMatSidenavHelper="quick-panel" position="end">
        <fuse-quick-panel></fuse-quick-panel>
    </mat-sidenav>
    <!-- / QUICK PANEL -->
--- a/src/styles.scss
+++ b/src/styles.scss
@ -1,2 +1,2 @@
-// Import Fuse main library
+// Import Fuse core library
@import "@fuse/scss/core";