my_tests/assets/css/components/_card.scss

$lines-to-show-sm: 1;
$lines-to-show: 2;
$line-height-sm: 1.25;
$line-height: 1.39;
$item-card-content-size-xs:0.875rem;
$item-card-content-size-sm:1rem;
$item-card-content-size:18px;



//沒有資料版本
.item-card-none{
    .item-card-none-text{
        color: #43484C;
        font-weight: bold;
    }
}

.onlyCase {
    margin-top: -4rem;
    @media screen and(max-width: 576px) {
        margin-top: -5rem;
    }
}

h4.onlyCase-title {
    font-family: $main-font-family;
}

//有資料版本
.item-card{

    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    position: relative;
    font-family: $main-font-family;
    box-shadow: 0px 0px 3px rgba(66, 66, 66, 0.376);
    -moz-box-shadow: 0px 0px 3px rgba(66, 66, 66, 0.376);
    -ms-box-shadow: 0px 0px 3px rgba(66, 66, 66, 0.376);

    //精選案例
    &.item-card-onlyCase {
        a {
            color: #727679;
            font-family: $main-font-family;
            &:hover {
                color: #727679;
                text-decoration: none;
            }
        }
    }


    .item-card-img{
        position: relative;
        width: 100%;
        height: 300px; // 因應建案圖片，調整為H300
        background-size: cover;
        background-position: center center;
        // 建案有撥放鍵
        .play {
            position: absolute;
            top: 45%;
            left: 45%;
            width: 46px;
            height: 46px;
            transition: all 300ms ease-in-out;
        }
    }

    .item-card-product {
        background-repeat: no-repeat;
        background-position: center center;
    }

    .item-card-person{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-size: cover;
        box-shadow: 2px 2px 10px -2px rgba(0,0,0,0.15);
    }

    .item-card-position{
        margin-top: -.5rem;
    }

    //search_2 使用
    .item-card-video{
        position: relative;
        .item-card-videoBtn{
            position: absolute;
            top: 40%;
            left: 43%;
        }
    }


    .item-card-body{
        position: relative;
        a{
            color: #000;
            margin-right: 0.25rem;
            &:hover, &:active{
                color: #000;
                text-decoration: none;
            }
        }

        // .item-card-circle{
        //     width: 82px;
        //     height: 82px;
        //     border-radius: 50%;
        //     .item-card-img-person{
        //         border-radius: 50%;
        //     }
        // }

        //search_1&4 使用
        .item-card-company{
            -webkit-box-orient: vertical;
            -moz-box-orient:vertical;
            box-orient:vertical;
            font-size: 0.875rem;
            overflow: hidden;
            text-overflow:ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-height: 1.25;
            height: $item-card-content-size-xs * $line-height-sm * $lines-to-show-sm;

            &+h6{
                -webkit-box-orient: vertical;
                -moz-box-orient:vertical;
                box-orient:vertical;
                font-size: 0.875rem;
                overflow: hidden;
                text-overflow:ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-height: 1.25;
                height: $item-card-content-size-xs * $line-height-sm * $lines-to-show-sm;
            }
        }

        .item-card-job{
            font-size: 14px;
        }

        .item-card-media{
            display: none;
            position: absolute;
            bottom: calc(1rem + 48px); //padding + item-card-media高度
            left: 32%;
        }

        .item-card-text-video {
            margin-top: -5px;
        }

        .item-card-text-tag{
            font-size: 14px;

            //品專欄
            &.item-card-text-tag-column{
                margin-top: -5px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -moz-box-orient:vertical;
                box-orient:vertical;
                height: calc(14px * 1.5 * 1.39); //font-size + 1.5行 + line-height
            }
        }

        .tag-item{
            word-break: break-all; 
        }
        .tag-item:hover{
            color: #EE7800;
        }


        .item-card-text-date{
            color:#c3c3c3;
            font-size: 12px;
        }

        //品專欄
        .item-card-title{
            font-size: 18px;
            -webkit-box-orient: vertical;
            -moz-box-orient:vertical;
            box-orient:vertical;
            -webkit-line-clamp: $lines-to-show-sm;
            height: $item-card-content-size * $line-height-sm * $lines-to-show-sm;
            overflow:hidden;
            text-overflow:ellipsis;
            display: -webkit-box;
        }

        //選好貨
        .item-card-subtitle{
            -webkit-box-orient: vertical;
            -moz-box-orient:vertical;
            box-orient:vertical;
            -webkit-line-clamp: $lines-to-show-sm;
            height: $item-card-content-size-sm * $line-height-sm * $lines-to-show-sm;
            overflow:hidden;
            text-overflow:ellipsis;
            display: -webkit-box;
        }

        //選好貨
        .item-card-title-product{
            font-size: 18px;
            -webkit-box-orient: vertical;
            -moz-box-orient:vertical;
            box-orient:vertical;
            -webkit-line-clamp: $lines-to-show-sm;
            height: $item-card-content-size * $line-height * $lines-to-show-sm;
            overflow:hidden;
            text-overflow:ellipsis;
            display: -webkit-box;
        }

        .item-card-options{
            align-items: flex-end;
            justify-content: end;
        }

        .item-card-options-list{
            color: #AAAAAA;
        }
        
    }


    .icon-share1, .icon-share2{
        display: block;
        transition: display 5000s;
        &.active{
            display: none;
        }
    }

    .item-card-icon{
        display: block;
        &.after{
            display: none;
        }
    }

    .item-card-icon-close{
        display: none;
        transition: display 5000s;
        &.active{
            display: block;
        }
    }
    
    .item-card-options-list:hover{
        cursor: pointer;

        .item-card-icon.before{
            display: none;
        }

        .item-card-icon.after{
            display: block;
            &.active{
                display: none;
            }
        }
        .item-card-options-text{
            color:#EE7800;
        }

    }

    .item-card-options-list{
        .item-card-icon.before{
            display: block;
            &.active{
                display: none;
            }
        }

        .item-card-icon.after{
            display: none;
            &.active{
                display: none;
            }
        }
    }

    .item-card-content{
        font-size: 1rem;
        font-weight: bold;
        color: #43484C;
        -webkit-box-orient: vertical;
        -moz-box-orient:vertical;
        box-orient:vertical;
        line-height: 1.25;
        -webkit-line-clamp: $lines-to-show-sm;
        height: $item-card-content-size-sm * $line-height-sm * $lines-to-show-sm;
        overflow:hidden;
        text-overflow:ellipsis;
        display: -webkit-box;
    }

    .item-card-content-video{
        font-size: 16px;
        font-weight: bold;
        color: #43484C;
        -webkit-box-orient: vertical;
        -moz-box-orient:vertical;
        box-orient:vertical;
        -webkit-line-clamp: $lines-to-show;
        height: $item-card-content-size-sm * $line-height * $lines-to-show;
        overflow:hidden;
        text-overflow:ellipsis;
        display: -webkit-box;
    }

    .item-card-brand{
        font-size: 16px;
        font-weight: bold;
        color: #43484C;
        -webkit-box-orient: vertical;
        -moz-box-orient:vertical;
        box-orient:vertical;
        -webkit-line-clamp: $lines-to-show-sm;
        height: $item-card-content-size-sm * $line-height-sm * $lines-to-show-sm;
        overflow:hidden;
        text-overflow:ellipsis;
        display: -webkit-box;
    }

    //選好貨、專欄內文
    .item-card-content-product, .item-card-content-cloumn{
        font-size: 16px;
        color: #43484C;
        -webkit-box-orient: vertical;
        -moz-box-orient:vertical;
        box-orient:vertical;
        -webkit-line-clamp: $lines-to-show;
        height: $item-card-content-size-sm * $line-height * $lines-to-show;
        overflow:hidden;
        text-overflow:ellipsis;
        display: -webkit-box;
    }

}

    //轉寄 modal
    .modal{
        font-family: $main-font-family;

        .modal-header{
            border-bottom: 1px solid transparent;
        }

        .input-group{
            .fm-input-border{
                border-right-width: 0;
            }
            .fm-btn-border{
                border-left-width: 0;
                border-top-width: 1px;
                border-right-width: 1px;
                border-bottom-width: 1px;
                border-color: red;
            }
            .btn-outline-secondary:hover{
                color: #AAAAAA;
                background-color: transparent;
            }
        }

        .form-control{
            border-width: 1px;
        }

        .fm-email-btnWrapper{
            border:1px solid;
            border-radius: 28px;
            &.active{
                display: none;
            }
            .fm-email-btn{
                padding:2px 5px 2px 5px;
            }
        }

        .fm-close{
            cursor: pointer;
        }

        .border-revise{
            border: 1px solid red;
        }
        .modal-title{
            font-size: 18px;
            margin-left: auto;
            margin-right: auto;
        }
        .modal-button-wrapper{
            .modal-button{
                // width: 50%;
                width: 30%;
                border: none;
                padding: 0.875rem 1rem;
                background-color: #D1D2D3;
                border-radius: 2px;
                color: #fff;
                &:hover, &.active{
                    background-color: #EE7800;
                }
            }
        }
    }