theme css

2sic · May 14, 2024 · fe784e7 · fe784e7
1 parent 16fe37e
commit fe784e7
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/bs5/Swiper.PartAssets.cshtml b/bs5/Swiper.PartAssets.cshtml
@@ -20,6 +20,9 @@
   };
 }
 
+@if (Kit.Css.Is("bs5")) {
+<link rel="stylesheet" href="@MyView.Folder.Url/theme/theme.css" @Kit.Page.AssetAttributes()/>
+}
 <link rel="stylesheet" href="@MyView.Folder.Url/dist/styles.min.css" @Kit.Page.AssetAttributes()/>
 <script src="@MyView.Folder.Url/dist/scripts.min.js" @Kit.Page.AssetAttributes()></script>
 

diff --git a/bs5/dist/styles.min.css b/bs5/dist/styles.min.css
diff --git a/bs5/dist/styles.min.css.map b/bs5/dist/styles.min.css.map
diff --git a/bs5/styles/_style.scss b/bs5/styles/_style.scss
@@ -88,26 +88,26 @@
 
       p {
         color: #fff;
-        font-size: $font-size-base*1.25;
+        font-size: calc(var(--bs-body-font-size, var(--bs-body-font-size-fallback-app-swiper)) * 1.25);
         text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.8);
-        margin: 0 0 $font-size-base * 0.6875;
+        margin: 0 0 calc(var(--bs-body-font-size, var(--bs-body-font-size-fallback-app-swiper))  * 0.6875);
 
         &.lead { 
           margin-bottom: $grid-gutter-width/2;
-          font-size: $font-size-base*1.8;	
+          font-size: calc(var(--bs-body-font-size, var(--bs-body-font-size-fallback-app-swiper)) * 1.8);
           font-weight: 600;
 
           @include media-breakpoint-up(md)  {
             line-height: 1.2em;
-            font-size: $font-size-base*3;	
+            font-size: calc(var(--bs-body-font-size, var(--bs-body-font-size-fallback-app-swiper)) * 3);
           }		
           @include media-breakpoint-up(lg)  {
             line-height: 1.2em;
-            font-size: $font-size-base*4;	
+            font-size: calc(var(--bs-body-font-size, var(--bs-body-font-size-fallback-app-swiper)) * 4);
           }				
           @include media-breakpoint-up(xl)  {
             line-height: 1.2em;
-            font-size: $font-size-base*5;	
+            font-size: calc(var(--bs-body-font-size, var(--bs-body-font-size-fallback-app-swiper)) *5);
           }				
         }
       }	

diff --git a/bs5/theme/theme.css b/bs5/theme/theme.css
@@ -0,0 +1,9 @@
+/*
+Bootstrap 5 uses CSS variables. You can use app-related variables in this file. The standard Bootstrap values are used as a fallback 
+Check our Docs for more information: https://go.2sxc.org/app-theme
+*/
+
+:root {
+  --bs-body-font-size-fallback-app-swiper: 1rem;
+}
+