fix(sheet): improve spacing

baloise · Dec 7, 2021 · 285857f · 285857f
1 parent d9e28ae
commit 285857f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 19 deletions.
diff --git a/packages/components/src/components/bal-sheet/bal-sheet.scss b/packages/components/src/components/bal-sheet/bal-sheet.scss
@@ -16,5 +16,23 @@ bal-sheet {
   > div.container {
     background-color: $info-0;
     box-shadow: $shadow;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+
+  @include desktop() {
+    > div.container {
+      background-color: transparent;
+      box-shadow: none;
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+
+      > div.inner {
+        background-color: $info-0;
+        box-shadow: $shadow;
+        padding-left: 32px;
+        padding-right: 32px;
+      }
+    }
   }
 }
diff --git a/packages/components/src/components/bal-sheet/stories/docs.stories.ts b/packages/components/src/components/bal-sheet/stories/docs.stories.ts
@@ -12,33 +12,47 @@ export default {
     docs: {
       page: docs,
     },
+    layout: 'fullscreen',
   },
 }
 
 export const Basic = args => ({
   components: { BalSheet, BalButton },
   setup: () => ({ args }),
-  template: `<bal-sheet v-bind="args">
-  <div class="is-hidden-desktop">
-    <bal-button expanded>Continue with 1'234 CHF</bal-button>
-    <bal-button expanded color="link">Back</bal-button>
+  template: `<div>
+  <div class="container">
+    <bal-card>
+      <bal-card-title>BaloiseCombi</bal-card-title>
+      <bal-card-subtitle>Police number 70/2.937.458</bal-card-subtitle>
+      <bal-card-content> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </bal-card-content>
+      <bal-card-actions>
+        <bal-button>Main Action</bal-button>
+        <bal-button color="info" outlined>Secondary Action</bal-button>
+      </bal-card-actions>
+    </bal-card>
   </div>
-  <div class="is-hidden-touch">
-    <div class="columns">
-      <div class="column is-flex is-align-items-center is-justify-content-center">
-        <h2 class="title is-size-2 m-0 has-text-right">1'234 CHF</h2>
-      </div>
-      <div class="column is-flex is-align-items-center">
-        <p class="m-0 has-text-blue-light-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
-      </div>
-      <div class="column is-2 is-flex is-align-items-center">
-        <bal-button expanded color="link">Back</bal-button>
-      </div>
-      <div class="column is-2 is-flex is-align-items-center">
-        <bal-button expanded>Next</bal-button>
+  <bal-sheet v-bind="args">
+    <div class="is-hidden-desktop">
+      <bal-button expanded>Continue with 1'234 CHF</bal-button>
+      <bal-button expanded color="link" class="mt-2">Back</bal-button>
+    </div>
+    <div class="is-hidden-touch">
+      <div class="columns">
+        <div class="column is-3 is-flex is-align-items-center">
+          <h2 class="title is-size-2 m-0">1'234 CHF</h2>
+        </div>
+        <div class="column is-flex is-align-items-center">
+          <p class="m-0 has-text-blue-light-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
+        </div>
+        <div class="column is-2 is-flex is-align-items-center">
+          <bal-button expanded color="link">Back</bal-button>
+        </div>
+        <div class="column is-2 is-flex is-align-items-center">
+          <bal-button expanded>Next</bal-button>
+        </div>
       </div>
     </div>
-  </div>
-</bal-sheet>`,
+  </bal-sheet>
+</div>`,
 })
 Basic.args = {}