Merge pull request #23672 from abpframework/basic-theme-google-fonts

Refactor font imports and add googlefonts.css.

modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Bundling/BasicThemeGlobalStyleContributor.cs

@@ -6,6 +6,7 @@ public class BasicThemeGlobalStyleContributor : BundleContributor
 {
     public override void ConfigureBundle(BundleConfigurationContext context)
     {
+        context.Files.Add(new BundleFile("/themes/basic/googlefonts.css", true));
         context.Files.Add("/themes/basic/layout.css");
     }
 }

modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/wwwroot/themes/basic/googlefonts.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/wwwroot/themes/basic/layout.css

@@ -1,60 +1,65 @@
-
-@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
 #main-navbar-tools a.dropdown-toggle {
     text-decoration: none;
     color: #fff;
 }
- 
+
 .navbar .dropdown-submenu {
     position: relative;
 }
+
 .navbar .dropdown-menu {
     margin: 0;
     padding: 0;
 }
-    .navbar .dropdown-menu a {
-        font-size: .9em;
-        padding: 10px 15px;
-        display: block;
-        min-width: 210px;
-        text-align: left;
-        border-radius: 0.25rem;
-        min-height: 44px;
-    }
+
+.navbar .dropdown-menu a {
+    font-size: .9em;
+    padding: 10px 15px;
+    display: block;
+    min-width: 210px;
+    text-align: left;
+    border-radius: 0.25rem;
+    min-height: 44px;
+}
+
 .navbar .dropdown-submenu a::after {
     transform: rotate(-90deg);
     position: absolute;
     right: 16px;
     top: 18px;
-} 
+}
+
 .navbar .dropdown-submenu .dropdown-menu {
     top: 0;
-    left: 100%; 
-} 
+    left: 100%;
+}
 
 .card-header .btn {
     padding: 2px 6px;
-} 
+}
+
 .card-header h5 {
     margin: 0;
-} 
-.container > .card { 
+}
+
+.container>.card {
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
 }
 
-@media screen and (min-width: 768px) { 
-    .navbar .dropdown:hover > .dropdown-menu {
+@media screen and (min-width: 768px) {
+    .navbar .dropdown:hover>.dropdown-menu {
         display: block;
     }
 
-    .navbar .dropdown-submenu:hover > .dropdown-menu {
+    .navbar .dropdown-submenu:hover>.dropdown-menu {
         display: block;
     }
 }
+
 .input-validation-error {
     border-color: #dc3545;
 }
+
 .field-validation-error {
     font-size: 0.8em;
 }
@@ -75,33 +80,40 @@ div.dataTables_wrapper div.dataTables_length label {
 
 .rtl .dropdown-menu-right {
     right: auto;
-    left: 0; 
+    left: 0;
 }
 
-    .rtl .dropdown-menu-right a { 
-        text-align: right;
-    }
+.rtl .dropdown-menu-right a {
+    text-align: right;
+}
 
 .rtl .navbar .dropdown-menu a {
     text-align: right;
 }
+
 .rtl .navbar .dropdown-submenu .dropdown-menu {
     top: 0;
     left: auto;
     right: 100%;
-} 
+}
+
 .rtl div.dataTables_wrapper div.dataTables_filter input {
     margin-left: auto;
     margin-right: 0.5em;
 }
+
 .rtl div.dataTables_wrapper div.dataTables_filter {
     text-align: left;
 }
-.rtl table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
+
+.rtl table.dataTable thead th,
+table.dataTable thead td,
+table.dataTable tfoot th,
+table.dataTable tfoot td {
     text-align: right;
 }
 
-.brand-container{
+.brand-container {
     text-align: center;
     margin-top: 8rem;
 }
@@ -111,7 +123,7 @@ div.dataTables_wrapper div.dataTables_length label {
 }
 
 .brand-text {
-    color:  #292D33;
+    color: #292D33;
     font-family: Lexend;
     font-size: 30px;
     font-style: normal;
@@ -119,4 +131,4 @@ div.dataTables_wrapper div.dataTables_length label {
     line-height: 34px;
     margin-top: 5px;
     margin-bottom: 15px;
-}
+}