fix(MdSnackbar): adjust margins and padding to be compliant with the …

…specs
vuematerial · Nov 2, 2017 · 5297291 · 5297291
1 parent 6c78232
commit 5297291
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/docs/app/pages/Components/Snackbar/Snackbar.vue b/docs/app/pages/Components/Snackbar/Snackbar.vue
@@ -1,15 +1,16 @@
-<example src="./examples/Duration.vue" />
+<example src="./examples/SnackbarExample.vue" />
 
 <template>
   <page-container centered :title="$t('pages.snackbar.title')">
     <div class="page-container-section">
-      <p>Lorem ipsum</p>
+      <p>Snackbars provide brief feedback about an operation through a message at the bottom of the screen.</p>
+      <p>They can have a custom duration on the screen or be persistent. I can be centered aligned or left aligned.</p>
     </div>
 
     <div class="page-container-section">
       <h2>Duration and position</h2>
 
-      <code-example title="Dynamic values" :component="examples['duration']" />
+      <code-example title="Dynamic values" :component="examples['snackbar-example']" />
 
       <api-item title="API - md-snackbar">
         <p>This component does not have any extra option.</p>
@@ -19,10 +20,10 @@
 </template>
 
 <script>
-import examples from 'docs-mixins/docsExample'
+  import examples from 'docs-mixins/docsExample'
 
-export default {
-  name: 'Snackbar',
-  mixins: [examples]
-}
+  export default {
+    name: 'Snackbar',
+    mixins: [examples]
+  }
 </script>
diff --git a/...Components/Snackbar/examples/Duration.vue → ...nts/Snackbar/examples/SnackbarExample.vue b/...Components/Snackbar/examples/Duration.vue → ...nts/Snackbar/examples/SnackbarExample.vue
@@ -28,7 +28,7 @@
 
 <script>
 export default {
-  name: 'Duration',
+  name: 'SnackbarExample',
   data: () => ({
     showSnackbar: false,
     position: 'center',

diff --git a/src/components/MdSnackbar/MdSnackbar.vue b/src/components/MdSnackbar/MdSnackbar.vue
@@ -56,6 +56,7 @@
 
 <style lang="scss">
   @import "~components/MdAnimation/variables";
+  @import "~components/MdLayout/mixins";
   @import "~components/MdElevation/mixins";
 
   .md-snackbar {
@@ -64,7 +65,7 @@
     max-width: 568px;
     min-height: 48px;
     max-height: 80px;
-    padding: 0 24px;
+    padding: 14px 24px;
     display: flex;
     align-items: center;
     position: fixed;
@@ -74,13 +75,14 @@
     will-change: background-color, color, opacity, transform;
 
     &.md-position-center {
+      margin: 0 auto;
+      right: 0;
       bottom: 0;
-      left: 50%;
-      transform: translate3D(-50%, 0, 0);
+      left: 0;
 
       &.md-snackbar-enter,
       &.md-snackbar-leave-active {
-        transform: translate3D(-50%, calc(100% + 8px), 0);
+        transform: translate3D(0, calc(100% + 8px), 0);
       }
     }
 
@@ -93,6 +95,12 @@
         transform: translate3D(0, calc(100% + 32px), 0);
       }
     }
+
+    @include md-layout-xsmall {
+      left: 0;
+      transform: none;
+      border-radius: 0;
+    }
   }
 
   .md-snackbar-enter,
@@ -113,7 +121,11 @@
 
     .md-button {
       min-width: 0;
-      margin: 0 -12px 0 12px;
+      margin: -8px -8px -8px 36px;
+
+      @include md-layout-xsmall {
+        margin-left: 12px;
+      }
     }
   }
 </style>