Remove custom properties from examples so that they work in IE (#27634)

2 files changed, 9 insertions, 18 deletions

diff --git a/site/docs/4.1/examples/album/album.css b/site/docs/4.1/examples/album/album.css
index f9d1518d3..bfc270d52 100644
--- a/site/docs/4.1/examples/album/album.css
+++ b/site/docs/4.1/examples/album/album.css
@@ -1,17 +1,13 @@
-:root {
-  --jumbotron-padding-y: 3rem;
-}
-
 .jumbotron {
-  padding-top: var(--jumbotron-padding-y);
-  padding-bottom: var(--jumbotron-padding-y);
+  padding-top: 3rem;
+  padding-bottom: 3rem;
   margin-bottom: 0;
   background-color: #fff;
 }
 @media (min-width: 768px) {
   .jumbotron {
-    padding-top: calc(var(--jumbotron-padding-y) * 2);
-    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
+    padding-top: 6rem;
+    padding-bottom: 6rem;
   }
 }
 
diff --git a/site/docs/4.1/examples/floating-labels/floating-labels.css b/site/docs/4.1/examples/floating-labels/floating-labels.css
index b929a45c0..c322d9b56 100644
--- a/site/docs/4.1/examples/floating-labels/floating-labels.css
+++ b/site/docs/4.1/examples/floating-labels/floating-labels.css
@@ -1,8 +1,3 @@
-:root {
-  --input-padding-x: .75rem;
-  --input-padding-y: .75rem;
-}
-
 html,
 body {
   height: 100%;
@@ -33,7 +28,7 @@ body {
 .form-label-group > input,
 .form-label-group > label {
   height: 3.125rem;
-  padding: var(--input-padding-y) var(--input-padding-x);
+  padding: .75rem;
 }
 
 .form-label-group > label {
@@ -72,13 +67,13 @@ body {
 }
 
 .form-label-group input:not(:placeholder-shown) {
-  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
-  padding-bottom: calc(var(--input-padding-y) / 3);
+  padding-top: 1.25rem;
+  padding-bottom: .25rem;
 }
 
 .form-label-group input:not(:placeholder-shown) ~ label {
-  padding-top: calc(var(--input-padding-y) / 3);
-  padding-bottom: calc(var(--input-padding-y) / 3);
+  padding-top: .25rem;
+  padding-bottom: .25rem;
   font-size: 12px;
   color: #777;
 }