grid selector css

update

resources/assets/dcat/sass/components/_grid-selector.scss

@@ -0,0 +1,64 @@
+.grid-selector {
+  margin: -1.5rem;
+}
+.grid-selector .wrap {
+  position: relative;
+  line-height: 40px;
+  border-bottom: 1px dashed #eee;
+  padding: 0 30px;
+  font-size: 13px;
+  overflow:auto;
+}
+.grid-selector .wrap:last-child {
+  border-bottom: none;
+}
+.grid-selector .select-label {
+  float: left;
+  width: 100px;
+  padding-left: 10px;
+  color: #888;
+}
+.grid-selector .select-options {
+  margin-left: 100px;
+}
+.grid-selector ul {
+  height: 25px;
+  list-style: none;
+}
+.grid-selector ul > li {
+  margin-right: 30px;
+  float: left;
+}
+.grid-selector ul > li a {
+  color: #666;
+  text-decoration: none;
+}
+.grid-selector .select-options a.active {
+  color: $primary-darker;
+  font-weight: bold;
+}
+.grid-selector li .add {
+  visibility: hidden;
+}
+.grid-selector li:hover .add {
+  visibility: visible;
+}
+.grid-selector ul .clear {
+  visibility: hidden;
+}
+.grid-selector ul:hover .clear {
+  color: $red-darker;
+  visibility: visible;
+}
+
+.data-list-view {
+  .grid-selector {
+    .wrap {
+      border-bottom: 0;
+      background: $white;
+      box-shadow: $shadow;
+      border-radius: .4rem;
+      margin: 8px 0;
+    }
+  }
+}

resources/assets/dcat/sass/components/_nestable.scss

@@ -13,6 +13,6 @@
 }
 
 .dd-handle {
-  border: 1px solid $border-color!important;
+  border: 1px solid lighten($input-border-color, 5%)!important;
   border-radius: .2rem!important;;
 }

resources/assets/dcat/sass/components/_table.scss

