style: compress index.less

package/component/src/component/formItem/index.vue

@@ -153,6 +153,7 @@ defineExpose({ validate, clearValidate });
 onMounted(() => {
   if (props.prop) {
     layForm.addField(
+      // @ts-ignore
       reactive({
         ...toRefs(props),
         $el: formItemRef,

package/component/src/component/menu/index.less

@@ -262,27 +262,6 @@
   display: block;
 }
 
-.layui-nav-tree.layui-bg-gray a,
-.layui-nav.layui-bg-gray .layui-nav-item a {
-  color: #666 !important;
-  color: rgba(0, 0, 0, 0.8) !important;
-}
-
-.layui-nav-tree.layui-bg-gray .layui-nav-itemed > .layui-nav-child {
-  background: 0 0 !important;
-}
-
-.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this,
-.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this a {
-  background: 0 0 !important;
-  color: @global-checked-color !important;
-  font-weight: 700;
-}
-
-.layui-nav.layui-bg-gray .layui-nav-bar {
-  background-color: @global-checked-color;
-}
-
 .layui-nav-side {
   position: fixed;
   top: 0;

package/component/src/component/page/index.less

@@ -145,6 +145,10 @@
   margin: 0 10px;
   padding: 0 3px;
   text-align: center;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
 }
 
 .layui-laypage input:focus,

package/component/src/component/select/index.less

@@ -99,6 +99,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
   background-color: #fff;
   border-radius: @global-border-radius;
   box-sizing: border-box;
+  box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
 }
 
 .layui-form-select dl dd,

package/component/src/theme/index.less

@@ -1,4 +1,5 @@
 @import "./variable.less";
+@import "./public.less";
 @import "./date.less";
 
 .layui-inline,
@@ -237,10 +238,6 @@ a cite {
   cursor: not-allowed !important;
 }
 
-.layui-circle {
-  border-radius: 100%;
-}
-
 .layui-show {
   display: block !important;
 }
@@ -295,19 +292,6 @@ a cite {
   position: relative;
 }
 
-.layui-form-select dl {
-  box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
-}
-
-.layui-bg-black,
-.layui-bg-blue,
-.layui-bg-cyan,
-.layui-bg-green,
-.layui-bg-orange,
-.layui-bg-red {
-  color: #fff !important;
-}
-
 .layui-border,
 .layui-border-black,
 .layui-border-blue,
@@ -319,47 +303,6 @@ a cite {
   border-style: solid;
 }
 
-.layui-auxiliar-moving {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background: 0 0;
-  z-index: 9999999999;
-}
-
-.layui-bg-red {
-  background-color: #ff5722 !important;
-}
-
-.layui-bg-orange {
-  background-color: #ffb800 !important;
-}
-
-.layui-bg-green {
-  background-color: @global-primary-color !important;
-}
-
-.layui-bg-cyan {
-  background-color: #2f4056 !important;
-}
-
-.layui-bg-blue {
-  background-color: #1e9fff !important;
-}
-
-.layui-bg-black {
-  background-color: #393d49 !important;
-}
-
-.layui-bg-gray {
-  background-color: @global-neutral-color-1 !important;
-  color: #666 !important;
-}
-
 .layui-border,
 .layui-colla-content,
 .layui-colla-item,
@@ -466,83 +409,6 @@ a cite {
   margin-top: 0;
 }
 
-.layui-font-12 {
-  font-size: 12px !important;
-}
-
-.layui-font-14 {
-  font-size: 14px !important;
-}
-
-.layui-font-16 {
-  font-size: 16px !important;
-}
-
-.layui-font-18 {
-  font-size: 18px !important;
-}
-
-.layui-font-20 {
-  font-size: 20px !important;
-}
-
-.layui-font-22 {
-  font-size: 22px !important;
-}
-
-.layui-font-24 {
-  font-size: 24px !important;
-}
-
-.layui-font-26 {
-  font-size: 26px !important;
-}
-
-.layui-font-28 {
-  font-size: 28px !important;
-}
-
-.layui-font-30 {
-  font-size: 30px !important;
-}
-
-.layui-font-red {
-  color: #ff5722 !important;
-}
-
-.layui-font-orange {
-  color: #ffb800 !important;
-}
-
-.layui-font-green {
-  color: @global-primary-color !important;
-}
-
-.layui-font-cyan {
-  color: #2f4056 !important;
-}
-
-.layui-font-blue {
-  color: #01aaed !important;
-}
-
-.layui-font-black {
-  color: #000 !important;
-}
-
-.layui-font-gray {
-  color: @global-neutral-color-8 !important;
-}
-
-.layui-input-number[type="number"] {
-  -moz-appearance: textfield;
-}
-
-.layui-input-number::-webkit-outer-spin-button,
-.layui-input-number::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-}
-
 .layui-form input[type="checkbox"],
 .layui-form input[type="radio"],
 .layui-form select {
@@ -623,82 +489,6 @@ a cite {
   border-color: #ff5722 !important;
 }
 
-.layui-input-wrap {
-  height: 38px;
-  line-height: 38px;
-}
-
-.layui-input-wrap .layui-input {
-  padding-right: 35px;
-  cursor: pointer;
-}
-
-.layui-input-wrap .layui-input::-ms-clear,
-.layui-input-wrap .layui-input::-ms-reveal {
-  display: none;
-}
-
-.layui-input-wrap-prefix .layui-input {
-  padding-left: 35px;
-}
-
-
-.layui-input-wrap .layui-input:focus + .layui-input-split {
-  border-color: @global-neutral-color-6;
-}
-
-.layui-input-wrap-prefix .layui-form-select {
-  position: static;
-}
-
-.layui-input-affix-event .layui-icon {
-  color: rgba(0, 0, 0, 0.8);
-}
-
-.layui-input-affix-event .layui-icon-clear {
-  color: rgba(0, 0, 0, 0.3);
-}
-
-.layui-input-affix-event .layui-icon:hover {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.layui-input-split {
-  border-width: 1px;
-  border-style: solid;
-}
-
-.layui-input-affix-event {
-  pointer-events: auto;
-}
-
-.layui-input-group {
-  position: relative;
-  display: inline-table;
-  cursor: pointer;
-}
-
-.layui-input-group > * {
-  display: table-cell;
-  vertical-align: middle;
-  position: relative;
-  cursor: pointer;
-}
-
-.layui-input-group .layui-input {
-  padding-right: 15px;
-}
-
-.layui-input-group .layui-input-prefix {
-  width: auto;
-  border-right: 0;
-}
-
-.layui-input-group .layui-input-suffix {
-  width: auto;
-  border-left: 0;
-}
-
 .layui-form-checkbox,
 .layui-form-checkbox *,
 .layui-form-switch {
@@ -706,35 +496,6 @@ a cite {
   vertical-align: middle;
 }
 
-.layui-form-selected .layui-edge {
-  margin-top: -9px!important;
-  -webkit-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
-:root .layui-form-selected .layui-edge {
-  margin-top: -9px\0 / IE9;
-}
-
-.layui-form-selectup dl {
-  top: auto;
-  bottom: 42px;
-}
-
-.layui-select-none {
-  margin: 5px 0;
-  text-align: center;
-  color: #999;
-}
-
-.layui-select-disabled .layui-disabled {
-  border-color: @global-neutral-color-3 !important;
-}
-
-.layui-select-disabled .layui-edge {
-  border-top-color: @global-neutral-color-6;
-}
-
 .layui-form-item .layui-form-checkbox {
   margin-top: 4px;
 }
@@ -880,491 +641,3 @@ a cite {
 .layui-nav {
   box-sizing: border-box;
 }
-
-.layui-menu {
-  position: relative;
-  background-color: #fff;
-}
-
-.layui-menu li,
-.layui-menu-body-title a {
-  padding: 5px 15px;
-}
-
-.layui-menu li {
-  position: relative;
-  line-height: 26px;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 14px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.layui-menu li:hover {
-  background-color: @global-neutral-color-2;
-}
-
-.layui-menu-item-parent:hover > .layui-menu-body-panel {
-  display: block;
-  animation-name: layui-fadein;
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  animation-delay: 0.2s;
-}
-
-.layui-menu-item-group .layui-menu-body-title,
-.layui-menu-item-parent .layui-menu-body-title {
-  padding-right: 25px;
-}
-
-.layui-menu .layui-menu-item-divider:hover,
-.layui-menu .layui-menu-item-group:hover,
-.layui-menu .layui-menu-item-none:hover {
-  background: 0 0;
-  cursor: default;
-}
-
-.layui-menu .layui-menu-item-group > ul {
-  margin: 5px 0 -5px;
-}
-
-.layui-menu .layui-menu-item-group > .layui-menu-body-title {
-  color: rgba(0, 0, 0, 0.35);
-  user-select: none;
-}
-
-.layui-menu .layui-menu-item-none {
-  color: rgba(0, 0, 0, 0.35);
-  cursor: default;
-  text-align: center;
-}
-
-.layui-menu .layui-menu-item-divider {
-  margin: 5px 0;
-  padding: 0;
-  height: 0;
-  line-height: 0;
-  border-bottom: 1px solid @global-neutral-color-3;
-  overflow: hidden;
-}
-
-.layui-menu .layui-menu-item-down:hover,
-.layui-menu .layui-menu-item-up:hover {
-  cursor: pointer;
-}
-
-.layui-menu .layui-menu-item-up > .layui-menu-body-title {
-  color: rgba(0, 0, 0, 0.8);
-}
-
-.layui-menu .layui-menu-item-up > ul {
-  visibility: hidden;
-  height: 0;
-  overflow: hidden;
-}
-
-.layui-menu .layui-menu-item-down:hover > .layui-menu-body-title > .layui-icon,
-.layui-menu .layui-menu-item-up > .layui-menu-body-title:hover > .layui-icon {
-  color: rgba(0, 0, 0, 1);
-}
-
-.layui-menu .layui-menu-item-down > ul {
-  visibility: visible;
-  height: auto;
-}
-
-.layui-tree-btnGroup {
-  visibility: hidden;
-}
-
-.layui-menu .layui-menu-item-checked,
-.layui-menu .layui-menu-item-checked2 {
-  background-color: @global-neutral-color-2 !important;
-  border-radius: 2px;
-  color: @global-checked-color;
-}
-
-.layui-menu .layui-menu-item-checked a,
-.layui-menu .layui-menu-item-checked2 a {
-  color: @global-checked-color;
-}
-
-.layui-menu .layui-menu-item-checked:after {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  border-right: 3px solid @global-checked-color;
-  content: "";
-}
-
-.layui-menu-body-title {
-  position: relative;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.layui-menu-body-title a {
-  display: block;
-  margin: -5px -15px;
-  color: rgba(0, 0, 0, 0.8);
-}
-
-.layui-menu-body-title > .layui-icon {
-  position: absolute;
-  right: 0;
-  top: 0;
-  font-size: 14px;
-}
-
-.layui-menu-body-title > .layui-icon-right {
-  right: -1px;
-}
-
-.layui-menu-body-panel {
-  display: none;
-  position: absolute;
-  top: -7px;
-  left: 100%;
-  z-index: 1000;
-  margin-left: 13px;
-  padding: 5px 0;
-}
-
-.layui-menu-body-panel:before {
-  content: "";
-  position: absolute;
-  width: 20px;
-  left: -16px;
-  top: 0;
-  bottom: 0;
-}
-
-.layui-menu-body-panel-left {
-  left: auto;
-  right: 100%;
-  margin: 0 13px;
-}
-
-.layui-menu-body-panel-left:before {
-  left: auto;
-  right: -16px;
-}
-
-.layui-menu-lg li {
-  line-height: 32px;
-}
-
-.layui-menu-lg .layui-menu-body-title a:hover,
-.layui-menu-lg li:hover {
-  background: 0 0;
-  color: @global-checked-color;
-}
-
-.layui-menu-lg li .layui-menu-body-panel {
-  margin-left: 14px;
-}
-
-.layui-menu-lg li .layui-menu-body-panel-left {
-  margin: 0 15px;
-}
-
-/// anim.css
-
-.layui-anim {
-  -webkit-animation-duration: 0.3s;
-  -webkit-animation-fill-mode: both;
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-}
-
-.layui-anim.layui-icon {
-  display: inline-block;
-}
-
-.layui-anim-loop {
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
-
-.layui-trans,
-.layui-trans a {
-  transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-}
-
-@-webkit-keyframes layui-rotate {
-  from {
-    -webkit-transform: rotate(0);
-  }
-
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@keyframes layui-rotate {
-  from {
-    transform: rotate(0);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.layui-anim-rotate {
-  -webkit-animation-name: layui-rotate;
-  animation-name: layui-rotate;
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-timing-function: linear;
-  animation-timing-function: linear;
-}
-
-@-webkit-keyframes layui-up {
-  from {
-    -webkit-transform: translate3d(0, 100%, 0);
-    opacity: 0.3;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes layui-up {
-  from {
-    transform: translate3d(0, 100%, 0);
-    opacity: 0.3;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-.layui-anim-up {
-  -webkit-animation-name: layui-up;
-  animation-name: layui-up;
-}
-
-@-webkit-keyframes layui-upbit {
-  from {
-    -webkit-transform: translate3d(0, 15px, 0);
-    opacity: 0.3;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes layui-upbit {
-  from {
-    transform: translate3d(0, 15px, 0);
-    opacity: 0.3;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-.layui-anim-upbit {
-  -webkit-animation-name: layui-upbit;
-  animation-name: layui-upbit;
-}
-
-@keyframes layui-down {
-  0% {
-    opacity: 0.3;
-    transform: translate3d(0, -100%, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.layui-anim-down {
-  animation-name: layui-down;
-}
-
-@keyframes layui-downbit {
-  0% {
-    opacity: 0.3;
-    transform: translate3d(0, -5px, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.layui-anim-downbit {
-  animation-name: layui-downbit;
-}
-
-@-webkit-keyframes layui-scale {
-  0% {
-    opacity: 0.3;
-    -webkit-transform: scale(0.5);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-  }
-}
-
-@keyframes layui-scale {
-  0% {
-    opacity: 0.3;
-    -ms-transform: scale(0.5);
-    transform: scale(0.5);
-  }
-
-  100% {
-    opacity: 1;
-    -ms-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-.layui-anim-scale {
-  -webkit-animation-name: layui-scale;
-  animation-name: layui-scale;
-}
-
-@-webkit-keyframes layui-scale-spring {
-  0% {
-    opacity: 0.5;
-    -webkit-transform: scale(0.5);
-  }
-
-  80% {
-    opacity: 0.8;
-    -webkit-transform: scale(1.1);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-  }
-}
-
-@keyframes layui-scale-spring {
-  0% {
-    opacity: 0.5;
-    transform: scale(0.5);
-  }
-
-  80% {
-    opacity: 0.8;
-    transform: scale(1.1);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.layui-anim-scaleSpring {
-  -webkit-animation-name: layui-scale-spring;
-  animation-name: layui-scale-spring;
-}
-
-@keyframes layui-scalesmall {
-  0% {
-    opacity: 0.3;
-    transform: scale(1.5);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.layui-anim-scalesmall {
-  animation-name: layui-scalesmall;
-}
-
-@keyframes layui-scalesmall-spring {
-  0% {
-    opacity: 0.3;
-    transform: scale(1.5);
-  }
-
-  80% {
-    opacity: 0.8;
-    transform: scale(0.9);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.layui-anim-scalesmall-spring {
-  animation-name: layui-scalesmall-spring;
-}
-
-@-webkit-keyframes layui-fadein {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes layui-fadein {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.layui-anim-fadein {
-  -webkit-animation-name: layui-fadein;
-  animation-name: layui-fadein;
-}
-
-@-webkit-keyframes layui-fadeout {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes layui-fadeout {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.layui-anim-fadeout {
-  -webkit-animation-name: layui-fadeout;
-  animation-name: layui-fadeout;
-}

package/component/src/theme/public.less

@@ -0,0 +1,408 @@
+// layui background-color.css
+.layui-bg-black,
+.layui-bg-blue,
+.layui-bg-cyan,
+.layui-bg-green,
+.layui-bg-orange,
+.layui-bg-red {
+  color: #fff !important;
+}
+
+.layui-bg-red {
+  background-color: #ff5722 !important;
+}
+
+.layui-bg-orange {
+  background-color: #ffb800 !important;
+}
+
+.layui-bg-green {
+  background-color: #009688 !important;
+}
+
+.layui-bg-cyan {
+  background-color: #2f4056 !important;
+}
+
+.layui-bg-blue {
+  background-color: #1e9fff !important;
+}
+
+.layui-bg-black {
+  background-color: #393d49 !important;
+}
+
+.layui-bg-gray {
+  background-color: #fafafa !important;
+  color: #666 !important;
+}
+
+// layui font-color.css
+.layui-font-red {
+  color: #ff5722 !important;
+}
+
+.layui-font-orange {
+  color: #ffb800 !important;
+}
+
+.layui-font-green {
+  color: #009688 !important;
+}
+
+.layui-font-cyan {
+  color: #2f4056 !important;
+}
+
+.layui-font-blue {
+  color: #01aaed !important;
+}
+
+.layui-font-black {
+  color: #000 !important;
+}
+
+.layui-font-gray {
+  color: #c2c2c2 !important;
+}
+
+// layui font-size.css
+
+.layui-font-12 {
+  font-size: 12px !important;
+}
+
+.layui-font-14 {
+  font-size: 14px !important;
+}
+
+.layui-font-16 {
+  font-size: 16px !important;
+}
+
+.layui-font-18 {
+  font-size: 18px !important;
+}
+
+.layui-font-20 {
+  font-size: 20px !important;
+}
+
+.layui-font-22 {
+  font-size: 22px !important;
+}
+
+.layui-font-24 {
+  font-size: 24px !important;
+}
+
+.layui-font-26 {
+  font-size: 26px !important;
+}
+
+.layui-font-28 {
+  font-size: 28px !important;
+}
+
+.layui-font-30 {
+  font-size: 30px !important;
+}
+
+// layui anim.css
+.layui-anim {
+  -webkit-animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+
+.layui-anim.layui-icon {
+  display: inline-block;
+}
+
+.layui-anim-loop {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.layui-trans,
+.layui-trans a {
+  transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+}
+
+@-webkit-keyframes layui-rotate {
+  from {
+    -webkit-transform: rotate(0);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes layui-rotate {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.layui-anim-rotate {
+  -webkit-animation-name: layui-rotate;
+  animation-name: layui-rotate;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+}
+
+@-webkit-keyframes layui-up {
+  from {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0.3;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes layui-up {
+  from {
+    transform: translate3d(0, 100%, 0);
+    opacity: 0.3;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.layui-anim-up {
+  -webkit-animation-name: layui-up;
+  animation-name: layui-up;
+}
+
+@-webkit-keyframes layui-upbit {
+  from {
+    -webkit-transform: translate3d(0, 15px, 0);
+    opacity: 0.3;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes layui-upbit {
+  from {
+    transform: translate3d(0, 15px, 0);
+    opacity: 0.3;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.layui-anim-upbit {
+  -webkit-animation-name: layui-upbit;
+  animation-name: layui-upbit;
+}
+
+@keyframes layui-down {
+  0% {
+    opacity: 0.3;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.layui-anim-down {
+  animation-name: layui-down;
+}
+
+@keyframes layui-downbit {
+  0% {
+    opacity: 0.3;
+    transform: translate3d(0, -5px, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.layui-anim-downbit {
+  animation-name: layui-downbit;
+}
+
+@-webkit-keyframes layui-scale {
+  0% {
+    opacity: 0.3;
+    -webkit-transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes layui-scale {
+  0% {
+    opacity: 0.3;
+    -ms-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.layui-anim-scale {
+  -webkit-animation-name: layui-scale;
+  animation-name: layui-scale;
+}
+
+@-webkit-keyframes layui-scale-spring {
+  0% {
+    opacity: 0.5;
+    -webkit-transform: scale(0.5);
+  }
+
+  80% {
+    opacity: 0.8;
+    -webkit-transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes layui-scale-spring {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.5);
+  }
+
+  80% {
+    opacity: 0.8;
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.layui-anim-scaleSpring {
+  -webkit-animation-name: layui-scale-spring;
+  animation-name: layui-scale-spring;
+}
+
+@keyframes layui-scalesmall {
+  0% {
+    opacity: 0.3;
+    transform: scale(1.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.layui-anim-scalesmall {
+  animation-name: layui-scalesmall;
+}
+
+@keyframes layui-scalesmall-spring {
+  0% {
+    opacity: 0.3;
+    transform: scale(1.5);
+  }
+
+  80% {
+    opacity: 0.8;
+    transform: scale(0.9);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.layui-anim-scalesmall-spring {
+  animation-name: layui-scalesmall-spring;
+}
+
+@-webkit-keyframes layui-fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes layui-fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.layui-anim-fadein {
+  -webkit-animation-name: layui-fadein;
+  animation-name: layui-fadein;
+}
+
+@-webkit-keyframes layui-fadeout {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes layui-fadeout {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.layui-anim-fadeout {
+  -webkit-animation-name: layui-fadeout;
+  animation-name: layui-fadeout;
+}

package/component/src/theme/variable.less

@@ -60,8 +60,4 @@
   
   --global-neutral-color-8: #c2c2c2;
 
-  --global-dark-text-color: #FFFFFFc9;
-
-  --global-dark-background-color: #22272E;
-
 }

package/document/src/assets/css/index.css

@@ -1,3 +1,187 @@
 @import './code.css';
 @import './markdown.css';
 @import './vars.css';
+
+.layui-menu {
+    position: relative;
+    background-color: #fff;
+  }
+  
+  .layui-menu li,
+  .layui-menu-body-title a {
+    padding: 5px 15px;
+  }
+  
+  .layui-menu li {
+    position: relative;
+    line-height: 26px;
+    color: rgba(0, 0, 0, 0.8);
+    font-size: 14px;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  
+  .layui-menu li:hover {
+    background-color: var(--global-neutral-color-2);
+  }
+  
+  .layui-menu-item-parent:hover > .layui-menu-body-panel {
+    display: block;
+    animation-name: layui-fadein;
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-delay: 0.2s;
+  }
+  
+  .layui-menu-item-group .layui-menu-body-title,
+  .layui-menu-item-parent .layui-menu-body-title {
+    padding-right: 25px;
+  }
+  
+  .layui-menu .layui-menu-item-divider:hover,
+  .layui-menu .layui-menu-item-group:hover,
+  .layui-menu .layui-menu-item-none:hover {
+    background: 0 0;
+    cursor: default;
+  }
+  
+  .layui-menu .layui-menu-item-group > ul {
+    margin: 5px 0 -5px;
+  }
+  
+  .layui-menu .layui-menu-item-group > .layui-menu-body-title {
+    color: rgba(0, 0, 0, 0.35);
+    user-select: none;
+  }
+  
+  .layui-menu .layui-menu-item-none {
+    color: rgba(0, 0, 0, 0.35);
+    cursor: default;
+    text-align: center;
+  }
+  
+  .layui-menu .layui-menu-item-divider {
+    margin: 5px 0;
+    padding: 0;
+    height: 0;
+    line-height: 0;
+    border-bottom: 1px solid var(--global-neutral-color-3);
+    overflow: hidden;
+  }
+  
+  .layui-menu .layui-menu-item-down:hover,
+  .layui-menu .layui-menu-item-up:hover {
+    cursor: pointer;
+  }
+  
+  .layui-menu .layui-menu-item-up > .layui-menu-body-title {
+    color: rgba(0, 0, 0, 0.8);
+  }
+  
+  .layui-menu .layui-menu-item-up > ul {
+    visibility: hidden;
+    height: 0;
+    overflow: hidden;
+  }
+  
+  .layui-menu .layui-menu-item-down:hover > .layui-menu-body-title > .layui-icon,
+  .layui-menu .layui-menu-item-up > .layui-menu-body-title:hover > .layui-icon {
+    color: rgba(0, 0, 0, 1);
+  }
+  
+  .layui-menu .layui-menu-item-down > ul {
+    visibility: visible;
+    height: auto;
+  }
+  
+  .layui-menu .layui-menu-item-checked,
+  .layui-menu .layui-menu-item-checked2 {
+    background-color: var(--global-neutral-color-2) !important;
+    border-radius: 2px;
+    color: var(--global-checked-color);
+  }
+  
+  .layui-menu .layui-menu-item-checked a,
+  .layui-menu .layui-menu-item-checked2 a {
+    color: var(--global-checked-color);
+  }
+  
+  .layui-menu .layui-menu-item-checked:after {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-right: 3px solid var(--global-checked-color);
+    content: "";
+  }
+  
+  .layui-menu-body-title {
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .layui-menu-body-title a {
+    display: block;
+    margin: -5px -15px;
+    color: rgba(0, 0, 0, 0.8);
+  }
+  
+  .layui-menu-body-title > .layui-icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 14px;
+  }
+  
+  .layui-menu-body-title > .layui-icon-right {
+    right: -1px;
+  }
+  
+  .layui-menu-body-panel {
+    display: none;
+    position: absolute;
+    top: -7px;
+    left: 100%;
+    z-index: 1000;
+    margin-left: 13px;
+    padding: 5px 0;
+  }
+  
+  .layui-menu-body-panel:before {
+    content: "";
+    position: absolute;
+    width: 20px;
+    left: -16px;
+    top: 0;
+    bottom: 0;
+  }
+  
+  .layui-menu-body-panel-left {
+    left: auto;
+    right: 100%;
+    margin: 0 13px;
+  }
+  
+  .layui-menu-body-panel-left:before {
+    left: auto;
+    right: -16px;
+  }
+  
+  .layui-menu-lg li {
+    line-height: 32px;
+  }
+  
+  .layui-menu-lg .layui-menu-body-title a:hover,
+  .layui-menu-lg li:hover {
+    background: 0 0;
+    color: var(--global-checked-color);
+  }
+  
+  .layui-menu-lg li .layui-menu-body-panel {
+    margin-left: 14px;
+  }
+  
+  .layui-menu-lg li .layui-menu-body-panel-left {
+    margin: 0 15px;
+  }