jobdone-shared-files 0.0.1-beta.7 → 0.0.1-beta.71

package/style/scss/Common/SelectableTable.scss

@@ -0,0 +1,31 @@
+@import "../Settings/basic-import";
+
+th.bg-secondary{
+    position: relative;
+    &:after{
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -$border-width;
+        height: $border-width;
+        width: 100%;
+        background-color: $secondary;
+    }
+}
+
+.table{
+    background-color: $white;
+}
+
+tr:has(input[type="checkbox"]:checked) > td:not([scope="col"]){
+    --bs-table-accent-bg: transparent;
+    --bs-table-bg: rgba(var(--bs-primary-rgb), .1);
+    color: var(--bs-table-hover-color);
+}
+
+.td-check, .td-avatar-sm{
+    width: 2rem;
+}
+.td-avatar-md{
+    width: 3rem;
+}

package/style/scss/Common/filepond.scss

@@ -0,0 +1,28 @@
+@import "../Settings/basic-import";
+
+.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

@@ -0,0 +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;
+    }
+}

package/style/scss/Layout/LayoutBase.scss

@@ -3,9 +3,9 @@
 // ====================================
 
 // Custom Bootstrap
-@import "../Bootstrap/functions";
+@import "../../../../bootstrap/scss/functions";
 @import "../Settings/bs-variables";
-@import "../Bootstrap/bootstrap.scss";
+@import "../../../../bootstrap/scss/bootstrap.scss";
 
 
 // ====================================
@@ -109,6 +109,14 @@ a{
     }
 }
 
+.text-pre-wrap{
+    white-space: pre-wrap;
+}
+
+.fs-min{
+    font-size: 12px;
+}
+
 .text-overflow{
     @include text-overflow();
 }
@@ -128,6 +136,18 @@ a{
 // text / link ------------------------------------------
 
 
+// border ------------------------------------------
+.hover-border{
+    transition: $transition-base;
+    &:hover{
+        box-shadow: $focus-ring-box-shadow;
+    }
+}
+.active-border{
+    box-shadow: $focus-ring-box-shadow;
+}
+// border ------------------------------------------
+
 
 // badge outline ------------------------------------------
 
@@ -142,6 +162,12 @@ a{
 // badge outline ------------------------------------------
 
 
+// input ------------------------------------------
+.form-control{
+    caret-color: $primary;
+}
+// input ------------------------------------------
+
 
 // checkbox / radio ------------------------------------------
 
@@ -395,6 +421,7 @@ th, td{
         --bs-table-bg: transparent;
         background-color: $table-danger-bg;
         color: var(--bs-danger);
+        box-shadow: none;
     }
 }
 
@@ -451,11 +478,14 @@ th, td{
     }
 }
 
