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

package/style/scss/Layout/LayoutProject.scss

@@ -0,0 +1,124 @@
+@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.75rem;
+    z-index: 10;
+}

package/style/scss/Layout/LayoutSinglePage.scss

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

package/style/scss/Layout/LayoutTwoColumn.scss

@@ -0,0 +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 開關 ------------------------------------------

package/style/scss/Settings/_custom-variables.scss

@@ -4,4 +4,7 @@ $gradient-blue-light: linear-gradient(295deg, rgba(#4483E0, .1) 13.42%, rgba(#C6
 $primary-bg-light: rgba(var(--bs-link-color-rgb), .07);
 $primary-sub-highlight: rgba(var(--bs-link-color-rgb), .5);
 
-$zindex-max: 2000 !default;
+$zindex-max: 2000 !default;
+
+
+$table-danger-bg: lighten($danger, 42%);