From c86a538d41733de6c2cc60bdb5be84995cc39648 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Thu, 1 Jul 2021 12:23:49 +0300
Subject: [PATCH] (Angular Material) Apply rounded styles by default

---
 .../styles/overrides/angular-material.scss    | 139 ++++++++----------
 src/index.html                                |   3 +-
 2 files changed, 62 insertions(+), 80 deletions(-)

diff --git a/src/@fuse/styles/overrides/angular-material.scss b/src/@fuse/styles/overrides/angular-material.scss
index 736a68fc..3d671f2c 100644
--- a/src/@fuse/styles/overrides/angular-material.scss
+++ b/src/@fuse/styles/overrides/angular-material.scss
@@ -136,11 +136,8 @@
 .mat-flat-button,
 .mat-raised-button,
 .mat-stroked-button {
-
-    .fuse-mat-rounded & {
-        padding: 0 20px;
-        border-radius: 9999px;
-    }
+    padding: 0 20px !important;
+    border-radius: 9999px !important;
 }
 
 /* Target all buttons */
@@ -334,6 +331,8 @@
 /*  @ Button Toggle
 /* ----------------------------------------------------------------------------------------------------- */
 .mat-button-toggle-group {
+    border: none !important;
+    @apply space-x-1;
 
     &.mat-button-toggle-group-appearance-standard {
 
@@ -341,36 +340,27 @@
             background-clip: padding-box;
         }
     }
-}
 
-/* Rounded design */
-.fuse-mat-rounded {
-
-    .mat-button-toggle-group {
+    .mat-button-toggle {
+        border-radius: 9999px;
+        overflow: hidden;
         border: none !important;
-        @apply space-x-1;
+        font-weight: 500;
 
-        .mat-button-toggle {
-            border-radius: 9999px;
-            overflow: hidden;
-            border: none !important;
-            font-weight: 500;
-
-            &.mat-button-toggle-checked {
-
-                .mat-button-toggle-label-content {
-                    @apply text-default #{'!important'};
-                }
-            }
+        &.mat-button-toggle-checked {
 
             .mat-button-toggle-label-content {
-                padding: 0 20px;
-                @apply text-secondary;
+                @apply text-default #{'!important'};
             }
+        }
 
-            .mat-ripple {
-                border-radius: 9999px;
-            }
+        .mat-button-toggle-label-content {
+            padding: 0 20px;
+            @apply text-secondary;
+        }
+
+        .mat-ripple {
+            border-radius: 9999px;
         }
     }
 }
@@ -1329,62 +1319,55 @@
             opacity: 0 !important;
         }
     }
+
+    .mat-tab-header {
+        border-bottom: none !important;
+
+        .mat-tab-label-container {
+            padding: 0 24px;
+
+            .mat-tab-list {
+
+                .mat-tab-labels {
+
+                    .mat-tab-label {
+                        min-width: 0 !important;
+                        height: 40px !important;
+                        padding: 0 20px !important;
+                        border-radius: 9999px !important;
+                        @apply text-secondary;
+
+                        &.mat-tab-label-active {
+                            @apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
+                            @apply text-default #{'!important'};
+                        }
+
+                        + .mat-tab-label {
+                            margin-left: 4px;
+                        }
+
+                        .mat-tab-label-content {
+                            line-height: 20px;
+                        }
+                    }
+                }
+
+                .mat-ink-bar {
+                    display: none !important;
+                }
+            }
+        }
+    }
+
+    .mat-tab-body-content {
+        padding: 24px;
+    }
 }
 
 .mat-tab-label {
     opacity: 1 !important;
 }
 
-/* Rounded design */
-.fuse-mat-rounded {
-
-    .mat-tab-group {
-
-        .mat-tab-header {
-            border-bottom: none !important;
-
-            .mat-tab-label-container {
-                padding: 0 24px;
-
-                .mat-tab-list {
-
-                    .mat-tab-labels {
-
-                        .mat-tab-label {
-                            min-width: 0 !important;
-                            height: 40px !important;
-                            padding: 0 20px !important;
-                            border-radius: 9999px !important;
-                            @apply text-secondary;
-
-                            &.mat-tab-label-active {
-                                @apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
-                                @apply text-default #{'!important'};
-                            }
-
-                            + .mat-tab-label {
-                                margin-left: 4px;
-                            }
-
-                            .mat-tab-label-content {
-                                line-height: 20px;
-                            }
-                        }
-                    }
-
-                    .mat-ink-bar {
-                        display: none !important;
-                    }
-                }
-            }
-        }
-
-        .mat-tab-body-content {
-            padding: 24px;
-        }
-    }
-}
-
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Textarea
 /* ----------------------------------------------------------------------------------------------------- */
diff --git a/src/index.html b/src/index.html
index ac8787a9..4421ae93 100644
--- a/src/index.html
+++ b/src/index.html
@@ -50,8 +50,7 @@
 
     </head>
 
-    <!-- Apply the rounded design throughout the Angular Material library -->
-    <body class="fuse-mat-rounded">
+    <body>
 
         <!-- Splash screen -->
         <fuse-splash-screen>