docs: playground style

qwikifiers · Oct 18, 2023 · 64450fe · 64450fe
1 parent 4d87e64
commit 64450fe
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 9 deletions.
diff --git a/apps/docs/assets/main.scss b/apps/docs/assets/main.scss
@@ -0,0 +1,7 @@
+.playground {
+  height: 400px;
+
+  iframe {
+    height: 100% !important;
+  }
+}
diff --git a/apps/docs/content/_components/accordionitem.md b/apps/docs/content/_components/accordionitem.md
@@ -47,7 +47,7 @@ For example, `<summary>` elements are focusable and can be activated by pressing
 
 ## Playground
 
-<Generate />
+<Generate class="playground" />
 
 #tab-2
 

diff --git a/apps/docs/content/_components/badge.md b/apps/docs/content/_components/badge.md
@@ -52,7 +52,7 @@ The component itself does not provide any specific accessibility features. Pleas
 
 ## Playground
 
-<Generate style="height: 380px" />
+<Generate class="playground" />
 
 #tab-2
 

diff --git a/apps/docs/content/_components/button.md b/apps/docs/content/_components/button.md
@@ -76,7 +76,7 @@ If you need to use Button with non-`<button>` tags like `<div>` you need to add
 
 ## Playground
 
-<Generate />
+<Generate class="playground" />
 
 #tab-2
 

diff --git a/apps/docs/content/_components/checkbox.md b/apps/docs/content/_components/checkbox.md
@@ -44,7 +44,7 @@ It's focusable and can be toggled with `Space`. -->
 
 ## Playground
 
-<Generate style="height: 450px" />
+<Generate class="playground" />
 
 #tab-2
 

diff --git a/apps/docs/content/_components/chip.md b/apps/docs/content/_components/chip.md
@@ -70,7 +70,7 @@ When using `SfChip` without any text label/description inside, you should specif
 
 ## Playground
 
-<Generate style="height: 380px" />
+<Generate class="playground" />
 
 #tab-2
 

diff --git a/apps/docs/content/_components/counter.md b/apps/docs/content/_components/counter.md
@@ -46,7 +46,7 @@ The root element of `SfCounter` is a `<span>`. Since a `<span>` is an inline ele
 
 ## Playground
 
-<Generate />
+<Generate class="playground" />
 
 #tab-2
 

diff --git a/apps/docs/content/_components/drawer.md b/apps/docs/content/_components/drawer.md
@@ -40,7 +40,7 @@ The component is providing keyboard accessibility with `@keydown.esc="onEscKeyDo
 
 ## Playground
 
-<Generate style="height: 600px"/>
+<Generate class="playground" style="height: 600px;"/>
 
 #tab-2
 

diff --git a/apps/docs/content/_components/dropdown.md b/apps/docs/content/_components/dropdown.md
@@ -28,7 +28,7 @@ The floating content area has an `aria-hidden` attribute that reflects the visib
 
 ## Playground
 
-<Generate />
+<Generate class="playground" />
 
 #tab-2
 

diff --git a/apps/docs/content/_components/iconbase.md b/apps/docs/content/_components/iconbase.md
@@ -62,7 +62,7 @@ When using an Icon without any additional label and/or description, you should s
 
 ## Playground
 
-<Generate style="height: 380px" />
+<Generate class="playground" />
 
 #tab-2
 

diff --git a/apps/docs/nuxt.config.ts b/apps/docs/nuxt.config.ts
@@ -27,4 +27,5 @@ export default defineNuxtConfig({
       failOnError: false,
     },
   },
+  css: ['@/assets/main.scss'],
 });