Przeglądaj źródła

design improvements for toasts (more to come)

Signed-off-by: Jonathan <theflametrooper@gmail.com>
Jonathan 4 lat temu
rodzic
commit
dfab003e02
4 zmienionych plików z 34 dodań i 14 usunięć
  1. 1 1
      dist/toasters.js
  2. 2 2
      example/index.html
  3. 18 6
      example/index.js
  4. 13 5
      src/index.css

Plik diff jest za duży
+ 1 - 1
dist/toasters.js


+ 2 - 2
example/index.html

@@ -4,8 +4,8 @@
         <meta charset="utf-8">
         <title>Example</title>
 </head>
-<body>
-        <div id="toasts-container" class="position-right position-top">
+<body class="night-mode">
+        <div id="toasts-container" class="position-right position-bottom">
                 <div id="toasts-content"></div>
         </div>
         <script src="../dist/example.js"></script>

+ 18 - 6
example/index.js

@@ -6,10 +6,22 @@ const TestNotification = new Toast({
 	interactable: false
 });
 
-setTimeout(() => {
-	TestNotification.hide();
+const TestNotification2 = new Toast({
+	content: "Hello World",
+	persistent: true,
+	interactable: true
+});
+
+const TestNotification3 = new Toast({
+	content: "Hello World",
+	persistent: true,
+	interactable: true
+});
+
+// setTimeout(() => {
+// 	TestNotification.hide();
 
-	setTimeout(() => {
-		TestNotification.show();
-	}, 2000);
-}, 2000);
+// 	setTimeout(() => {
+// 		TestNotification.show();
+// 	}, 2000);
+// }, 2000);

+ 13 - 5
src/index.css

@@ -42,21 +42,29 @@ body {
 	justify-content: flex-end;
 }
 
+.night-mode .toast {
+	background-color: rgb(51, 51, 51) !important;
+	color: #fff !important;
+	border: 0 !important;
+}
+
 .toast {
 	user-select: none;
 	z-index: 10000 !important;
-	border-radius: 2px;
 	cursor: pointer;
-	position: relative;
 	top: 0;
 	height: auto;
-	background-color: #323232;
-	color: #fff;
 	padding: 10px 25px;
 	font-size: 1rem;
 	font-weight: 300;
 	width: var(--max-width);
-	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+	position: relative;
+    border: 1px solid rgb(195, 193, 195);
+    box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
+    background-color: #fff;
+	border-radius: .25rem;
+    line-height: 1.4;
+	font-family: sans-serif;
 }
 
 .toast:not(:first-of-type) {

Niektóre pliki nie zostały wyświetlone z powodu dużej ilości zmienionych plików