jobdone-shared-files 1.0.45 → 1.0.46

package/style/scss/Layout/LayoutInnerColumn.scss

@@ -1,264 +1,264 @@
-@import "../../../../bootstrap/scss/functions";
-@import "../Settings/bs-variables";
-@import "../../../../bootstrap/scss/mixins";
-@import "../Settings/custom-variables";
-@import "../Settings/Mixins";
-.main-content {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    .sidebar-content, .detail-content {
-        border-radius: 0.25rem;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-    .sidebar-content {
-        flex-basis: 250px;
-        margin-right: 0.75rem;
-        height: 100%;
-        
-    }
-    .detail-content {
-        flex-grow: 1;
-        flex-shrink: 1;
-        flex-basis: 500px;
-        .title-nav {
-            display: flex;
-            align-items: center;
-            position: sticky;
-            top: 0;
-            z-index: $zindex-sticky + 2;
-            height: 2.75rem;
-        }
-    }
-}
-
-.form-filter-input{
-    min-width: 18rem !important;
-}
-
-#col-main{
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    .main-content{
-        height: auto;
-        overflow: hidden;
-    }
-}
-
-.sidebar-content{
-    .thead-sidebar{
-        top: calc( -0.5rem - #{$border-width} );
-    }
-    .table {
-        tbody {
-            .th-num {
-                @include tableTdNum();
-            }
-            tr {
-                cursor: pointer;
-                &.is-edit{
-                    cursor: auto;
-                }
-                &.disabled, &:disabled{
-                    cursor: not-allowed;
-                }
-                &.disabled, &:disabled, &.is-edit{
-                    th, td{
-                        color: $gray-500;
-                    }
-                    &.clicked th, &.clicked td{
-                        background-color: $gray-200;
-                        color: $gray-600;
-                    }
-
-                    &.clicked td:nth-last-child(1){
-                        &:nth-last-child(1):after{
-                            background-color: $gray-600;
-                        }
-                    }
-                }
-            }
-            .clicked {
-                th,
-                td {
-                    background-color: rgba($primary, 0.1);
-                    color: $primary;
-                }
-                td:nth-last-child(1) {
-                    position: relative;
-                    &:after {
-                        content: "";
-                        position: absolute;
-                        height: 100%;
-                        width: 0.25rem;
-                        right: 0;
-                        top: 0;
-                        z-index: 1;
-                        background-color: $primary;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.fs-7 {
-    font-size: 0.85rem;
-}
-
-
-$w-shadow: 10px;
-
-.th-shadow-end, .th-shadow-start{
-    position: relative;
-    &:after {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: $w-shadow;
-        pointer-events: none;
-    }
-
-}
-.th-shadow-end{
-    &:after {
-        right: -$w-shadow;
-        background: linear-gradient(90deg, rgba($primary, 0.1) 0%, rgba($primary, 0) 100%);
-    }
-}
-.th-shadow-start{
-    &:after{
-        left: -$w-shadow;
-        background: linear-gradient(90deg, rgba($primary, 0) 0%, rgba($primary, 0.1) 100%);
-    }
-}
-
-
-.th-num, .th-code, .th-name, .th-end {
-    position: sticky;
-    z-index: $zindex-dropdown + 1;
-}
-
-.th-num {
-    left: 0;
-}
-
-.th-code {
-    left: 39px;
-}
-
-.th-name{
-    left: 166px;
-    > div{
-        display: flex;
-    }
-}
-
-.th-end{
-    right: 0;
-}
-
-.title-nav, .nav-paginate{
-    position: sticky;
-    top: 0;
-    left: 0;
-}
-
-.btn-more{
-    transition: .5s;
-}
-
-.text-title:not(.text-line-clamp-1){
-    + .btn-more{
-        transform: rotate(-180deg);
-    }
-}
-
-
-// TODO: 統一 UI
-$check-full-width: 23rem;
-.check-btn{
-    position: relative;
-    display: inline-block;
-    margin: 1rem;
-    .check-btn-label{
-        width: $check-full-width;
-        padding: 1rem 1rem;
-        color: var(--gray-500);
-        border: $border-width solid $border-color;
-        border-radius: $border-radius;
-        text-align: center;
-        cursor: pointer;
-        transition: $transition-base;
-        &:hover{
-            color: $info;
-            border-color: $info;
-            background-color: $table-hover-bg;
-        }
-        &.check-btn-label-lg{
-            padding: 2rem 1rem;
-            width: 10.5rem;
-        }
-    }
-    .material-icons{
-        font-size: 4rem;
-    }
-    input[type="checkbox"], input[type="radio"]{
-        position: absolute;
-        pointer-events: none;
-        @include size(0);
-        opacity: 0;
-        &:checked ~ .check-btn-label{
-            color: $primary;
-            border-color: $primary;
-            background-color: $table-hover-bg;
-
-        }
-    }
-}
-
-.list-group-flush{
-    --bs-list-group-bg: transparent;
-}
-
-
-
-
-.modal-belong-options{
-    .content-options, .content-items{
-        padding: .5rem;
-        background-color: $gray-600;
-    }
-    .content-options{
-        padding-bottom: 0;
-    }
-    .content-items{
-        $line-h: 1.5rem;
-        position: relative;
-        padding-left: 2.25rem;
-        .overflow-y-auto{
-            height: 62vh;
-        }
-        &:before, &:after{
-            content: "";
-            position: absolute;
-        }
-        &:before{
-            left: 1.5rem;
-            top: 0;
-            height: $line-h;
-            border-left: 4px solid $gray-500;
-        }
-        &:after{
-            left: 1.5rem;
-            top: $line-h;
-            width: .7rem;
-            border-top: 4px solid $gray-500;
-        }
-    }
+@import "../../../../bootstrap/scss/functions";
+@import "../Settings/bs-variables";
+@import "../../../../bootstrap/scss/mixins";
+@import "../Settings/custom-variables";
+@import "../Settings/Mixins";
+.main-content {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    .sidebar-content, .detail-content {
+        border-radius: 0.25rem;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .sidebar-content {
+        flex-basis: 250px;
+        margin-right: 0.75rem;
+        height: 100%;
+        
+    }
+    .detail-content {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 500px;
+        .title-nav {
+            display: flex;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: $zindex-sticky + 2;
+            height: 2.75rem;
+        }
+    }
+}
+
+.form-filter-input{
+    min-width: 18rem !important;
+}
+
+#col-main{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    .main-content{
+        height: auto;
+        overflow: hidden;
+    }
+}
+
+.sidebar-content{
+    .thead-sidebar{
+        top: calc( -0.5rem - #{$border-width} );
+    }
+    .table {
+        tbody {
+            .th-num {
+                @include tableTdNum();
+            }
+            tr {
+                cursor: pointer;
+                &.is-edit{
+                    cursor: auto;
+                }
+                &.disabled, &:disabled{
+                    cursor: not-allowed;
+                }
+                &.disabled, &:disabled, &.is-edit{
+                    th, td{
+                        color: $gray-500;
+                    }
+                    &.clicked th, &.clicked td{
+                        background-color: $gray-200;
+                        color: $gray-600;
+                    }
+
+                    &.clicked td:nth-last-child(1){
+                        &:nth-last-child(1):after{
+                            background-color: $gray-600;
+                        }
+                    }
+                }
+            }
+            .clicked {
+                th,
+                td {
+                    background-color: rgba($primary, 0.1);
+                    color: $primary;
+                }
+                td:nth-last-child(1) {
+                    position: relative;
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        height: 100%;
+                        width: 0.25rem;
+                        right: 0;
+                        top: 0;
+                        z-index: 1;
+                        background-color: $primary;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.fs-7 {
+    font-size: 0.85rem;
+}
+
+
+$w-shadow: 10px;
+
+.th-shadow-end, .th-shadow-start{
+    position: relative;
+    &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: $w-shadow;
+        pointer-events: none;
+    }
+
+}
+.th-shadow-end{
+    &:after {
+        right: -$w-shadow;
+        background: linear-gradient(90deg, rgba($primary, 0.1) 0%, rgba($primary, 0) 100%);
+    }
+}
+.th-shadow-start{
+    &:after{
+        left: -$w-shadow;
+        background: linear-gradient(90deg, rgba($primary, 0) 0%, rgba($primary, 0.1) 100%);
+    }
+}
+
+
+.th-num, .th-code, .th-name, .th-end {
+    position: sticky;
+    z-index: $zindex-dropdown + 1;
+}
+
+.th-num {
+    left: 0;
+}
+
+.th-code {
+    left: 39px;
+}
+
+.th-name{
+    left: 166px;
+    > div{
+        display: flex;
+    }
+}
+
+.th-end{
+    right: 0;
+}
+
+.title-nav, .nav-paginate{
+    position: sticky;
+    top: 0;
+    left: 0;
+}
+
+.btn-more{
+    transition: .5s;
+}
+
+.text-title:not(.text-line-clamp-1){
+    + .btn-more{
+        transform: rotate(-180deg);
+    }
+}
+
+
+// TODO: 統一 UI
+$check-full-width: 23rem;
+.check-btn{
+    position: relative;
+    display: inline-block;
+    margin: 1rem;
+    .check-btn-label{
+        width: $check-full-width;
+        padding: 1rem 1rem;
+        color: var(--gray-500);
+        border: $border-width solid $border-color;
+        border-radius: $border-radius;
+        text-align: center;
+        cursor: pointer;
+        transition: $transition-base;
+        &:hover{
+            color: $info;
+            border-color: $info;
+            background-color: $table-hover-bg;
+        }
+        &.check-btn-label-lg{
+            padding: 2rem 1rem;
+            width: 10.5rem;
+        }
+    }
+    .material-icons{
+        font-size: 4rem;
+    }
+    input[type="checkbox"], input[type="radio"]{
+        position: absolute;
+        pointer-events: none;
+        @include size(0);
+        opacity: 0;
+        &:checked ~ .check-btn-label{
+            color: $primary;
+            border-color: $primary;
+            background-color: $table-hover-bg;
+
+        }
+    }
+}
+
+.list-group-flush{
+    --bs-list-group-bg: transparent;
+}
+
+
+
+
+.modal-belong-options{
+    .content-options, .content-items{
+        padding: .5rem;
+        background-color: $gray-600;
+    }
+    .content-options{
+        padding-bottom: 0;
+    }
+    .content-items{
+        $line-h: 1.5rem;
+        position: relative;
+        padding-left: 2.25rem;
+        .overflow-y-auto{
+            height: 62vh;
+        }
+        &:before, &:after{
+            content: "";
+            position: absolute;
+        }
+        &:before{
+            left: 1.5rem;
+            top: 0;
+            height: $line-h;
+            border-left: 4px solid $gray-500;
+        }
+        &:after{
+            left: 1.5rem;
+            top: $line-h;
+            width: .7rem;
+            border-top: 4px solid $gray-500;
+        }
+    }
 }