jobdone-shared-files 0.0.1-beta.6 → 0.0.1-beta.60

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";
 
 
 // ====================================
@@ -142,6 +142,12 @@ a{
 // badge outline ------------------------------------------
 
 
+// input ------------------------------------------
+.form-control{
+    caret-color: $primary;
+}
+// input ------------------------------------------
+
 
 // checkbox / radio ------------------------------------------
 
@@ -395,6 +401,7 @@ th, td{
         --bs-table-bg: transparent;
         background-color: $table-danger-bg;
         color: var(--bs-danger);
+        box-shadow: none;
     }
 }
 
@@ -451,11 +458,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% {
@@ -573,6 +583,10 @@ th, td{
 .modal-md{
     min-width: 650px;
 }
+
+.modal-long-content .overflow-y-auto{
+    height: 75vh;
+}
 // modal ------------------------------------------
 
 
@@ -880,7 +894,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 +911,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 +927,7 @@ a.navbar-line-item{
 .mobile-forbidden{
     display: none;
 }
-@media (max-width: 992px) {
+@media only screen and (max-width: 992px) {
     body{
         overflow: hidden;
     }

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";