jobdone-shared-files 0.0.1-beta.8 → 0.0.1-beta.80

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

@@ -1,126 +1,122 @@
-@import "../Settings/basic-import";
-
-html, body, #app{
-    height: 100%;
-}
-
-#app{
-    display: flex;
-    flex-direction: column;
-}
-
-body{
-    background-color: var(--gray-300);
-}
-
-
-
-// 兩欄開合 UI
-
-#col-aside:has(label[for="toggle-aside"]:hover){
-    will-change: margin-left;
-    ~ #col-main{
-        will-change: width;
-    }
-}
-
-
-.content-2-column{
-    position: relative;
-    display: flex;
-    flex-grow: 1;
-    overflow: hidden;
-    z-index: 1;
-}
-
-#col-aside, #col-main{
-    height: 100%;
-    overflow-y: auto;
-    @include scrollbar();
-}
-
-
-$aside-w: 16.25rem;
-$aside-close-w: 2.5rem;
-$aside-transition: .5s;
-#col-aside{
-    @include solid-size($aside-w, auto);
-    background-color: var(--gray-100);
-    transition: $aside-transition;
-}
-
-#col-main{
-    flex-grow: 1;
-    transition: $aside-transition;
-}
-
-.toggler-open{
-    padding: 0.5rem;
-    background-color: var(--gray-200);
-    > label[for="toggle-aside"]{
-        cursor: pointer;
-    }
-    > label[for="toggle-aside"]:hover{
-        .material-icons{
-            color: var(--bs-primary);
-        }
-        .toggler-open-text{
-            color: rgba(var(--bs-link-color-rgb), 0.5);
-        }
-    }
-
-    .toggler-open-text, .material-icons{
-        transition: $transition-base;
-    }
-    .material-icons{
-        color: var(--gray-600);
-        margin-right: 0.2rem;
-        margin-left: 0.5rem;
-    }
-}
-
-.toggler-text{
-    color: var(--gray-500);
-}
-
-.content-menu{
-    position: relative;
-}
-
-.toggler-close{
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: $aside-close-w;
-    text-align: center;
-    padding: .5rem;
-    line-height: 1.25;
-    cursor: pointer;
-    transition: $aside-transition;
-    .toggler-close-text:hover{
-        color: rgba(var(--bs-link-color-rgb), 0.5);
-    }
-}
-
-#toggle-aside:checked{
-    ~ #col-aside{
-        margin-left: -$aside-w + $aside-close-w;
-        .toggler-open-text, nav{
-            display: none;
-        }
-        .toggler-close{
-            display: block;
-        }
-    }
-}
-
-.thead-sticky{
-    position: sticky;
-    top: 2.7rem;
-    z-index: 10;
-}
-
-.modal-long-content .overflow-y-auto{
-    height: 75vh;
-}
+@import "../Settings/basic-import";
+
+html, body, #app{
+    height: 100%;
+}
+
+#app{
+    display: flex;
+    flex-direction: column;
+}
+
+body{
+    background-color: var(--gray-300);
+}
+
+
+
+// 兩欄開合 UI
+
+#col-aside:has(label[for="toggle-aside"]:hover){
+    will-change: margin-left;
+    ~ #col-main{
+        will-change: width;
+    }
+}
+
+
+.content-2-column{
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+    z-index: 1;
+}
+
+#col-aside, #col-main{
+    height: 100%;
+    overflow-y: auto;
+    @include scrollbar();
+}
+
+
+$aside-w: 16.25rem;
+$aside-close-w: 2.5rem;
+$aside-transition: .5s;
+#col-aside{
+    @include solid-size($aside-w, auto);
+    background-color: var(--gray-100);
+    transition: $aside-transition;
+}
+
+#col-main{
+    flex-grow: 1;
+    transition: $aside-transition;
+}
+
+.toggler-open{
+    padding: 0.5rem;
+    background-color: var(--gray-200);
+    > label[for="toggle-aside"]{
+        cursor: pointer;
+    }
+    > label[for="toggle-aside"]:hover{
+        .material-icons{
+            color: var(--bs-primary);
+        }
+        .toggler-open-text{
+            color: rgba(var(--bs-link-color-rgb), 0.5);
+        }
+    }
+
+    .toggler-open-text, .material-icons{
+        transition: $transition-base;
+    }
+    .material-icons{
+        color: var(--gray-600);
+        margin-right: 0.2rem;
+        margin-left: 0.5rem;
+    }
+}
+
+.toggler-text{
+    color: var(--gray-500);
+}
+
+.content-menu{
+    position: relative;
+}
+
+.toggler-close{
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: $aside-close-w;
+    text-align: center;
+    padding: .5rem;
+    line-height: 1.25;
+    cursor: pointer;
+    transition: $aside-transition;
+    .toggler-close-text:hover{
+        color: rgba(var(--bs-link-color-rgb), 0.5);
+    }
+}
+
+#toggle-aside:checked{
+    ~ #col-aside{
+        margin-left: -$aside-w + $aside-close-w;
+        .toggler-open-text, nav{
+            display: none;
+        }
+        .toggler-close{
+            display: block;
+        }
+    }
+}
+
+.thead-sticky{
+    position: sticky;
+    top: 2.7rem;
+    z-index: $zindex-dropdown + 2;
+}

