Embedded examples cleanup (#30330)

* Thin out embedded examples borders, rounded their corners
* Fix busted class
* Adjust nesting of .bd-example styles, tweak padding while I'm at it
* combine selectors
* cleanup some margins that always cancel each other out
* Remove redundant universal selector

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 0122a43868251dfecc1ffa811d6e111d35a292ed..5a8679ec576cd9349742d94958ba3fc2b0b3611d 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -82,20 +82,20 @@
   position: relative;
   padding: 1rem;
   margin: 1rem (-$grid-gutter-width / 2) 0;
-  border: solid $gray-100;
-  border-width: .2rem 0 0;
+  border: solid $gray-300;
+  border-width: 1px 0 0;
   @include clearfix();
 
   @include media-breakpoint-up(sm) {
     padding: 1.5rem;
     margin-right: 0;
     margin-left: 0;
-    border-width: .2rem;
-  }
+    border-width: 1px;
+    @include border-top-radius(.25rem);
 
-  + .highlight,
-  + .clipboard + .highlight {
-    margin-top: 0;
+    + .bd-clipboard + .highlight {
+      @include border-bottom-radius(.25rem);
+    }
   }
 
   + p {
@@ -119,18 +119,18 @@
     position: static;
     display: block;
   }
-}
 
-// Images
-.bd-example {
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  // Images
   > svg + svg,
   > img + img {
     margin-left: .5rem;
   }
-}
 
-// Buttons
-.bd-example {
+  // Buttons
   > .btn,
   > .btn-group {
     margin-top: .25rem;
@@ -139,19 +139,17 @@
   > .btn-toolbar + .btn-toolbar {
     margin-top: .5rem;
   }
-}
 
-// List groups
-.bd-example > .list-group {
-  max-width: 400px;
-}
+  // List groups
+  > .list-group {
+    max-width: 400px;
+  }
 
-.bd-example > [class*="list-group-horizontal"] {
-  max-width: 100%;
-}
+  > [class*="list-group-horizontal"] {
+    max-width: 100%;
+  }
 
-// Navbars
-.bd-example {
+  // Navbars
   .fixed-top,
   .sticky-top {
     position: static;
@@ -172,12 +170,12 @@
       margin: 1rem -1.5rem -1.5rem;
     }
   }
-}
 
-// Pagination
-.bd-example .pagination {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
+  // Pagination
+  .pagination {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+  }
 }
 
 .bd-example-modal {
@@ -236,27 +234,14 @@
 
 .highlight {
   padding: 1rem;
-  margin-top: 1rem;
   margin-bottom: 1rem;
   background-color: $gray-100;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
   @include media-breakpoint-up(sm) {
-    padding: 1.5rem;
+    padding: 1rem 1.5rem;
   }
-}
 
-.bd-content .highlight {
-  margin-right: (-$grid-gutter-width / 2);
-  margin-left: (-$grid-gutter-width / 2);
-
-  @include media-breakpoint-up(sm) {
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
-
-.highlight {
   pre {
     padding: 0;
     margin-top: 0;
@@ -270,3 +255,13 @@
     color: $gray-900; // Effectively the base text color
   }
 }
+
+.bd-content .highlight {
+  margin-right: (-$grid-gutter-width / 2);
+  margin-left: (-$grid-gutter-width / 2);
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}