浏览代码

fix: css 'box-sizing' property was causing positioning issues for the close icon

Signed-off-by: Jonathan <theflametrooper@gmail.com>
Jonathan 4 年之前
父节点
当前提交
9b7e7824eb
共有 2 个文件被更改,包括 12 次插入112 次删除
  1. 0 105
      dist/toasters.js
  2. 12 7
      src/index.css

文件差异内容过多而无法显示
+ 0 - 105
dist/toasters.js


+ 12 - 7
src/index.css

@@ -2,9 +2,10 @@
 	--max-width: 250px;
 }
 
-body {
+body, * {
 	padding: 0;
 	margin: 0;
+	box-sizing: border-box;
 }
 
 #toasts-container {
@@ -70,15 +71,18 @@ body {
 	font-family: sans-serif;
 }
 
+.toast * {
+	box-sizing: border-box;
+}
+
 .toast:not(:first-of-type) {
 	margin-top: 5px;
 }
 
-
 .close-icon {
-	min-width: 8px;
-	height: 8px;
-	padding: 8px;
+	min-width: 10px;
+	height: 10px;
+	padding: 10px;
 	position: relative;
 	margin-left: 5px;
 	opacity: 0.6;
@@ -92,9 +96,10 @@ body {
 
 .close-icon:before, .close-icon:after {
 	position: absolute;
-	left: 11px;
+	left: 9.25px;
+    top: 5px;
 	content: ' ';
-	height: 8px;
+	height: 10px;
 	width: 2px;
 	background-color: rgb(245, 245, 245);
 }

部分文件因为文件数量过多而无法显示