package/style/scss/Layout/LayoutSinglePage.scss

@@ -1,14 +1,14 @@
-@import "../Settings/basic-import";
-html{
-    background:
-        linear-gradient(138deg, rgba(100, 148, 241, 0.05) 26.2%, rgba(165, 185, 255, 0.29) 88.06%),
-        var(--gray-000);
-    background-repeat: no-repeat;
-    min-height: 100%;
-}
-
-body{
-    @include flex-center();
-    background: transparent;
-    min-height: 100%;
+@import "../Settings/basic-import";
+html{
+    background:
+        linear-gradient(138deg, rgba(100, 148, 241, 0.05) 26.2%, rgba(165, 185, 255, 0.29) 88.06%),
+        var(--gray-000);
+    background-repeat: no-repeat;
+    min-height: 100%;
+}
+
+body{
+    @include flex-center();
+    background: transparent;
+    min-height: 100%;
 }

package/style/scss/Layout/LayoutTwoColumn.scss

@@ -1,56 +1,56 @@
-@import "../Settings/basic-import";
-html, body, #app,
-#col-aside, #col-main{
-    height: 100%;
-}
-
-body, #app{
-    overflow: hidden;
-}
-
-#app{
-    display: flex;
-    flex-direction: row-reverse;
-}
-
-#col-aside, #col-main{
-    overflow: hidden;
-    transition: all .5s ease-in-out;
-}
-
-
-$aside-w: 18rem;
-#col-aside{
-    display: flex;
-    flex-direction: column;
-    @include solid-size($aside-w, auto);
-    background-color: var(--gray-200);
-    border-right: $border-width solid var(--bs-border-color);
-}
-
-#col-main{
-    flex-grow: 1;
-    background-color: var(--gray-400);
-    @include scrollbar();
-}
-
-
-// navbar 開關 ------------------------------------------
-#col-main:has(label[for="toggle-aside"]:hover){
-    will-change: width;
-    ~ #col-aside{
-        will-change: margin-left;
-    }
-}
-
-#toggle-aside:checked{
-    ~ #col-aside{
-        margin-left: -$aside-w;
-    }
-    ~ #col-main{
-        label[for="toggle-aside"] .material-icons{
-            transform: rotate(180deg);
-        }
-    }
-}
-// navbar 開關 ------------------------------------------
+@import "../Settings/basic-import";
+html, body, #app.layout-two-column,
+#col-aside, #col-main{
+    height: 100%;
+}
+
+body, #app.layout-two-column{
+    overflow: hidden;
+}
+
+#app.layout-two-column{
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+#col-aside, #col-main{
+    overflow: hidden;
+    transition: all .5s ease-in-out;
+}
+
+
+$aside-w: 18rem;
+#col-aside{
+    display: flex;
+    flex-direction: column;
+    @include solid-size($aside-w, auto);
+    background-color: var(--gray-200);
+    border-right: $border-width solid var(--bs-border-color);
+}
+
+#col-main{
+    flex-grow: 1;
+    background-color: var(--gray-400);
+    @include scrollbar();
+}
+
+
+// navbar 開關 ------------------------------------------
+#col-main:has(label[for="toggle-aside"]:hover){
+    will-change: width;
+    ~ #col-aside{
+        will-change: margin-left;
+    }
+}
+
+#toggle-aside:checked{
+    ~ #col-aside{
+        margin-left: -$aside-w;
+    }
+    ~ #col-main{
+        label[for="toggle-aside"] .material-icons{
+            transform: rotate(180deg);
+        }
+    }
+}
+// navbar 開關 ------------------------------------------