Change px into rem

Orange-OpenSource · May 23, 2022 · a70a62f · a70a62f
1 parent c57693a
commit a70a62f
Showing 1 changed file with 16 additions and 16 deletions.
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -4,10 +4,10 @@
 
 .bd-example-snippet {
   border: solid $gray-400; // Boosted mod: change border color
-  border-width: 1px 0;
+  border-width: map-get($border-widths, 1) 0;
 
   @include media-breakpoint-up(md) {
-    border-width: 1px;
+    border-width: map-get($border-widths, 1);
   }
 }
 
@@ -18,22 +18,22 @@
   padding: var(--bd-example-padding);
   margin: 0 ($bd-gutter-x * -.5);
   border: solid $gray-400; // Boosted mod: change border color
-  border-width: 1px 0;
+  border-width: map-get($border-widths, 1) 0;
   @include clearfix();
 
   @include media-breakpoint-up(md) {
     --bd-example-padding: 1.5rem;
 
     margin-right: 0;
     margin-left: 0;
-    border-width: 1px;
+    border-width: map-get($border-widths, 1);
     @include border-top-radius(var(--bs-border-radius));
   }
 
   + .bd-code-snippet {
     @include border-top-radius(0);
     border: solid $gray-400; // Boosted mod: change border color
-    border-width: 0 1px 1px;
+    border-width: 0 map-get($border-widths, 1) map-get($border-widths, 1);
   }
 
   + p {
@@ -83,7 +83,7 @@
 
   // List groups
   > .list-group {
-    max-width: 400px;
+    max-width: 25rem;
   }
 
   > [class*="list-group-horizontal"] {
@@ -119,7 +119,7 @@
   padding-top: .75rem;
   padding-bottom: .75rem;
   background-color: rgba(var(--bd-violet-rgb), .1);
-  border: 1px solid rgba(var(--bd-violet-rgb), .25);
+  border: map-get($border-widths, 1) solid rgba(var(--bd-violet-rgb), .25);
 }
 
 .bd-example-row .row + .row,
@@ -134,12 +134,12 @@
 
 .bd-example-flex div {
   background-color: rgba($bd-purple, .15);
-  border: 1px solid rgba($bd-purple, .15);
+  border: map-get($border-widths, 1) solid rgba($bd-purple, .15);
 }
 
 // Grid mixins
 .example-container {
-  width: 800px;
+  width: 50rem;
   @include make-container();
 }
 
@@ -202,7 +202,7 @@
   .offcanvas {
     position: static;
     display: block;
-    height: 200px;
+    height: 12.5rem;
     visibility: visible;
     transform: translate(0);
   }
@@ -221,7 +221,7 @@
 
 // scss-docs-start custom-popovers
 .custom-popover {
-  --bs-popover-max-width: 200px;
+  --bs-popover-max-width: 12.5rem;
   --bs-popover-border-color: var(--bs-primary);
   --bs-popover-header-bg: var(--bs-primary);
   --bs-popover-header-color: var(--bs-white);
@@ -232,13 +232,13 @@
 
 // Scrollspy demo on fixed height div
 .scrollspy-example {
-  height: 200px;
+  height: 12.5rem;
   margin-top: .5rem;
   overflow: auto;
 }
 
 .scrollspy-example-2 {
-  height: 350px;
+  height: 21.875rem;
   overflow: auto;
 }
 
@@ -275,7 +275,7 @@
   padding: 2rem;
 
   .position-relative {
-    height: 200px;
+    height: 12.5rem;
     background-color: #f5f5f5;
   }
 
@@ -306,7 +306,7 @@
 
 // Toasts
 .bd-example-toasts {
-  min-height: 240px;
+  min-height: 15rem;
 }
 
 //
@@ -367,5 +367,5 @@
 .highlight-toolbar {
   background-color: $gray-100; // Boosted mod: change background color instead of using .bg-light
   border: solid $gray-400; // Boosted mod: change border color
-  border-width: 1px 0;
+  border-width: map-get($border-widths, 1) 0;
 }