jobdone-shared-files 1.0.44 → 1.0.45

package/style/scss/Common/Tree.scss

@@ -0,0 +1,282 @@
+@import "../../../../bootstrap/scss/functions";
+@import "../Settings/bs-variables";
+@import "../../../../bootstrap/scss/mixins";
+@import "../Settings/custom-variables";
+@import "../Settings/Mixins";
+
+li {
+  list-style-type: none;
+}
+
+// 基本 sizes
+.tree-item {
+  .btn {
+    --bs-btn-padding-x: 0.75em;
+    --bs-btn-padding-y: 0.375em;
+    --bs-btn-font-size: 1em;
+  }
+
+  .card {
+    --bs-card-spacer-y: 1em;
+    --bs-card-spacer-x: 1em;
+    --bs-card-title-spacer-y: 0.5em;
+    --bs-card-cap-padding-y: 0.5em;
+    --bs-card-cap-padding-x: 1em;
+    --bs-card-img-overlay-padding: 1em;
+    --bs-card-group-margin: 0.75em;
+  }
+
+  .material-icons {
+    font-size: 1.5em;
+
+    &.icon-14 {
+      font-size: 0.875em;
+    }
+
+    &.icon-18 {
+      font-size: 1.125em;
+    }
+
+    &.icon-28 {
+      font-size: 1.75em;
+    }
+
+    &.icon-32 {
+      font-size: 2em;
+    }
+  }
+}
+
+// hover效果與優化
+// firefox 暫不支援 has
+.tree-item:has([data-bs-toggle="collapse"]:hover)+.collapse {
+  will-change: height;
+}
+
+.tree-item:hover>.card,
+.tree-item .card:focus-within {
+  background-color: lighten($primary, 32%);
+  border-color: rgba($primary, .4);
+}
+
+.tree-item {
+  .btn-title .material-icons:is(:empty):before {
+    content: "\e836";
+    display: inline-block;
+    font-family: inherit;
+  }
+
+  // active效果
+  &.active {
+    >.card {
+      background-color: lighten($primary, 30%);
+      border-color: rgba($primary, .5);
+    }
+
+    >.card .btn-title .material-icons:is(:empty):before {
+      content: "\e837";
+    }
+
+    .btn-title {
+      color: $primary;
+    }
+  }
+}
+
+.btn-title {
+  cursor: pointer;
+
+  .btn {
+    border-radius: 0;
+
+    &:focus,
+    &:active {
+      border-color: transparent;
+    }
+  }
+
+  .btn-text {
+    width: 100%;
+    text-align: left;
+    overflow-wrap: anywhere;
+  }
+}
+
+
+// 刪除子層標示 UI
+.tree-item:has(.btn.text-danger:hover) {
+  .card {
+    background-color: lighten($danger, 43%);
+    border-color: rgba($danger, .5);
+
+    .btn {
+      color: $danger;
+    }
+  }
+}
+
+// 刪除子層標示 UI (含子層)
+// .tree-child:has(.btn.text-danger:hover){
+//     .card, + .content-children .card{
+//         background-color: lighten( $danger, 43% );
+//         border-color: rgba( $danger, .5 );
+//         .btn{
+//             color: $danger;
+//         }
+//     }
+// }
+
+.btn-no-children {
+  cursor: auto;
+
+  &:focus {
+    border-color: transparent;
+  }
+}
+
+// 基本 style
+$card-margin: .2em;
+$line-padding: .7em;
+
+.tree-item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: $card-margin;
+
+  .card {
+    position: relative;
+    flex-grow: 1;
+    transition: $transition-base;
+  }
+}
+
+.col-action {
+  @include flex-center;
+  width: 2.8rem;
+}
+
+
+// 開合 style
+.btn[data-bs-toggle="collapse"] {
+  .material-icons {
+    transition: $transition-base;
+  }
+
+  &[aria-expanded="false"] .material-icons {
+    transform: rotate(-90deg);
+  }
+
+  &:disabled,
+  &.disabled {
+    border-color: transparent;
+  }
+}
+
+// 畫線 style
+.content-children {
+  padding-left: 1.5rem;
+  --tree-border-color: #fff;
+  position: relative;
+
+  &:before {
+    content: "";
+    position: absolute;
+    display: block;
+    left: -$line-padding;
+    bottom: 24px;
+    width: 1px;
+    height: 100%;
+    z-index: 1;
+    background-color: var(--tree-border-color);
+  }
+
+  // // line color
+  &:before,
+  .tree-item .card:before,
+  .tree-item .card:after {
+    background-color: var(--tree-border-color);
+  }
+}
+
+.tree-item {
+  &:last-child>.content-children:before {
+    display: none;
+  }
+
+  .card {
+    position: relative;
+
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      left: calc(-#{$line-padding} - #{$border-width});
+      z-index: 1;
+    }
+
+    &:before {
+      bottom: 50%;
+      width: 1px;
+      height: calc(100% + #{$card-margin}*2 + #{$border-width}*2);
+    }
+
+    &:after {
+      top: 0;
+      bottom: 0;
+      width: $line-padding;
+      height: 1px;
+      margin: auto;
+    }
+  }
+
+  &:nth-child(1)>.card:before {
+    height: calc(50% + #{$card-margin} + #{$border-width});
+  }
+}
+
+
+// 小版本
+.tree-item-sm {
+  >.card {
+    font-size: 86%;
+  }
+
+  .content-children {
+    padding-left: 1rem;
+  }
+
+  .content-children:before {
+    left: -10px;
+    bottom: 19px;
+  }
+}
+
+// .tree-item-sm + .content-children{
+//     > .children-box{
+//         padding-left: 1rem;
+//     }
+// }
+
+
+// 白背景版本
+.tree-item-in-white {
+  .content-children {
+    --tree-border-color: var(--bs-border-color);
+  }
+
+  .card {
+    --bs-card-bg: var(--gray-100);
+    --bs-card-border-color: var(--bs-border-color);
+  }
+
+  &:hover>.card,
+  .card:focus-within {
+    background-color: $white;
+  }
+
+  // active效果
+  &.active .card {
+    background-color: $white;
+  }
+}

package/style/scss/Common/filepond.scss

@@ -1,32 +1,32 @@
-@import "../../../../bootstrap/scss/functions";
-@import "../Settings/bs-variables";
-@import "../../../../bootstrap/scss/mixins";
-@import "../Settings/custom-variables";
-@import "../Settings/Mixins";
-
-.can-click{
-    cursor: pointer;
-}
-
-.filepond--root.filepond--hopper {
-    border: 1px dashed var(--bs-gray-400);
-    border-radius: 0.5em;
-    overflow: hidden;
-}
-
-.filepond--drop-label {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-}
-
-.filepond-label-box-cus {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-}
-
-.filepond--panel-root {
-    background-color: $blue-100 !important;
+@import "../../../../bootstrap/scss/functions";
+@import "../Settings/bs-variables";
+@import "../../../../bootstrap/scss/mixins";
+@import "../Settings/custom-variables";
+@import "../Settings/Mixins";
+
+.can-click{
+    cursor: pointer;
+}
+
+.filepond--root.filepond--hopper {
+    border: 1px dashed var(--bs-gray-400);
+    border-radius: 0.5em;
+    overflow: hidden;
+}
+
+.filepond--drop-label {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.filepond-label-box-cus {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.filepond--panel-root {
+    background-color: $blue-100 !important;
 }

package/style/scss/Common/thumbnail-group.scss

@@ -1,14 +1,14 @@
-
-.thumbnail-group{
-    $offset: .5rem;
-    position: relative;
-    display: inline-flex;
-    margin-right: $offset;
-    margin-bottom: $offset;
-    .thumbnail-pin{
-        position: absolute;
-        right: -$offset;
-        bottom: -$offset;
-        box-shadow: $box-shadow;
-    }
-}
+
+.thumbnail-group{
+    $offset: .5rem;
+    position: relative;
+    display: inline-flex;
+    margin-right: $offset;
+    margin-bottom: $offset;
+    .thumbnail-pin{
+        position: absolute;
+        right: -$offset;
+        bottom: -$offset;
+        box-shadow: $box-shadow;
+    }
+}