fix: top padding on slide split

Author: peterpeterparker

docs/docs/slides/app-slide-split/app-slide-split.md

@@ -82,10 +82,10 @@ The following theming options will affect this component if set on its host or p
 | --slide-split-color-start | | Left split pane color |
 | --slide-split-background-end | | Right split pane background |
 | --slide-split-color-end | | Right split pane color |
-| --slide-split-padding-top | 16px | Padding top of a slide split pane |
-| --slide-split-padding-end | 32px | Padding right of a slide split pane |
-| --slide-split-padding-bottom | 16px | Padding bottom of a slide split pane |
-| --slide-split-padding-start | 32px | Padding left of a slide split pane |
+| --slide-split-padding-top | 0 | Padding top of a slide split pane |
+| --slide-split-padding-end | 64px | Padding right of a slide split pane |
+| --slide-split-padding-bottom | 0 | Padding bottom of a slide split pane |
+| --slide-split-padding-start | 64px | Padding left of a slide split pane |
 | --slide-split-title-padding-top | 16px | Padding top of the title of the |
 | --slide-split-title-padding-end | 32px | Padding right of the title of the |
 | --slide-split-title-padding-bottom | 16px | Padding bottom of the title of the |

docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx

@@ -146,22 +146,22 @@ export class AppSlideContent {
 </tr>
 <tr>
 <td>--slide-split-padding-top</td>
-<td>16px</td>
+<td>0</td>
 <td>Padding top of a slide split pane</td>
 </tr>
 <tr>
 <td>--slide-split-padding-end</td>
-<td>32px</td>
+<td>64px</td>
 <td>Padding right of a slide split pane</td>
 </tr>
 <tr>
 <td>--slide-split-padding-bottom</td>
-<td>16px</td>
+<td>0</td>
 <td>Padding bottom of a slide split pane</td>
 </tr>
 <tr>
 <td>--slide-split-padding-start</td>
-<td>32px</td>
+<td>64px</td>
 <td>Padding left of a slide split pane</td>
 </tr>
 <tr>

studio/package-lock.json

@@ -14,7 +14,7 @@
     "test.watch": "stencil test --spec --e2e --watch"
   },
   "dependencies": {
-    "@deckdeckgo/core": "^1.0.0-beta.34",
+    "@deckdeckgo/core": "file:../webcomponents/core",
     "@deckdeckgo/highlight-code": "^1.0.0-alpha.15",
     "@deckdeckgo/inline-editor": "^1.0.0-alpha.7",
     "@deckdeckgo/lazy-img": "^1.0.0-alpha.3",

studio/package.json

@@ -7,13 +7,13 @@
 
 import '@stencil/core';
 
+import '@deckdeckgo/core';
+import '@deckdeckgo/highlight-code';
+import '@deckdeckgo/inline-editor';
+import '@deckdeckgo/lazy-img';
+import '@deckdeckgo/qrcode';
+import '@deckdeckgo/remote';
 import '@ionic/core';
-import 'deckdeckgo';
-import 'deckdeckgo-highlight-code';
-import 'deckdeckgo-inline-editor';
-import 'deckdeckgo-lazy-img';
-import 'deckdeckgo-qrcode';
-import 'deckdeckgo-remote';
 import 'ionicons';
 import {
   EventEmitter,

studio/src/components.d.ts

@@ -41,6 +41,14 @@ deckgo-deck {
   }
 
   deckgo-slide-split {
+    --slide-split-padding-top: 64px;
+    --slide-split-padding-bottom: 64px;
+
+    @media screen and (max-width: 1024px) {
+      --slide-split-padding-top: 32px;
+      --slide-split-padding-bottom: 32px;
+    }
+
     section, deckgo-highlight-code {
       height: fit-content;
     }

studio/src/global/theme/editor/editor-deck.scss

@@ -19,7 +19,7 @@ div.deckgo-slide-split {
   align-items: var(--slide-split-align, inherit);
   text-align: var(--slide-split-text-align, inherit);
 
-  padding: var(--slide-split-padding-top, var(--slide-padding-top-default)) var(--slide-split-padding-end, var(--slide-padding-end-default)) var(--slide-split-padding-bottom, var(--slide-padding-bottom-default)) var(--slide-split-padding-start, var(--slide-padding-start-default));
+  padding: var(--slide-split-padding-top, 0) var(--slide-split-padding-end, var(--slide-padding-end-default)) var(--slide-split-padding-bottom, 0) var(--slide-split-padding-start, var(--slide-padding-start-default));
 
   &.deckgo-slide-split-start {
     background: var(--slide-split-background-start);