-// @property --rotate {
-//     syntax: "<angle>";
-//     initial-value: 132deg;
-//     inherits: false;
-// }
+.btn-link-light-bg {
+    text-decoration: none;
+    &:hover {
+        color: var(--bs-btn-color);
+        background-color: rgba(var(--bs-link-color-rgb), .1);
+    }
+}
+
 
 @keyframes gradient-position {
     0% {
@@ -567,16 +597,27 @@ th, td{
 
 // modal ------------------------------------------
 .modal{
-    backdrop-filter: blur(2px);
+    backdrop-filter: var(--backdrop-blur);
 }
 
 .modal-md{
     min-width: 650px;
 }
+
+.modal-long-content .overflow-y-auto{
+    height: 75vh;
+}
 // modal ------------------------------------------
 
 
 // offcanvas ------------------------------------------
+.offcanvas-backdrop{
+    background-color: rgba($offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+    &.show{
+        backdrop-filter: var(--backdrop-blur);
+        opacity: 1;
+    }
+}
 .offcanvas{
     &-md-size{
         --bs-offcanvas-width: 550px;
@@ -853,8 +894,9 @@ a.navbar-line-item{
 
 
 .navbar[data-bs-theme="dark"]{
+    --dark-theme-primary: #bec9ff;
     .navbar-line-item.dropdown:not(.active) .dropdown-link{
-        color: lighten($primary, 15%);
+        color: var(--dark-theme-primary);
     }
     .navbar-nav .show > .nav-link, .navbar-nav .nav-link.active{
         &, a{
@@ -862,7 +904,7 @@ a.navbar-line-item{
         }
     }
     .navbar-line-item:before{
-        border-bottom-color: lighten($primary, 15%);
+        border-bottom-color: var(--dark-theme-primary);
     }
     .navbar-line-item.dropdown:not(.active) .dropdown-link,
     .navbar-line-item:before{
@@ -880,7 +922,7 @@ a.navbar-line-item{
 .w-66{
     width: 66.66%;
 }
-@for $i from 1 through 10 {
+@for $i from 1 through 25 {
     .w-#{$i}rem {
         width: #{$i}rem;
     }
@@ -897,7 +939,8 @@ a.navbar-line-item{
         opacity: .7;
     }
     .content-img > .material-icons{
-        font-size: 7rem;
+        font-size: 6rem;
+        margin-bottom: 0.5rem;
         opacity: .5;
     }
     p{
@@ -912,7 +955,7 @@ a.navbar-line-item{
 .mobile-forbidden{
     display: none;
 }
-@media (max-width: 992px) {
+@media only screen and (max-width: 992px) {
     body{
         overflow: hidden;
     }
@@ -936,4 +979,37 @@ a.navbar-line-item{
         }
     }
 }
-// 暫定：螢幕寬度小於 992px 不可使用 ------------------------------------------
+// 暫定：螢幕寬度小於 992px 不可使用 ------------------------------------------
+
+
+
+// sweet alert ------------------------------------------
+.swal2-container{
+    &.swal2-backdrop-show, &.swal2-noanimation{
+        backdrop-filter: var(--backdrop-blur);
+    }
+}
+
+div:where(.swal2-container){
+    .swal2-html-container{
+        font-size: 1rem !important;
+        color: var(--bs-body-color) !important;
+    }
+    h2:where(.swal2-title){
+        font-size: 1.5rem !important;
+        color: var(--bs-emphasis-color) !important;
+    }
+    .swal2-actions{
+        flex-direction: row-reverse;
+        width: 100%;
+    }
+    button:where(.swal2-styled){
+        margin-left: .5rem !important;
+        margin-right: .5rem !important;
+    }
+    
+    button:where(.swal2-styled).swal2-cancel{
+        background-color: $secondary !important;
+    }
+}
+// sweet alert ------------------------------------------

package/style/scss/Layout/LayoutMobile.scss

@@ -0,0 +1,203 @@
+@import "../Settings/basic-import";
+@import "../Common/Animation.scss";
+@import "../Settings/MobileVariables";
+
+@media only screen and (max-width: 768px) {
+    // default layout ---------------------------------------------
+    
+    html, body, #app{
+        min-height: 100%;
+    }
+    
+    html{
+        position: relative;
+        &:before{
+            content: "";
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: -1;
+            background: $gradient-bg;
+            background-repeat: no-repeat;
+            pointer-events: none;
+        }
+    }
+    
+    body{
+        background: transparent;
+        scroll-behavior: smooth;
+    }
+    
+    #app{
+        width: 100%;
+        max-width: 767px;
+        transition: 1s;
+    }
+    
+    // background ---------------------------------------------
+    
+    .bg-gradient-main, .bg-gradient-main-translucent{
+        color: rgba( $white, .7 );
+        .text-emphasis{
+            color: $white;
+        }
+    }
+    
+    .bg-gradient-main{
+        background: $gradient-main;
+    }
+    
+    .bg-gradient-main-translucent{
+        background: $gradient-main-translucent;
+        backdrop-filter: $backdrop-blur-base;
+    }
+    
+    .bg-dark-translucent{
+        background-color: rgba( 0, 22, 44, .8 );
+        backdrop-filter: $backdrop-blur-base;
+    }
+    
+    .bg-light-translucent{
+        background-color: rgba( $white, .5 );
+        backdrop-filter: $backdrop-blur-base;
+    }
+    
+    .bg-extend{
+        position: relative;
+        &:before{
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: -1;
+            height: 3rem;
+        }
+    }
+    
+    .bg-extend-gradient-main-translucent{
+        &:before{
+            background: $gradient-main-translucent;
+        }
+    }
+    
+    // navbar ---------------------------------------------
+    
+    .navbar-main{
+        color: $gray-500;
+    }
+    
+    // width ---------------------------------------------
+    
+    .w-85{
+        width: 85% !important;
+    }
+    
+    .w-min-3rem{
+        min-width: 3rem;
+    }
+    
+    // font size ---------------------------------------------
+    
+    .fs-min{
+        font-size: 12px;
+    }
+    
+    // button ---------------------------------------------
+    
+    .btn-glow{
+        background-image: $gradient-glow;
+    }
+    
+    .btn-glow-2end{
+        --bs-btn-color: #fff;
+        --bs-btn-hover-color: #fff;
+        --bs-btn-border-color: rgba(255, 255, 255, 0.5);
+        --bs-btn-hover-border-color: rgba(255, 255, 255, 0.3);
+        background: $gradient-glow-2end;
+    }
+    
+    // input ---------------------------------------------
+    
+    
+    // input-group-icon
+    .input-group-icon{
+        $padding-left: 2rem;
+    
+        position: relative;
+        .material-icons, .input-group-placeholder{
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 6;
+        }
+        .material-icons{
+            left: 0.6rem;
+        }
+        .input-group-placeholder{
+            left: $padding-left;
+        }
+        .form-control{
+            &:-webkit-date-and-time-value{
+                text-align: left;
+            }
+            &:nth-child(1){
+                padding-left: $padding-left;
+            }
+        }
+    }
+    
+    
+    // animation ---------------------------------------------
+    
+    .fadeIn{
+        animation-name: fadeIn;
+        animation-duration: 1s;
+    }
+    
+    // image ---------------------------------------------
+    
+    .thumbnail-circle{
+        border: 3px solid rgba($white, .3);
+        border-radius: 50%;
+        &-sm{
+            border-width: 2px;
+        }
+    }
+    
+    
+    // scroll ---------------------------------------------
+    
+    .overflow-y-auto{
+        overscroll-behavior: contain;
+    }
+    
+    .body-opened-modal{
+        // position: fixed;
+        overflow: hidden;
+        .bg-gradient-main-translucent, .bg-dark-translucent, .bg-light-translucent{
+            backdrop-filter: unset;
+        }
+    }
+    
+    .backdrop-filter-none{
+        backdrop-filter: unset;
+    }
+    
+    // list-group-item ---------------------------------------------
+    
+    .list-group-item{
+        outline: none !important;
+    }
+    
+    
+    // reset ---------------------------------------------
+    
+    @media only screen and (max-width: 992px) {
+        body{
+            overflow: visible;
+        }
+    }
+}

package/style/scss/Layout/LayoutProject.scss

@@ -115,10 +115,8 @@ $aside-transition: .5s;
     }
 }
 
-
-
 .thead-sticky{
     position: sticky;
-    top: 2.75rem;
-    z-index: 10;
-}
+    top: 2.7rem;
+    z-index: $zindex-dropdown + 2;
+}

package/style/scss/Layout/LayoutTwoColumn.scss

@@ -1,14 +1,14 @@
 @import "../Settings/basic-import";
-html, body, #app,
+html, body, #app.layout-two-column,
 #col-aside, #col-main{
     height: 100%;
 }
 
-body, #app{
+body, #app.layout-two-column{
     overflow: hidden;
 }
 
-#app{
+#app.layout-two-column{
     display: flex;
     flex-direction: row-reverse;
 }

package/style/scss/Settings/_Mixins.scss

@@ -215,6 +215,7 @@
     vertical-align: middle !important;
 }
 
+// TODO: 待刪除，已改成 LayoutBase 的 .btn-link-light-bg
 @mixin linkBtn() {
     text-decoration: none;
     letter-spacing: 0.5px;

package/style/scss/Settings/_MobileVariables.scss

@@ -0,0 +1,12 @@
+$safe-area-inset-top: env(safe-area-inset-top);
+$safe-area-inset-bottom: env(safe-area-inset-bottom);
+
+$gradient-bg: linear-gradient(138deg, rgba(100, 148, 241, 0.05) 26.2%, rgba(165, 185, 255, 0.29) 88.06%), var(--gray-000);
+
+$gradient-main: linear-gradient(270deg, #647AF1 33.33%, #0084E4 100%);
+$gradient-main-translucent: linear-gradient(270deg, rgba(63, 90, 233, 0.8) 33.33%, rgba(0, 130, 220, 0.8) 100%);
+
+$gradient-glow: linear-gradient(131deg, rgba(17, 198, 245, 0.55) 0%, rgba(24, 196, 255, 0.00) 100%);
+$gradient-glow-2end: linear-gradient(131deg, rgba(17, 198, 245, 0.20) 0%, rgba(24, 196, 255, 0.00) 45.31%, rgba(17, 198, 245, 0.20) 100%);
+
+$backdrop-blur-base: blur(5px);

package/style/scss/Settings/_basic-import.scss

@@ -1,5 +1,6 @@
-@import "../Bootstrap/functions";
-@import "../Bootstrap/mixins";
+@import "../../../../bootstrap/scss/functions";
+@import "../../../../bootstrap/scss/mixins";
 @import "./bs-variables";
 @import "./custom-variables";
+@import "./color-mode";
 @import "./Mixins";