兼容 css3 特性

example/docs/zh-CN/components/animation.md

@@ -77,113 +77,6 @@ export default {
   }
 }
 </script>
-<style>
-.site-doc-icon {
-  margin-bottom: 50px;
-  font-size: 0;
-}
-
-.site-doc-icon li .doc-icon-name,
-.site-doc-icon li .doc-icon-code {
-  color: #c2c2c2;
-}
-
-.site-doc-icon li .doc-icon-fontclass {
-  height: 40px;
-  line-height: 20px;
-  padding: 0 5px;
-  font-size: 13px;
-  color: #333;
-}
-
-.site-doc-icon li {
-  display: inline-block;
-  vertical-align: middle;
-  width: 16.5%;
-  height: 105px;
-  line-height: 25px;
-  padding: 20px 0;
-  margin-right: -1px;
-  margin-bottom: -1px;
-  border: 1px solid #e2e2e2;
-  font-size: 14px;
-  text-align: center;
-  color: #666;
-  transition: all 0.3s;
-  -webkit-transition: all 0.3s;
-}
-
-.site-doc-icon li .layui-icon {
-  display: inline-block;
-  font-size: 32px;
-}
-
-.site-doc-color {
-  margin: 15px 0;
-}
-
-.site-doc-necolor li div {
-  border-radius: 0;
-  color: #000 !important;
-}
-
-.site-doc-color li div {
-  padding: 20px 10px;
-  color: #fff;
-  text-align: center;
-  line-height: 1.6;
-  font-size: 14px;
-}
-
-.site-doc-bgcolor li {
-  padding: 20px 10px;
-}
-.anim .site-doc-icon {
-  margin-bottom: 50px;
-  font-size: 0;
-}
-
-.anim .site-doc-icon li {
-  width: 50%;
-}
-
-.anim .site-doc-anim li {
-  height: auto;
-}
-
-.anim .site-doc-icon li {
-  display: inline-block;
-  vertical-align: middle;
-  width: 16.5%;
-  height: 105px;
-  line-height: 25px;
-  padding: 20px 0;
-  margin-right: -1px;
-  margin-bottom: -1px;
-  border: 1px solid #e2e2e2;
-  font-size: 14px;
-  text-align: center;
-  color: #666;
-  transition: all 0.3s;
-  -webkit-transition: all 0.3s;
-}
-
-.anim .site-doc-icon li .layui-anim {
-  width: 125px;
-  height: 125px;
-  line-height: 125px;
-  margin: 0 auto 10px;
-  text-align: center;
-  background-color: #009688;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 50%;
-}
-
-.anim .site-doc-icon li .code {
-  white-space: nowrap;
-}
-</style>
 
 :::
 

example/docs/zh-CN/components/grid.md

@@ -15,11 +15,11 @@
 <template>
   <lay-row space="10">
      <lay-col md="12"><div class="grid-demo">1</div></lay-col>
-     <lay-col md="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+     <lay-col md="12"><div class="grid-demo">2</div></lay-col>
      <lay-col md="6"><div class="grid-demo">3</div></lay-col>
-     <lay-col md="6"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
+     <lay-col md="6"><div class="grid-demo">4</div></lay-col>
      <lay-col md="6"><div class="grid-demo">5</div></lay-col>
-     <lay-col md="6"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
+     <lay-col md="6"><div class="grid-demo">6</div></lay-col>
   </lay-row>
 </template>
 
@@ -35,15 +35,12 @@ export default {
 </script>
 
 <style>
-.grid-demo-bg1 {
-    background-color: #63BA79;
-}
 .grid-demo {
     padding: 10px;
     line-height: 50px;
     border-radius: 2px;
     text-align: center;
-    background-color: #79C48C;
+    background-color: var(--global-checked-color);
     color: #fff;
 }
 </style>
@@ -58,7 +55,7 @@ export default {
 <template>
   <lay-row space="10">
      <lay-col md="12"><div class="grid-demo">1</div></lay-col>
-     <lay-col md="6" mdOffset="6"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+     <lay-col md="6" mdOffset="6"><div class="grid-demo">2</div></lay-col>
   </lay-row>
 </template>
 
@@ -74,15 +71,12 @@ export default {
 </script>
 
 <style>
-.grid-demo-bg1 {
-    background-color: #63BA79;
-}
 .grid-demo {
     padding: 10px;
     line-height: 50px;
     border-radius: 2px;
     text-align: center;
-    background-color: #79C48C;
+    background-color: var(--global-checked-color);
     color: #fff;
 }
 </style>
@@ -97,7 +91,7 @@ export default {
 <template>
   <lay-row space="10">
      <lay-col md="12" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
-     <lay-col md="12" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+     <lay-col md="12" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
   </lay-row>
 </template>
 
@@ -112,15 +106,12 @@ export default {
 }
 </script>
 <style>
-.grid-demo-bg1 {
-    background-color: #63BA79;
-}
 .grid-demo {
     padding: 10px;
     line-height: 50px;
     border-radius: 2px;
     text-align: center;
-    background-color: #79C48C;
+    background-color: var(--global-checked-color);
     color: #fff;
 }
 </style>
@@ -136,11 +127,11 @@ export default {
   <lay-container fluid>
     <lay-row space="10">
       <lay-col md="4" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
       <lay-col md="4" sm="12" xs="24"><div class="grid-demo">3</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
+      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">4</div></lay-col>
       <lay-col md="4" sm="12" xs="24"><div class="grid-demo">5</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
+      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">6</div></lay-col>
     </lay-row>
   </lay-container>
 </template>
@@ -156,15 +147,12 @@ export default {
 }
 </script>
 <style>
-.grid-demo-bg1 {
-    background-color: #63BA79;
-}
 .grid-demo {
     padding: 10px;
     line-height: 50px;
     border-radius: 2px;
     text-align: center;
-    background-color: #79C48C;
+    background-color: var(--global-checked-color);
     color: #fff;
 }
 </style>