jobdone-shared-files 1.0.2 → 1.0.4

package/style/scss/Layout/LayoutMobile.scss

@@ -1,207 +1,207 @@
-@import "../../../../bootstrap/scss/functions";
-@import "../Settings/bs-variables";
-@import "../../../../bootstrap/scss/mixins";
-@import "../Settings/custom-variables";
-@import "../Settings/Mixins";
-@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;
-        }
-    }
+@import "../../../../bootstrap/scss/functions";
+@import "../Settings/bs-variables";
+@import "../../../../bootstrap/scss/mixins";
+@import "../Settings/custom-variables";
+@import "../Settings/Mixins";
+@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,126 @@
-@import "../../../../bootstrap/scss/functions";
-@import "../Settings/bs-variables";
-@import "../../../../bootstrap/scss/mixins";
-@import "../Settings/custom-variables";
-@import "../Settings/Mixins";
-
-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;
-}
+@import "../../../../bootstrap/scss/functions";
+@import "../Settings/bs-variables";
+@import "../../../../bootstrap/scss/mixins";
+@import "../Settings/custom-variables";
+@import "../Settings/Mixins";
+
+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;
+}