@@ -1,5 +1,8 @@
-table.dataTable thead th {
+.table {
   color: $font-color;
+}
+
+table.dataTable thead th {
   font-size: .95rem;
 }
 

resources/assets/dcat/sass/dcat-app.scss

@@ -57,6 +57,8 @@ html body .content .content-wrapper {
 @import "./components/slider";
 // 时间日期插件
 @import "./components/datetimepicker";
+// grid selector
+@import "./components/grid-selector";
 
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
    font-size: 1.3rem;

resources/assets/dcat/sass/variables/_colors.scss

@@ -49,3 +49,12 @@ $body-bg: $dark30;
 
 // 灰背景色
 $gray-bg: #f1f1f1;
+
+// 常用边框颜色
+$border-color: #ebeff2;
+
+// 表单边框颜色
+$input-border-color: #d9d9d9;
+
+// 常用分割线颜色
+$divider-color: #f4f4f4;

resources/assets/dcat/sass/variables/_variables.scss

@@ -17,11 +17,3 @@ $btn-group-btn-shadow: 0 2px 0 0 rgba(0,0,0,.08);
 // 菜单阴影
 $menu-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
 
-// 常用边框颜色
-$border-color: #eee;
-
-// 表单边框颜色
-$input-border-color: #d9d9d9;
-
-// 常用分割线颜色
-$divider-color: #f4f4f4;

resources/dist/css/plugins/loaders/animations/ball-grid-beat.css

@@ -27,66 +27,66 @@
 }
 
 .ball-grid-beat > div:nth-child(1) {
-  -webkit-animation-delay: 0.09s;
-          animation-delay: 0.09s;
-  -webkit-animation-duration: 1.04s;
-          animation-duration: 1.04s;
+  -webkit-animation-delay: 0.55s;
+          animation-delay: 0.55s;
+  -webkit-animation-duration: 0.9s;
+          animation-duration: 0.9s;
 }
 
 .ball-grid-beat > div:nth-child(2) {
-  -webkit-animation-delay: 0.69s;
-          animation-delay: 0.69s;
-  -webkit-animation-duration: 1.22s;
-          animation-duration: 1.22s;
+  -webkit-animation-delay: 0.11s;
+          animation-delay: 0.11s;
+  -webkit-animation-duration: 1.55s;
+          animation-duration: 1.55s;
 }
 
 .ball-grid-beat > div:nth-child(3) {
-  -webkit-animation-delay: 0.28s;
-          animation-delay: 0.28s;
-  -webkit-animation-duration: 1.33s;
-          animation-duration: 1.33s;
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+  -webkit-animation-duration: 1.4s;
+          animation-duration: 1.4s;
 }
 
 .ball-grid-beat > div:nth-child(4) {
-  -webkit-animation-delay: 0.06s;
-          animation-delay: 0.06s;
-  -webkit-animation-duration: 1.49s;
-          animation-duration: 1.49s;
+  -webkit-animation-delay: 0.13s;
+          animation-delay: 0.13s;
+  -webkit-animation-duration: 0.97s;
+          animation-duration: 0.97s;
 }
 
 .ball-grid-beat > div:nth-child(5) {
-  -webkit-animation-delay: 0.45s;
-          animation-delay: 0.45s;
-  -webkit-animation-duration: 0.77s;
-          animation-duration: 0.77s;
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+  -webkit-animation-duration: 1.38s;
+          animation-duration: 1.38s;
 }
 
 .ball-grid-beat > div:nth-child(6) {
-  -webkit-animation-delay: 0.79s;
-          animation-delay: 0.79s;
-  -webkit-animation-duration: 0.91s;
-          animation-duration: 0.91s;
+  -webkit-animation-delay: -0.16s;
+          animation-delay: -0.16s;
+  -webkit-animation-duration: 1.11s;
+          animation-duration: 1.11s;
 }
 
 .ball-grid-beat > div:nth-child(7) {
-  -webkit-animation-delay: 0.27s;
-          animation-delay: 0.27s;
-  -webkit-animation-duration: 0.91s;
-          animation-duration: 0.91s;
+  -webkit-animation-delay: 0.32s;
+          animation-delay: 0.32s;
+  -webkit-animation-duration: 0.69s;
+          animation-duration: 0.69s;
 }
 
 .ball-grid-beat > div:nth-child(8) {
-  -webkit-animation-delay: 0.23s;
-          animation-delay: 0.23s;
-  -webkit-animation-duration: 1.29s;
-          animation-duration: 1.29s;
+  -webkit-animation-delay: 0.75s;
+          animation-delay: 0.75s;
+  -webkit-animation-duration: 0.91s;
+          animation-duration: 0.91s;
 }
 
 .ball-grid-beat > div:nth-child(9) {
-  -webkit-animation-delay: 0.55s;
-          animation-delay: 0.55s;
-  -webkit-animation-duration: 0.94s;
-          animation-duration: 0.94s;
+  -webkit-animation-delay: 0.08s;
+          animation-delay: 0.08s;
+  -webkit-animation-duration: 0.65s;
+          animation-duration: 0.65s;
 }
 
 .ball-grid-beat > div {

resources/dist/css/plugins/loaders/animations/ball-grid-pulse.css

@@ -39,66 +39,66 @@
 }
 
 .ball-grid-pulse > div:nth-child(1) {
-  -webkit-animation-delay: 0.72s;
-          animation-delay: 0.72s;
-  -webkit-animation-duration: 0.72s;
-          animation-duration: 0.72s;
+  -webkit-animation-delay: 0.74s;
+          animation-delay: 0.74s;
+  -webkit-animation-duration: 0.68s;
+          animation-duration: 0.68s;
 }
 
 .ball-grid-pulse > div:nth-child(2) {
-  -webkit-animation-delay: 0.51s;
-          animation-delay: 0.51s;
-  -webkit-animation-duration: 1.17s;
-          animation-duration: 1.17s;
+  -webkit-animation-delay: 0.26s;
+          animation-delay: 0.26s;
+  -webkit-animation-duration: 1.13s;
+          animation-duration: 1.13s;
 }
 
 .ball-grid-pulse > div:nth-child(3) {
-  -webkit-animation-delay: 0.33s;
-          animation-delay: 0.33s;
-  -webkit-animation-duration: 1.6s;
-          animation-duration: 1.6s;
+  -webkit-animation-delay: -0.14s;
+          animation-delay: -0.14s;
+  -webkit-animation-duration: 0.61s;
+          animation-duration: 0.61s;
 }
 
 .ball-grid-pulse > div:nth-child(4) {
-  -webkit-animation-delay: 0.29s;
-          animation-delay: 0.29s;
-  -webkit-animation-duration: 1.3s;
-          animation-duration: 1.3s;
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+  -webkit-animation-duration: 1.21s;
+          animation-duration: 1.21s;
 }
 
 .ball-grid-pulse > div:nth-child(5) {
-  -webkit-animation-delay: 0.39s;
-          animation-delay: 0.39s;
-  -webkit-animation-duration: 1.34s;
-          animation-duration: 1.34s;
+  -webkit-animation-delay: -0.07s;
+          animation-delay: -0.07s;
+  -webkit-animation-duration: 1.39s;
+          animation-duration: 1.39s;
 }
 
 .ball-grid-pulse > div:nth-child(6) {
-  -webkit-animation-delay: 0s;
-          animation-delay: 0s;
-  -webkit-animation-duration: 1.59s;
-          animation-duration: 1.59s;
+  -webkit-animation-delay: 0.52s;
+          animation-delay: 0.52s;
+  -webkit-animation-duration: 1.09s;
+          animation-duration: 1.09s;
 }
 
 .ball-grid-pulse > div:nth-child(7) {
-  -webkit-animation-delay: 0.5s;
-          animation-delay: 0.5s;
-  -webkit-animation-duration: 0.67s;
-          animation-duration: 0.67s;
+  -webkit-animation-delay: 0.76s;
+          animation-delay: 0.76s;
+  -webkit-animation-duration: 1.45s;
+          animation-duration: 1.45s;
 }
 
 .ball-grid-pulse > div:nth-child(8) {
-  -webkit-animation-delay: 0.45s;
-          animation-delay: 0.45s;
-  -webkit-animation-duration: 0.67s;
-          animation-duration: 0.67s;
+  -webkit-animation-delay: 0.08s;
+          animation-delay: 0.08s;
+  -webkit-animation-duration: 1.06s;
+          animation-duration: 1.06s;
 }
 
 .ball-grid-pulse > div:nth-child(9) {
-  -webkit-animation-delay: 0.34s;
-          animation-delay: 0.34s;
-  -webkit-animation-duration: 1.46s;
-          animation-duration: 1.46s;
+  -webkit-animation-delay: 0.23s;
+          animation-delay: 0.23s;
+  -webkit-animation-duration: 1.04s;
+          animation-duration: 1.04s;
 }
 
 .ball-grid-pulse > div {

resources/dist/css/plugins/loaders/animations/line-scale-random.css

@@ -31,31 +31,31 @@
 }
 
 .line-scale-party > div:nth-child(1) {
-  -webkit-animation-delay: 0.14s;
-          animation-delay: 0.14s;
-  -webkit-animation-duration: 0.53s;
-          animation-duration: 0.53s;
+  -webkit-animation-delay: 0.69s;
+          animation-delay: 0.69s;
+  -webkit-animation-duration: 0.46s;
+          animation-duration: 0.46s;
 }
 
 .line-scale-party > div:nth-child(2) {
-  -webkit-animation-delay: 0.34s;
-          animation-delay: 0.34s;
+  -webkit-animation-delay: 0.11s;
+          animation-delay: 0.11s;
   -webkit-animation-duration: 0.76s;
           animation-duration: 0.76s;
 }
 
 .line-scale-party > div:nth-child(3) {
-  -webkit-animation-delay: 0.78s;
-          animation-delay: 0.78s;
-  -webkit-animation-duration: 0.75s;
-          animation-duration: 0.75s;
+  -webkit-animation-delay: 0.53s;
+          animation-delay: 0.53s;
+  -webkit-animation-duration: 1.2s;
+          animation-duration: 1.2s;
 }
 
 .line-scale-party > div:nth-child(4) {
-  -webkit-animation-delay: 0.16s;
-          animation-delay: 0.16s;
-  -webkit-animation-duration: 0.69s;
-          animation-duration: 0.69s;
+  -webkit-animation-delay: 0.51s;
+          animation-delay: 0.51s;
+  -webkit-animation-duration: 1.15s;
+          animation-duration: 1.15s;
 }
 
 .line-scale-party > div {

resources/dist/css/plugins/loaders/loaders.css

@@ -1454,66 +1454,66 @@
 }
 
 .ball-grid-beat > div:nth-child(1) {
-  -webkit-animation-delay: -0.18s;
-          animation-delay: -0.18s;
-  -webkit-animation-duration: 1.02s;
-          animation-duration: 1.02s;
+  -webkit-animation-delay: 0.66s;
+          animation-delay: 0.66s;
+  -webkit-animation-duration: 0.92s;
+          animation-duration: 0.92s;
 }
 
 .ball-grid-beat > div:nth-child(2) {
-  -webkit-animation-delay: 0.62s;
-          animation-delay: 0.62s;
-  -webkit-animation-duration: 1.52s;
-          animation-duration: 1.52s;
+  -webkit-animation-delay: 0.74s;
+          animation-delay: 0.74s;
+  -webkit-animation-duration: 0.74s;
+          animation-duration: 0.74s;
 }
 
 .ball-grid-beat > div:nth-child(3) {
-  -webkit-animation-delay: 0.25s;
-          animation-delay: 0.25s;
-  -webkit-animation-duration: 1.33s;
-          animation-duration: 1.33s;
+  -webkit-animation-delay: 0.04s;
+          animation-delay: 0.04s;
+  -webkit-animation-duration: 0.64s;
+          animation-duration: 0.64s;
 }
 
 .ball-grid-beat > div:nth-child(4) {
-  -webkit-animation-delay: 0.41s;
-          animation-delay: 0.41s;
-  -webkit-animation-duration: 1.5s;
-          animation-duration: 1.5s;
+  -webkit-animation-delay: 0.52s;
+          animation-delay: 0.52s;
+  -webkit-animation-duration: 1.02s;
+          animation-duration: 1.02s;
 }
 
 .ball-grid-beat > div:nth-child(5) {
-  -webkit-animation-delay: 0.44s;
-          animation-delay: 0.44s;
-  -webkit-animation-duration: 1.37s;
-          animation-duration: 1.37s;
+  -webkit-animation-delay: -0.19s;
+          animation-delay: -0.19s;
+  -webkit-animation-duration: 0.68s;
+          animation-duration: 0.68s;
 }
 
 .ball-grid-beat > div:nth-child(6) {
-  -webkit-animation-delay: 0.1s;
-          animation-delay: 0.1s;
-  -webkit-animation-duration: 0.98s;
-          animation-duration: 0.98s;
+  -webkit-animation-delay: 0.46s;
+          animation-delay: 0.46s;
+  -webkit-animation-duration: 0.94s;
+          animation-duration: 0.94s;
 }
 
 .ball-grid-beat > div:nth-child(7) {
-  -webkit-animation-delay: -0.11s;
-          animation-delay: -0.11s;
-  -webkit-animation-duration: 0.94s;
-          animation-duration: 0.94s;
+  -webkit-animation-delay: 0.62s;
+          animation-delay: 0.62s;
+  -webkit-animation-duration: 1.25s;
+          animation-duration: 1.25s;
 }
 
 .ball-grid-beat > div:nth-child(8) {
-  -webkit-animation-delay: -0.16s;
-          animation-delay: -0.16s;
-  -webkit-animation-duration: 0.85s;
-          animation-duration: 0.85s;
+  -webkit-animation-delay: 0.05s;
+          animation-delay: 0.05s;
+  -webkit-animation-duration: 1.52s;
+          animation-duration: 1.52s;
 }
 
 .ball-grid-beat > div:nth-child(9) {
-  -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s;
-  -webkit-animation-duration: 1.14s;
-          animation-duration: 1.14s;
+  -webkit-animation-delay: 0.28s;
+          animation-delay: 0.28s;
+  -webkit-animation-duration: 1.38s;
+          animation-duration: 1.38s;
 }
 
 .ball-grid-beat > div {
@@ -1575,66 +1575,66 @@
 }
 
 .ball-grid-pulse > div:nth-child(1) {
-  -webkit-animation-delay: 0.26s;
-          animation-delay: 0.26s;
-  -webkit-animation-duration: 1.14s;
-          animation-duration: 1.14s;
+  -webkit-animation-delay: 0.46s;
+          animation-delay: 0.46s;
+  -webkit-animation-duration: 0.91s;
+          animation-duration: 0.91s;
 }
 
 .ball-grid-pulse > div:nth-child(2) {
-  -webkit-animation-delay: 0.34s;
-          animation-delay: 0.34s;
-  -webkit-animation-duration: 1.41s;
-          animation-duration: 1.41s;
+  -webkit-animation-delay: -0.15s;
+          animation-delay: -0.15s;
+  -webkit-animation-duration: 1.45s;
+          animation-duration: 1.45s;
 }
 
 .ball-grid-pulse > div:nth-child(3) {
-  -webkit-animation-delay: 0.18s;
-          animation-delay: 0.18s;
-  -webkit-animation-duration: 0.61s;
-          animation-duration: 0.61s;
+  -webkit-animation-delay: 0.12s;
+          animation-delay: 0.12s;
+  -webkit-animation-duration: 0.64s;
+          animation-duration: 0.64s;
 }
 
 .ball-grid-pulse > div:nth-child(4) {
-  -webkit-animation-delay: 0.77s;
-          animation-delay: 0.77s;
-  -webkit-animation-duration: 0.69s;
-          animation-duration: 0.69s;
+  -webkit-animation-delay: 0.46s;
+          animation-delay: 0.46s;
+  -webkit-animation-duration: 1.32s;
+          animation-duration: 1.32s;
 }
 
 .ball-grid-pulse > div:nth-child(5) {
-  -webkit-animation-delay: 0.02s;
-          animation-delay: 0.02s;
-  -webkit-animation-duration: 1.27s;
-          animation-duration: 1.27s;
+  -webkit-animation-delay: -0.06s;
+          animation-delay: -0.06s;
+  -webkit-animation-duration: 1.33s;
+          animation-duration: 1.33s;
 }
 
 .ball-grid-pulse > div:nth-child(6) {
-  -webkit-animation-delay: 0.24s;
-          animation-delay: 0.24s;
-  -webkit-animation-duration: 1.29s;
-          animation-duration: 1.29s;
+  -webkit-animation-delay: 0.21s;
+          animation-delay: 0.21s;
+  -webkit-animation-duration: 0.68s;
+          animation-duration: 0.68s;
 }
 
 .ball-grid-pulse > div:nth-child(7) {
-  -webkit-animation-delay: 0.17s;
-          animation-delay: 0.17s;
+  -webkit-animation-delay: 0.78s;
+          animation-delay: 0.78s;
   -webkit-animation-duration: 0.92s;
           animation-duration: 0.92s;
 }
 
 .ball-grid-pulse > div:nth-child(8) {
-  -webkit-animation-delay: 0.61s;
-          animation-delay: 0.61s;
-  -webkit-animation-duration: 1.34s;
-          animation-duration: 1.34s;
+  -webkit-animation-delay: 0.02s;
+          animation-delay: 0.02s;
+  -webkit-animation-duration: 1.29s;
+          animation-duration: 1.29s;
 }
 
 .ball-grid-pulse > div:nth-child(9) {
-  -webkit-animation-delay: -0.12s;
-          animation-delay: -0.12s;
-  -webkit-animation-duration: 0.62s;
-          animation-duration: 0.62s;
+  -webkit-animation-delay: -0.11s;
+          animation-delay: -0.11s;
+  -webkit-animation-duration: 0.95s;
+          animation-duration: 0.95s;
 }
 
 .ball-grid-pulse > div {
@@ -2181,31 +2181,31 @@
 }
 
 .line-scale-party > div:nth-child(1) {
-  -webkit-animation-delay: 0.36s;
-          animation-delay: 0.36s;
-  -webkit-animation-duration: 0.89s;
-          animation-duration: 0.89s;
+  -webkit-animation-delay: 0.62s;
+          animation-delay: 0.62s;
+  -webkit-animation-duration: 0.74s;
+          animation-duration: 0.74s;
 }
 
 .line-scale-party > div:nth-child(2) {
-  -webkit-animation-delay: 0.21s;
-          animation-delay: 0.21s;
-  -webkit-animation-duration: 0.38s;
-          animation-duration: 0.38s;
+  -webkit-animation-delay: -0.01s;
+          animation-delay: -0.01s;
+  -webkit-animation-duration: 1.22s;
+          animation-duration: 1.22s;
 }
 
 .line-scale-party > div:nth-child(3) {
-  -webkit-animation-delay: 0.59s;
-          animation-delay: 0.59s;
-  -webkit-animation-duration: 0.56s;
-          animation-duration: 0.56s;
+  -webkit-animation-delay: 0.6s;
+          animation-delay: 0.6s;
+  -webkit-animation-duration: 1.11s;
+          animation-duration: 1.11s;
 }
 
 .line-scale-party > div:nth-child(4) {
-  -webkit-animation-delay: 0.69s;
-          animation-delay: 0.69s;
-  -webkit-animation-duration: 1.18s;
-          animation-duration: 1.18s;
+  -webkit-animation-delay: 0.77s;
+          animation-delay: 0.77s;
+  -webkit-animation-duration: 1.03s;
+          animation-duration: 1.03s;
 }
 
 .line-scale-party > div {

resources/dist/dcat/css/dcat-app.css

@@ -1959,8 +1959,11 @@ select.form-control:not([multiple=multiple]) {
   font-weight: 600;
 }
 
-table.dataTable thead th {
+.table {
   color: #414750;
+}
+
+table.dataTable thead th {
   font-size: 0.95rem;
 }
 
@@ -2174,7 +2177,7 @@ table.data-thumb-view.dataTable tbody td {
 }
 
 .dd-handle {
-  border: 1px solid #eee !important;
+  border: 1px solid #e6e6e6 !important;
   border-radius: 0.2rem !important;
 }
 
@@ -2269,6 +2272,79 @@ table.data-thumb-view.dataTable tbody td {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
 }
 
+.grid-selector {
+  margin: -1.5rem;
+}
+
+.grid-selector .wrap {
+  position: relative;
+  line-height: 40px;
+  border-bottom: 1px dashed #eee;
+  padding: 0 30px;
+  font-size: 13px;
+  overflow: auto;
+}
+
+.grid-selector .wrap:last-child {
+  border-bottom: none;
+}
+
+.grid-selector .select-label {
+  float: left;
+  width: 100px;
+  padding-left: 10px;
+  color: #888;
+}
+
+.grid-selector .select-options {
+  margin-left: 100px;
+}
+
+.grid-selector ul {
+  height: 25px;
+  list-style: none;
+}
+
+.grid-selector ul > li {
+  margin-right: 30px;
+  float: left;
+}
+
+.grid-selector ul > li a {
+  color: #666;
+  text-decoration: none;
+}
+
+.grid-selector .select-options a.active {
+  color: #495abf;
+  font-weight: bold;
+}
+
+.grid-selector li .add {
+  visibility: hidden;
+}
+
+.grid-selector li:hover .add {
+  visibility: visible;
+}
+
+.grid-selector ul .clear {
+  visibility: hidden;
+}
+
+.grid-selector ul:hover .clear {
+  color: #bd4147;
+  visibility: visible;
+}
+
+.data-list-view .grid-selector .wrap {
+  border-bottom: 0;
+  background: #fff;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  border-radius: 0.4rem;
+  margin: 8px 0;
+}
+
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
   font-size: 1.3rem;
 }

resources/views/grid/selector.blade.php

@@ -1,58 +1,3 @@
-<style>
-    .grid-selector {
-        margin: -10px;
-    }
-    .grid-selector .wrap {
-        position: relative;
-        line-height: 40px;
-        border-bottom: 1px dashed #eee;
-        padding: 0 30px;
-        font-size: 13px;
-        overflow:auto;
-    }
-    .grid-selector .wrap:last-child {
-        border-bottom: none;
-    }
-    .grid-selector .select-label {
-        float: left;
-        width: 100px;
-        padding-left: 10px;
-        color: #888;
-    }
-    .grid-selector .select-options {
-        margin-left: 100px;
-    }
-    .grid-selector ul {
-        height: 25px;
-        list-style: none;
-    }
-    .grid-selector ul > li {
-        margin-right: 30px;
-        float: left;
-    }
-    .grid-selector ul > li a {
-        color: #666;
-        text-decoration: none;
-    }
-    .grid-selector .select-options a.active {
-        color: {{ \Dcat\Admin\Admin::color()->primaryDarker() }};
-        font-weight: bold;
-    }
-    .grid-selector li .add {
-        visibility: hidden;
-    }
-    .grid-selector li:hover .add {
-        visibility: visible;
-    }
-    .grid-selector ul .clear {
-        visibility: hidden;
-    }
-    .grid-selector ul:hover .clear {
-        color: {{ \Dcat\Admin\Admin::color()->redDarker() }};
-        visibility: visible;
-    }
-</style>
-
 <div class="grid-selector">
     @foreach($self->all() as $column => $selector)
         <div class="wrap">
@@ -68,14 +13,14 @@
                                class="{{$active ? 'active' : ''}}">{{ $option }}</a>
                             @if(!$active && $selector['type'] == 'many')
                                 &nbsp;
-                                <a href="{{ $self->url($column, $value) }}" class="add"><i class="fa fa-plus-square-o"></i></a>
+                                <a href="{{ $self->url($column, $value) }}" class="add"><i class="feather icon-plus-square"></i></a>
                             @else
-                                <a style="visibility: hidden;"><i class="fa fa-plus-square-o"></i></a>
+                                <a style="visibility: hidden;"><i class="feather icon-plus-square"></i></a>
                             @endif
                         </li>
                     @endforeach
                     <li>
-                        <a href="{{ $self->url($column) }}" class="clear"><i class="fa fa-trash"></i></a>
+                        <a href="{{ $self->url($column) }}" class="clear"><i class="feather icon-trash-2"></i></a>
                     </li>
                 </ul>
             </div>

resources/views/grid/table2.blade.php

@@ -1,5 +1,5 @@
 
-<div class="dcat-box dt-bootstrap4">
+<div class="dcat-box data-list-view dt-bootstrap4">
 
     @if ($grid->allowToolbar())
         <div class="data-list-view-header">

src/Color.php

@@ -46,6 +46,8 @@ use Dcat\Admin\Support\Helper;
  * @method string dark90half(int $amt = 0)
  * @method string font(int $amt = 0)
  * @method string grayBg(int $amt = 0)
+ * @method string border(int $amt = 0)
+ * @method string inputBorder(int $amt = 0)
  */
 class Color
 {
@@ -128,6 +130,12 @@ class Color
 
         // 灰色背景
         'gray-bg' => '#f1f1f1',
+
+        // 边框颜色
+        'border' => '#ebeff2',
+
+        // 表单边框
+        'input-border' => '#d9d9d9',
     ];
 
     /**

src/Grid.php

@@ -568,7 +568,7 @@ class Grid
         }
 
         return <<<HTML
-<div class="box-header clearfix" style="border-top:1px solid #ebeff2">{$content}</div>
+<div class="card-header clearfix" style="border-bottom: 0;background: transparent">{$content}</div>
 HTML;
     }
 

src/Grid/Column/HasDisplayers.php

@@ -2,6 +2,7 @@
 
 namespace Dcat\Admin\Grid\Column;
 
+use Dcat\Admin\Admin;
 use Dcat\Admin\Grid;
 use Dcat\Admin\Grid\Column;
 use Dcat\Admin\Grid\Displayers\AbstractDisplayer;
@@ -61,14 +62,16 @@ trait HasDisplayers
      *
      * @return $this
      */
-    public function bold($color = 'text-80')
+    public function bold($color = null)
     {
+        $color = $color ?: Admin::color()->dark80();
+
         return $this->display(function ($value) use ($color) {
             if (! $value) {
                 return $value;
             }
 
-            return "<b class='$color'>$value</b>";
+            return "<b style='color: {$color}'>$value</b>";
         });
     }