nestable 样式优化

update

resources/assets/dcat/sass/_variables.scss

@@ -51,18 +51,23 @@ $primary-linear-gradient: linear-gradient(118deg, rgba($primary, 1), rgba($prima
 // 字体颜色
 $font-color: #414750;
 
+// body背景颜色
+//$body-background: #f9fafc;
+$body-background: $dark30;
+
 
 // 常用阴影颜色
 $shadow: 0 2px 4px 0 rgba(0,0,0,.08);
 $shadow-100: 0 3px 1px -2px rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.05), 0 1px 5px 1px rgba(0,0,0,.05);
 $shadow-200: 0 3px 1px -2px rgba(0,0,0,.1), 0 2px 2px 0 rgba(0,0,0,.1), 0 1px 5px 1px rgba(0,0,0,.1);
 
+// 按钮阴影颜色
 $btn-shadow: $shadow-100;
 $btn-shadow-hover: $shadow-200;
-
 $btn-group-btn-shadow: 0 2px 0 0 rgba(0,0,0,.08);
 
+// 常用边框颜色
+$border-color: #eee;
 
-// body背景颜色
-//$body-background: #f9fafc;
-$body-background: $dark30;
+// 常用分割线颜色
+$divider-color: #f4f4f4;

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

@@ -1,3 +1,10 @@
 .card {
   box-shadow: $shadow;
-}
+}
+
+.card.dcat-box {
+  .card-header {
+    border-bottom: 1px solid $divider-color;
+    padding-bottom: 1rem;
+  }
+}

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

@@ -1,3 +1,7 @@
+.dd {
+  margin: 0!important;
+}
+
 .dd-item > button:before {
   font-family: "feather";
   content: "\e844"!important;
@@ -6,4 +10,9 @@
 
 .dd-item > button[data-action="collapse"]:before {
   content: "\E842"!important;
+}
+
+.dd-handle {
+  border: 1px solid $border-color!important;
+  border-radius: .2rem!important;;
 }

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

@@ -2033,6 +2033,15 @@ table.data-thumb-view.dataTable tbody tr:hover {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
 }
 
+.card.dcat-box .card-header {
+  border-bottom: 1px solid #f4f4f4;
+  padding-bottom: 1rem;
+}
+
+.dd {
+  margin: 0 !important;
+}
+
 .dd-item > button:before {
   font-family: "feather";
   content: "\E844" !important;
@@ -2043,6 +2052,11 @@ table.data-thumb-view.dataTable tbody tr:hover {
   content: "\E842" !important;
 }
 
+.dd-handle {
+  border: 1px solid #eee !important;
+  border-radius: 0.2rem !important;
+}
+
 .layui-layer {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2) !important;
 }

resources/views/tree.blade.php

@@ -1,4 +1,4 @@
-<div class="card-header">
+<div class="card-header pb-1">
 
     <div>
         <div class="btn-group" style="margin-right:3px">
@@ -36,7 +36,7 @@
 </div>
 
 <div class="card-body table-responsive">
-    <div class="dd" id="{{ $id }}" style="margin:18px">
+    <div class="dd" id="{{ $id }}">
         <ol class="dd-list">
             @if($items)
                 @foreach($items as $branch)

resources/views/tree/branch.blade.php

@@ -3,7 +3,7 @@
         {!! $branchCallback($branch) !!}
         <span class="pull-right dd-nodrag">
             @if($useEdit)
-            <a href="{{ $path }}/{{ $branch[$keyName] }}/edit"><i class="feather icon-edit"></i>&nbsp;</a>
+            <a href="{{ $path }}/{{ $branch[$keyName] }}/edit"><i class="feather icon-edit-1"></i>&nbsp;</a>
             @endif
 
             @if($useQuickEdit)

src/Grid/Displayers/Actions.php

@@ -243,7 +243,7 @@ EOT;
     {
         return <<<EOT
 <a href="{$this->resource()}/{$this->getKey()}/edit">
-    <i class="feather icon-edit grid-action-icon"></i>
+    <i class="feather icon-edit-1 grid-action-icon"></i>
 </a>&nbsp;
 EOT;
     }