init

.svn/pristine/43/43acc64575a56baf5d308cc8c6ccfc40f1765095.svn-base

@@ -0,0 +1,82 @@
+.layui-badge,
+.layui-badge-dot,
+.layui-badge-rim {
+  position: relative;
+  display: inline-block;
+  padding: 0 6px;
+  font-size: 12px;
+  text-align: center;
+  background-color: #ff5722;
+  color: #fff;
+  border-radius: var(--global-border-radius);
+}
+
+.layui-badge {
+  height: 18px;
+  line-height: 18px;
+}
+
+.layui-badge-dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 50%;
+}
+
+.layui-badge-rim {
+  height: 18px;
+  line-height: 18px;
+  border-width: 1px;
+  border-style: solid;
+  background-color: #fff;
+  border-color: var(--global-neutral-color-3);
+  color: #666;
+}
+
+.layui-badge-dot-ripple > span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: layui-badge-dot-anim-ripple 1.2s ease-in-out infinite;
+}
+
+@keyframes layui-badge-dot-anim-ripple {
+  from {
+    transform: scale(0.8);
+    opacity: 0.6;
+  }
+
+  to {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+/** Badge 在与其他组件配合使用时的辅助样式 */
+
+.layui-btn .layui-badge,
+.layui-btn .layui-badge-dot {
+  margin-left: 5px;
+}
+
+.layui-nav .layui-badge,
+.layui-nav .layui-badge-dot {
+  position: absolute;
+  top: 50%;
+  margin: -5px 6px 0;
+}
+
+.layui-nav .layui-badge {
+  margin-top: -10px;
+}
+
+.layui-tab-title .layui-badge,
+.layui-tab-title .layui-badge-dot {
+  left: 5px;
+  top: -2px;
+}