Merge branch 'demo-add-colour-snackbars' of https://github.com/JWorthington97/svelte-material-ui into JWorthington97-demo-add-colour-snackbars

Author: hperrin

packages/site/src/routes/demo/snackbar/_Colours.scss

@@ -0,0 +1,13 @@
+// Add the below to your _smui-theme.scss file
+
+.success .mdc-snackbar__surface {
+  background-color: green;
+}
+
+.warning .mdc-snackbar__surface {
+  background-color: orange;
+}
+
+.error .mdc-snackbar__surface {
+  background-color: red;
+}

packages/site/src/routes/demo/snackbar/_Colours.svelte

@@ -0,0 +1,48 @@
+<Snackbar bind:this={snackbarSuccess} class="success">
+  <Label>{snackbarText}</Label>
+  <Actions>
+    <IconButton class="material-icons" title="Dismiss">close</IconButton>
+  </Actions>
+</Snackbar>
+
+<Snackbar bind:this={snackbarWarning} class="warning">
+  <Label>{snackbarText}</Label>
+  <Actions>
+    <IconButton class="material-icons" title="Dismiss">close</IconButton>
+  </Actions>
+</Snackbar>
+
+<Snackbar bind:this={snackbarError} class="error">
+  <Label>{snackbarText}</Label>
+  <Actions>
+    <IconButton class="material-icons" title="Dismiss">close</IconButton>
+  </Actions>
+</Snackbar>
+
+<Button on:click={() => snackbarSuccess && snackbarSuccess.open()}>
+  <Label style="color:green">Open Snackbar Success</Label>
+</Button>
+
+<Button on:click={() => snackbarWarning && snackbarWarning.open()}>
+  <Label style="color:orange">Open Snackbar Warning</Label>
+</Button>
+
+<Button on:click={() => snackbarError && snackbarError.open()}>
+  <Label style="color:red">Open Snackbar Error</Label>
+</Button>
+
+<script lang="ts">
+  import Snackbar, {
+    Label,
+    Actions,
+    SnackbarComponentDev,
+  } from '@smui/snackbar';
+  import IconButton from '@smui/icon-button';
+  import Button from '@smui/button';
+
+  let snackbarSuccess: SnackbarComponentDev;
+  let snackbarWarning: SnackbarComponentDev;
+  let snackbarError: SnackbarComponentDev;
+
+  let snackbarText = 'Snackbar Text';
+</script>