Fix no-code example, fix mobile styles

twbs · Apr 21, 2023 · 239ddd9 · 239ddd9
1 parent 083a67a
commit 239ddd9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -3,6 +3,8 @@
 //
 
 .bd-code-snippet {
+  margin-right: ($bd-gutter-x * -.5);
+  margin-left: ($bd-gutter-x * -.5);
   border: solid var(--bs-border-color);
   border-width: 1px 0;
 
@@ -17,7 +19,9 @@
 
   position: relative;
   padding: var(--bd-example-padding);
-  margin: 0 ($bd-gutter-x * -.5);
+  margin: 0 ($bd-gutter-x * -.5) 1rem;
+  border: solid var(--bs-border-color);
+  border-width: 1px 0;
   @include clearfix();
 
   @include media-breakpoint-up(md) {
@@ -26,6 +30,7 @@
     margin-right: 0;
     margin-left: 0;
     border-width: 1px;
+    @include border-radius(var(--bs-border-radius));
   }
 
   + p {

diff --git a/site/content/docs/5.3/docsref.md b/site/content/docs/5.3/docsref.md
@@ -34,6 +34,10 @@ toc: true
 }
 ```
 
+<div class="bd-example">
+  The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
+</div>
+
 {{< example >}}
 <div class="test">This is a test.</div>
 {{< /example >}}

diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
@@ -21,7 +21,7 @@
 
 <div class="bd-example-snippet bd-code-snippet">
   {{- if eq $show_preview true -}}
-  <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example{{ with $class }} {{ . }}{{ end }}">
+  <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
     {{- $input -}}
   </div>
   {{- end -}}