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

package/style/scss/Layout/LayoutBase.scss

@@ -0,0 +1,939 @@
+// ====================================
+// Plugin
+// ====================================
+
+// Custom Bootstrap
+@import "../Bootstrap/functions";
+@import "../Settings/bs-variables";
+@import "../Bootstrap/bootstrap.scss";
+
+
+// ====================================
+// Helpers
+// ====================================
+
+// Mixins
+@import "../Settings/Mixins";
+
+
+// ====================================
+// Custom Style
+// ====================================
+
+@import "../Settings/color-mode";
+@import "../Settings/custom-variables";
+
+
+@mixin gradient-bg(){
+    &:before{
+        content: "";
+        display: block;
+        @include position-center();
+        z-index: 0;
+        background: $gradient-blue-light;
+        pointer-events: none;
+        transition: $transition-base;
+    }
+}
+
+@mixin gradient-bg-hover-to-show($opacity: 1){
+    @include gradient-bg();
+    &:before{ opacity: 0; }
+    &:hover:before{ opacity: $opacity; }
+}
+
+// general ------------------------------------------
+[v-cloak]{
+    display: none !important;
+}
+
+body,
+.overflow-auto, .overflow-scroll,
+.overflow-y-auto, .overflow-y-scroll,
+.offcanvas-body, textarea{
+    @include scrollbar();
+}
+
+.overflow-x-auto, .overflow-x-scroll, .scrollbar-sm, .table-responsive{
+    @include scrollbar();
+    --scrollbar-width: 6px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.scrollbar-gutter-stable{
+    // Safari 暫不支援
+    scrollbar-gutter: stable;
+}
+
+body{
+    background-color: var(--gray-200);
+    --maz-color-primary: var(--bs-primary);
+    --maz-color-secondary: var(--bs-secondary);
+    --maz-color-info: var(--bs-info);
+    --maz-color-success: var(--bs-success);
+    --maz-color-warning: var(--bs-warning);
+    --maz-color-danger: var(--bs-danger);
+    --maz-color-bg: var(--bs-body-bg);
+    --maz-color-text: var(--bs-body-color);
+    --maz-color-muted: var(--bs-secondary-color);
+}
+
+ul, ol{
+    &.list-reset{
+        list-style-type: none;
+        padding-left: 0;
+    }
+}
+// general ------------------------------------------
+
+
+// text / link ------------------------------------------
+a{
+    text-decoration: none;
+    // 如果需要底線使用 <u></u> tag
+    transition: $transition-base;
+    &.a-reset-color{
+        color: inherit;
+    }
+    &.a-hover-gradient{
+        position: relative;
+        @include gradient-bg-hover-to-show();
+    }
+}
+
+.text-link{
+    color: var(--bs-link-color);
+    &:hover{
+        color: var(--bs-link-hover-color);
+    }
+}
+
+.text-overflow{
+    @include text-overflow();
+}
+
+@for $i from 1 through 5 {
+    .text-line-clamp-#{$i} {
+        @include text-line-clamp(#{$i});
+    }
+}
+
+@for $i from 1 through 5 {
+    .letter-spacing-#{$i} {
+        letter-spacing: #{$i}px;
+    }
+}
+
+// text / link ------------------------------------------
+
+
+
+// badge outline ------------------------------------------
+
+@each $color, $value in $colors {
+    .badge-outline-#{$color}{
+        color: $value;
+        border: $border-width solid rgba($value, .5);
+        background-color: rgba($value, .1);
+    }
+}
+
+// badge outline ------------------------------------------
+
+
+
+// checkbox / radio ------------------------------------------
+
+.check-label{
+    cursor: pointer;
+    &, &:before, span{
+        vertical-align: middle;
+        transition: $transition-base;
+    }
+    &:before{
+        content: "check_box_outline_blank";
+        display: inline-block;
+        margin-right: .1em;
+        color: var(--gray-500);
+        font-family: 'Material Icons';
+        font-size: 120%;
+        line-height: inherit;
+        white-space: nowrap;
+        -webkit-font-feature-settings: 'liga';
+        -webkit-font-smoothing: antialiased;
+    }
+    &:not(.badge):hover{
+        &, &:before, span{
+            color: $primary;
+        }
+    }
+}
+
+.check-group{
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    &:not(:last-child){
+        margin-right: 1em;
+    }
+    > input[type="checkbox"], > input[type="radio"]{
+        position: absolute;
+        opacity: 0;
+        pointer-events: none;
+        &:checked ~ .check-label:before{
+            color: $primary;
+        }
+        // disabled style
+        &:disabled ~ .check-label{
+            cursor: not-allowed;
+            span, &:hover span,
+            &:before, &:hover &:before{
+                color: var(--gray-500);
+            }
+        }
+        &:checked:disabled ~ .check-label{
+            &:before, &:hover &:before{
+                color: var(--gray-600);
+            }
+        }
+    }
+    > input[type="checkbox"]         ~ .check-label:before{ content: "check_box_outline_blank"; }
+    > input[type="radio"]            ~ .check-label:before{ content: "radio_button_unchecked"; }
+    > input[type="checkbox"]:checked ~ .check-label:before{ content: "check_box"; }
+    > input[type="radio"]:checked    ~ .check-label:before{ content: "radio_button_checked"; }
+}
+// checkbox / radio ------------------------------------------
+
+// star ------------------------------------------
+.check-star-group{
+    > input[type="checkbox"], > input[type="radio"]{
+        ~ .check-label:before{
+            content: "star_border";
+            font-size: 1.5em;
+        }
+        ~ .check-label:hover:before{
+            color: $warning;
+        }
+        &:checked ~ .check-label:before{
+            content: "star";
+            color: $warning;
+        }
+    }
+}
+// star ------------------------------------------
+
+
+// switch ------------------------------------------
+
+:root{
+    --switch-w: 24px;
+    --switch-h: 12px;
+    --switch-padding: 2px;
+    --switch-ball-size: calc( var(--switch-h) - var(--switch-padding)*2);
+
+}
+.check-switch-group{
+    // reset
+    .check-label:before{ content: ""; }
+    .check-label .switch-item{
+        position: relative;
+        display: inline-block;
+        width: var(--switch-w);
+        height: var(--switch-h);
+        border-radius: var(--switch-h);
+        background-color: var(--gray-500);
+        vertical-align: middle;
+        &, &:before{
+            transition: $transition-base;
+        }
+        &:before{
+            content: "";
+            position: absolute;
+            top: 0;
+            left: var(--switch-padding);
+            bottom: 0;
+            margin: auto;
+            @include size(var(--switch-ball-size));
+            border-radius: 50%;
+            background-color: $white;
+        }
+    }
+    > input[type="checkbox"], > input[type="radio"]{
+        // reset
+        ~ .check-label:before{ content: ""; }
+        &:checked ~ .check-label:before{ content: ""; }
+
+        &:not(:disabled) ~ .check-label:hover .switch-item:before{
+            will-change: left;
+        }
+
+        &:checked ~ .check-label .switch-item:before{
+            left: calc( var(--switch-w) - var(--switch-padding) - var(--switch-ball-size));
+        }
+
+        // disabled style
+        &:disabled ~ .check-label .switch-item{
+            background-color: var(--gray-400);
+        }
+        &:checked:disabled ~ .check-label .switch-item{
+            background-color: var(--gray-600);
+        }
+    }
+    &-md{
+        --switch-w: 30px;
+        --switch-h: 15px;
+        --switch-padding: 3px;
+        --switch-ball-size: calc( var(--switch-h) - var(--switch-padding)*2);
+    }
+    &-lg{
+        --switch-w: 36px;
+        --switch-h: 18px;
+        --switch-padding: 3px;
+        --switch-ball-size: calc( var(--switch-h) - var(--switch-padding)*2);
+    }
+    &-with-description{
+        .switch-item{
+            margin-top: .35em;
+        }
+        .check-label{
+            display: flex;
+        }
+    }
+    &-display .check-label{
+            cursor: auto;
+    }
+}
+@each $color, $value in $colors {
+    .check-switch-group.check-switch-group-#{$color}{
+        &:hover .check-label .switch-item{
+            background-color: rgba($value, .5);
+        }
+        > input[type="checkbox"], > input[type="radio"]{
+            &:checked:not(:disabled) ~ .check-label .switch-item{
+                background-color: $value;
+            }
+        }
+        &.check-switch-group-display{
+            pointer-events: none;
+        }
+        &.check-switch-group-display.active .check-label .switch-item{
+            background-color: $value;
+            &:before{
+                left: calc( var(--switch-w) - var(--switch-padding) - var(--switch-ball-size));
+            }
+        }
+    }
+}
+
+// badge 版本
+.check-label.badge{
+    --bs-badge-padding-x: 1em;
+    --bs-badge-padding-y: 0.5em;
+    --bs-badge-font-size: var(--bs-body-font-size);
+    --bs-badge-font-weight: --bs-body-font-weight;
+}
+.check-switch-group.check-switch-group{
+    input:not(:checked) ~ .check-label.badge{
+        background-color: var(--gray-100);
+        border-color: var(--gray-300);
+        span{
+            color: var(--gray-500);
+        }
+    }
+    input:not(:checked):disabled ~ .check-label.badge{
+        &:hover{
+            background-color: var(--gray-100);
+            border-color: var(--gray-300);
+        }
+        &:hover span, span{
+            color: var(--gray-400);
+        }
+    }
+    input:checked ~ .check-label.badge{
+        &:hover span, span{
+            color: currentColor;
+        }
+        .switch-item{
+            background-color: currentColor;
+        }
+    }
+}
+@each $color, $value in $colors {
+    .check-switch-group.check-switch-group-#{$color}{
+        input:not(:disabled):not(:checked) ~ .check-label.badge:hover{
+            background-color: rgba($value, .05);
+            border-color: rgba($value, .25);
+            .switch-item{
+                background-color: rgba($value, .5);
+            }
+            span{
+                color: rgba($value, .75);
+            }
+        }
+    }
+}
+// switch ------------------------------------------
+
+
+
+
+// table ------------------------------------------
+th, td{
+    transition: $transition-base;
+}
+.table > .thead-default:not(caption) > * > *{
+    font-size: $font-size-sm;
+    background-color: var(--gray-200);
+    letter-spacing: 0.5px;
+}
+
+// firefox 暫不支援
+.table tr:has(.dropdown-delete:hover){
+    th:not([scope="col"]), td:not([scope="col"]){
+        --bs-table-accent-bg: transparent;
+        --bs-table-bg: transparent;
+        background-color: $table-danger-bg;
+        color: var(--bs-danger);
+    }
+}
+
+// table ------------------------------------------
+
+
+
+// icon ------------------------------------------
+.text-with-icon > *{
+    vertical-align: middle;
+}
+
+.material-icons{
+    $icon-sizes: 14, 18, 24, 28, 32;
+
+    font-size: 24px;
+    @each $size in $icon-sizes{
+        &.icon-#{$size} { font-size: #{$size}px; }
+    }
+}
+// icon ------------------------------------------
+
+
+// button ------------------------------------------
+.btn > *{
+    vertical-align: middle;
+}
+
+.btn-round-effect{
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    @include size(2em);
+    padding: 0;
+    text-decoration: none;
+    *{
+        z-index: 2;
+    }
+    &:before{
+        content: "";
+        display: block;
+        @include position-center();
+        border-radius: 50%;
+        background-color: var(--bs-link-color);
+        z-index: 1;
+        opacity: 0;
+        transform: scale(0);
+        transition: $transition-base;
+    }
+    &:hover:before{
+        opacity: .1;
+        transform: scale(1);
+    }
+}
+
+// @property --rotate {
+//     syntax: "<angle>";
+//     initial-value: 132deg;
+//     inherits: false;
+// }
+
+@keyframes gradient-position {
+    0% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(-50%);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+.btn-gradient-effect{
+    --bs-btn-color: #fff;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-active-color: #fff;
+
+    position: relative;
+    overflow: hidden;
+    border: 0;
+
+    &:before{
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0; left: 0;
+        width: 200%; height: 100%;
+        background: linear-gradient(110deg, $cyan 0%, $purple 50%, $cyan 100%);
+        animation: gradient-position 3s ease-in-out infinite;
+        animation-fill-mode: both;
+        z-index: 1;
+        transition: $transition-base;
+    }
+    &, &:hover, &:hover:active{
+        background-color: $primary;
+    }
+    &:hover:before{
+        opacity: .4;
+    }
+    &:focus{
+        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+    }
+    > *{
+        position: relative;
+        z-index: 2;
+    }
+}
+// button ------------------------------------------
+
+
+// input ------------------------------------------
+.form-group{
+    > label, .form-label{
+        margin-bottom: 0.25rem;
+        color: var(--gray-500);
+        font-size: $font-size-sm;
+        font-weight: $font-weight-bold;
+    }
+}
+
+.form-group-frame{
+    padding: 1rem;
+    border-bottom: $border-width solid $border-color;
+}
+// input ------------------------------------------
+
+
+// image ------------------------------------------
+.thumbnail-content{
+    $thumbnail-sizes: 32, 50, 100, 150;
+
+    @include size(50px);
+    background-color: $white;
+    background-position: 50% 50%;
+    background-size: cover;
+    border: $border-width solid var(--#{$prefix}border-color);
+    border-radius: 50%;
+    overflow: hidden;
+    @each $size in $thumbnail-sizes{
+        &.thumbnail-#{$size} { @include solid-size(#{$size}px); }
+    }
+    &.thumbnail-rwd{
+        @include rwd-square(100%);
+    }
+}
+// image ------------------------------------------
+
+
+// dropdown ------------------------------------------
+.dropdown-menu{
+    box-shadow: $box-shadow;
+}
+.dropdown-delete{
+    color: $danger;
+    &:hover{
+        --bs-dropdown-link-hover-bg: var(--bs-danger);
+        background-color: $danger;
+    }
+}
+.dropdown-menu{
+    --scrollbar-width: 8px;
+    --scrollbar-hover-color: rgba(var(--bs-link-color-rgb), 0.5);
+    overflow: auto;
+    overscroll-behavior: contain;
+    @include scrollbar();
+}
+// dropdown ------------------------------------------
+
+
+// modal ------------------------------------------
+.modal{
+    backdrop-filter: blur(2px);
+}
+
+.modal-md{
+    min-width: 650px;
+}
+// modal ------------------------------------------
+
+
+// offcanvas ------------------------------------------
+.offcanvas{
+    &-md-size{
+        --bs-offcanvas-width: 550px;
+    }
+    &-lg-size{
+        --bs-offcanvas-width: 800px;
+    }
+    &-xl-size{
+        --bs-offcanvas-width: 1000px;
+    }
+}
+// offcanvas ------------------------------------------
+
+
+// navbar ------------------------------------------
+$navbar-h: 60px;
+.navbar-main{
+    &, .btn.btn-normal, .navbar-line-item {
+        min-height: $navbar-h;
+    }
+    .btn.btn-normal{
+        @include flex-center();
+        border-radius: 0;
+        color: var(--bs-nav-link-color);
+        &:hover{
+            color: var(--bs-link-color);
+            background-color: $primary-bg-light;
+        }
+    }
+    .btn-square{
+        @include size($navbar-h);
+    }
+}
+// navbar ------------------------------------------
+
+
+// 側邊的清單 ------------------------------------------
+
+$list-highlight-border-w: .4rem;
+
+@mixin list-group-active(){
+    font-weight: $font-weight-medium;
+    border-left-color: currentColor;
+    --bs-list-group-active-color: var(--bs-link-color);
+    --bs-list-group-active-bg: transparent;
+    @include gradient-bg();
+}
+
+.list-group{
+    overflow: hidden;
+    > li{
+        position: relative;
+    }
+    .material-icon-more{
+        transition: $transition-base;
+    }
+}
+
+// 一般選單 style
+$list-item-padding-x: 1rem;
+
+.list-group-aside{
+    border-radius: 0;
+    .list-group-item{
+        display: flex;
+        align-items: center;
+        padding: .8rem $list-item-padding-x;
+        border-right: 0;
+        border-color: transparent;
+        border-left: $list-highlight-border-w solid transparent;
+        background-color: var(--bs-body-bg);
+        cursor: pointer;
+        transition: $transition-base;
+        &:before{ content: ""; }
+        &.active{
+            @include list-group-active();
+        }
+        &:not(.active):hover{
+            border-top-color: var(--bs-body-bg);
+            border-bottom-color: rgba(var(--bs-link-color-rgb), .1);
+            border-left-color: $primary-sub-highlight;
+            --bs-list-group-action-hover-color: rgba(var(--bs-link-color-rgb), .8);
+            --bs-list-group-action-hover-bg: transparent;
+            @include gradient-bg-hover-to-show(.7);
+        }
+        &:hover .material-icon-more{
+            color: var(--bs-link-color);
+        }
+    }
+}
+
+// 子選單 style
+.child-body, .child-container{
+    width: 100%;
+}
+.child-body{
+    background: var(--gray-100);
+}
+.child-container{
+    border-left: $list-highlight-border-w solid var(--gray-400);
+}
+.child-list-head{
+    padding: .25rem $list-item-padding-x;
+    color: var(--gray-500);
+    background-color: var(--gray-200);
+    font-weight: $font-weight-bold;
+    border-bottom: $border-width solid var(--gray-400);
+}
+a.child-list-item{
+    position: relative;
+    display: block;
+    padding: .5rem $list-item-padding-x;
+    font-size: $font-size-sm;
+    
+    &:hover{
+        color: var(--bs-link-color);
+    }
+    &.active{
+        color: var(--bs-link-color);
+        @include gradient-bg();
+    }
+    &.disabled, &:disabled{
+        color: var(--bs-list-group-disabled-color);
+        pointer-events: none;
+    }
+    @include gradient-bg-hover-to-show(.7);
+}
+
+
+// 子選單開合
+// https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css
+$list-toogle-speed: .35s;
+$list-toogle-in-background: $list-toogle-speed linear;
+
+.list-group-haschild:hover ~ .child-body{
+    &:after{             will-change: height, max-height; }
+    > .child-container { will-change: max-height, margin-bottom; }
+}
+
+.child-body{
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    &:after { content: ''; }
+    // 關閉 -----------------
+    &:after{
+        height: 0;
+        max-height: 50px;
+        transition: height $list-toogle-in-background;
+    }
+    > .child-container {
+        margin-bottom: -2000px;
+        visibility: hidden;
+        max-height: 0;
+        transition: margin-bottom $list-toogle-speed cubic-bezier(1, 0, 1, 1),
+                    visibility 0s $list-toogle-speed,
+                    max-height 0s $list-toogle-speed;
+    }
+    // 關閉 -----------------
+}
+
+.list-group-haschild-input:checked{
+    ~ .list-group-item{
+        @include list-group-active();
+        .material-icon-more{
+            transform: rotate(-180deg);
+        }
+    }
+    ~ .child-body{
+        // 打開 -----------------
+        &:after {
+            height: 50px;
+            transition: height $list-toogle-in-background,
+                        max-height 0s $list-toogle-in-background;
+            max-height: 0px;
+        }
+        > .child-container{
+            transition: margin-bottom $list-toogle-speed cubic-bezier(0, 0, 0, 1);
+            margin-bottom: 0;
+            visibility: visible;
+            max-height: 1000000px;
+        }
+        // 打開 -----------------
+    }
+}
+
+// 側邊的清單 ------------------------------------------
+
+
+
+// navbar ------------------------------------------
+.nav-link.active{
+    font-weight: $font-weight-bold;
+}
+// navbar ------------------------------------------
+
+
+// 有底線的 tab bar ------------------------------------------
+.navbar-line{
+    &:hover .navbar-line-item{
+        &:before {                  will-change: width, left; }
+        ~ .navbar-line-item:before{ will-change: left; }
+    }
+    // LG 版本 (底線較粗)
+    &.navbar-line-lg .navbar-line-item:before{
+        border-bottom-width: 4px;
+    }
+}
+
+a.navbar-line-item{
+    --bs-link-color-rgb: 100, 122, 241;
+}
+.navbar-line-item{
+    position: relative;
+    @include flex-center();
+    --bs-navbar-nav-link-padding-x: 1.5rem;
+    color: var(--bs-nav-link-color);
+    &:before{
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 100%;
+        width: 0;
+        height: 100%;
+        border-bottom: 2px solid var(--bs-link-color);
+        transition: $transition-base;
+        pointer-events: none;
+        z-index: 1;
+    }
+    &:hover{
+        background: $primary-bg-light;
+        &:before {
+            width: 100%;
+            left: 0;
+        }
+        ~ .navbar-line-item:before{
+            left: 0;
+        }
+    }
+    &:not(.active):hover:before{
+        border-color: $primary-sub-highlight;
+    }
+    &.active:before{
+        width: 100%;
+        left: 0;
+    }
+}
+// dropdown 版本
+.navbar-line-item.dropdown{
+    padding: 0;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    // (firefox 暫不支援)
+    &:has(.dropdown-toggle[aria-expanded="true"]){
+        background: $primary-bg-light;
+        &:before{
+            width: 100%;
+            left: 0;
+            border-bottom-color: $primary-sub-highlight;
+        }
+    }
+    &:not(.active) .dropdown-link{
+        color: var(--bs-nav-link-color);
+    }
+    .dropdown-link{
+        @include flex-center();
+        height: 100%;
+        padding: var(--bs-nav-link-padding-y) var(--bs-navbar-nav-link-padding-x);
+    }
+    .dropdown-toggle[aria-expanded="true"]{
+        color: $primary;
+    }
+}
+
+
+.navbar[data-bs-theme="dark"]{
+    .navbar-line-item.dropdown:not(.active) .dropdown-link{
+        color: lighten($primary, 15%);
+    }
+    .navbar-nav .show > .nav-link, .navbar-nav .nav-link.active{
+        &, a{
+            color: $white;
+        }
+    }
+    .navbar-line-item:before{
+        border-bottom-color: lighten($primary, 15%);
+    }
+    .navbar-line-item.dropdown:not(.active) .dropdown-link,
+    .navbar-line-item:before{
+        opacity: .9;
+    }
+}
+// 有底線的 tab bar ------------------------------------------
+
+
+
+// 固定寬度 ------------------------------------------
+.w-33{
+    width: 33.33%;
+}
+.w-66{
+    width: 66.66%;
+}
+@for $i from 1 through 10 {
+    .w-#{$i}rem {
+        width: #{$i}rem;
+    }
+}
+
+// 固定寬度 ------------------------------------------
+
+
+
+// 無內容物 UI ------------------------------------------
+.no-content{
+    padding-top: 10rem;
+    .content-img > .material-icons, p{
+        opacity: .7;
+    }
+    .content-img > .material-icons{
+        font-size: 7rem;
+        opacity: .5;
+    }
+    p{
+        font-size: 1.25rem;
+    }
+}
+// 無內容物 UI ------------------------------------------
+
+
+
+// 暫定：螢幕寬度小於 992px 不可使用 ------------------------------------------
+.mobile-forbidden{
+    display: none;
+}
+@media (max-width: 992px) {
+    body{
+        overflow: hidden;
+    }
+    .mobile-forbidden{
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        @include flex-center();
+        flex-direction: column;
+        padding: 2rem;
+        font-size: $font-size-lg;
+        text-align: center;
+        color: var(--gray-500);
+        background: $white $gradient-blue-light;
+        z-index: $zindex-max;
+        img {
+            width: 20rem;
+        }
+    }
+}
+// 暫定：螢幕寬度小於 992px 不可使用 ------------------------------------------