Is/feature/dialog

apps/demo-app/src/app/app.routes.ts

@@ -66,4 +66,12 @@ export const appRoutes: Route[] = [
       },
     ],
   },
+  {
+    path: 'dialog-sample',
+    loadComponent: () =>
+      import('./pages/dialog-sample/dialog-sample.component').then(
+        (m) => m.DialogSampleComponent
+      ),
+  },
+  // TODO: Add routes for the other samples
 ];

apps/demo-app/src/app/pages/dialog-sample/dialog-sample.component.css

@@ -0,0 +1,84 @@
+button {
+  cursor: pointer;
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.normal-close-button {
+  border: none;
+  padding: 10px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+}
+
+.custom-close-button-style {
+  border-radius: 100px;
+  background-color: aquamarine;
+  border: none;
+  padding: 10px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* default styles to see results better */
+div:nth-child(n + 3) sk-dialog {
+  --sk-dialog-margin: 50px;
+  --sk-dialog-background: lightblue;
+}
+
+/* fully styled Dialog */
+div:nth-child(2) sk-dialog {
+  --sk-dialog-width: 70%;
+  --sk-dialog-height: 50%;
+  --sk-dialog-margin: 50px;
+  --sk-dialog-container-margin: 40px;
+  --sk-dialog-container-padding: 40px;
+  --sk-dialog-outer-close-button-space: 10px;
+  --sk-dialog-inner-close-button-space: 15px;
+  --sk-dialog-border-radius: 20px;
+  --sk-dialog-border: 5px solid cornflowerblue;
+  --sk-dialog-background: lightblue;
+  --sk-dialog-content-shadow: rgb(0 0 0 / 20%) 0 10px 20px;
+  --sk-dialog-overflow: scroll;
+  --sk-dialog-backdrop: rgb(92 107 192 / 50%);
+  --sk-dialog-backdrop-blur: 2px;
+}
+
+/* Dialog with custom shadow */
+div:nth-child(8) sk-dialog {
+  --sk-dialog-content-shadow: rgb(255 255 255 / 40%) 0 10px 20px;
+  --sk-dialog-container-margin: 30px;
+}
+
+/* Dialog with overflow */
+div:nth-child(10) sk-dialog {
+  --sk-dialog-height: 50%;
+}
+
+/* Dialog with fancy colors */
+div:nth-child(11) sk-dialog {
+  --sk-dialog-background: radial-gradient(
+    circle,
+    rgb(238 174 202 / 100%) 0%,
+    rgb(148 187 233 / 100%) 100%
+  );
+  --sk-dialog-backdrop: linear-gradient(
+      217deg,
+      rgb(255 0 0 / 80%),
+      rgb(255 0 0 / 0%) 70%
+    ),
+    linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70%),
+    linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70%);
+  --sk-dialog-backdrop-blur: 3px;
+}