cms_thermo_active/Step/wwwroot/assets/styles/base/create-queue.less

// out: false, sourceMap: false, main: ../style.less
.create-queue-container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
    padding-top: 104px;
    .create-queue-add-queue{
        display: flex;
        float: left;
        width: 1344px;
        height: 873px;
        flex-flow: column;
        background-color: @color-background-white;
        .create-queue-add-queue-header{
            height: 161px;
            width: 100%;
            display: flex;
            flex-flow: column;
            .title{
                height: 81px;
                display: flex;
                align-items: center;
                font-size: 20px;
                color: @color-darkish-blue;
                i{
                    margin-left: 29px;
                    margin-right: 22px;
                }
            }
            .box-search{
                width: 100%;
                height: 80px;
                display: flex;
                flex-flow: row;
                align-items: center;
                background-color: @color-label-grey;
                .path{
                    display: flex;
                    flex-flow: row;
                    width: 600px;
                    color: @color-white;
                    .root, .child{
                        margin: 0px 22px;
                    }
                    .child:last-child{
                        font-weight: 600;
                    }
                }
                .search{
                    display: flex;
                    width: 100%;
                    justify-content: flex-end;
                    input{
                        width: 688px;
                        height: 48px;
                        border-radius: 2px;
                        box-shadow: inset 0 1px 3px @color-black-50;
                        border: solid 1px @color-white3;
                        background-color: @color-whitetwo;
                    }
                }
            }
        }
        .create-queue-add-queue-body{
            height: calc(~'100% - 240px');
            width: 100%;
            display: flex;
            flex-flow: row;
            .first-column{
                height: calc(~'100% - 19px');
                width: 188px;
                border-right: solid 2px @color-whitethree;
                display: flex;
                flex-flow: column;
                padding-top: 19px;
                .card-folder-path{
                    width: 159px;
                    display: flex;
                    margin-top: 8px 0 8px 5px;
                }
            }
            .second-column{
                height: calc(~'100% - 19px');
                width: 343px;
                border-right: solid 2px @color-whitethree;
                display: flex;
                flex-flow: column;
                padding-top: 19px;
                .content{
                    width: 94%;
                    height: 100%;
                    .card-folder-path{
                        width: 280px;
                        display: flex;
                        margin-top: 8px 0 8px 8px;
                    }
                }
            }
            .third-column{
                height: calc(~'100% - 19px');
                width: 343px;
                border-right: solid 2px @color-whitethree;
                display: flex;
                flex-flow: column;
                padding-top: 19px;
                .content{
                    width: 94%;
                    height: 100%;
                    .card-folder-path{
                        width: 280px;
                        display: flex;
                        margin-top: 8px 0 8px 8px;
                    }
                }
            }
            .selected-item{
                width: calc(~'100% - 874px');
                height: 100%;
                display: flex;
                flex-flow: column;
                padding: 0 16px 0 22px;
                .selected-item-header{
                    height: 78px;
                    width: 100%;
                    display: flex;
                    flex-flow: row;
                    align-items: center;
                    .selected-item-title{
                        height: 100%;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        color: @color-darkish-blue;
                        font-size: 20px;
                        // margin-left: 24px;
                    }
                    .group-button{
                        height: 100%;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        i{
                            font-size: 24px;
                        }
                    }
                }
                .selected-item-body{
                    width: 100%;
                    height: calc(~'100% - 78px');
                    border-top: solid 2px @color-whitethree;
                    display: flex;
                    flex-flow: column;
                    .selected-item-body-image{
                        display: flex;
                        width: 100%;
                        height: 316px;
                        align-items: center;
                    }
                    .selected-item-body-description{
                        display: flex;
                        width: 100%;
                        height: calc(~'100% - 360px');
                        flex-flow: column;
                        .title{
                            font-size: 18px;
                            line-height: 1;
                            color: @color-darkish-blue;
                        }
                        .text{
                            width: 100%;
                            font-size: 18px;
                            color: @color-greyish-brown;
                        }
                    }
                }
                
            }
        }
        .create-queue-add-queue-footer{
            height: 79px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            border-top: solid 2px @color-whitethree;
        }
    }
    .create-queue-queue{
        display: flex;
        float: right;
        flex-flow: column;
        width: 448px;
        height: 873px;
        margin-left: 16px;
        background-color: @color-background-white;
        .create-queue-queue-header{
            height: 79px;
            width: 100%;
            display: flex;
            flex-flow: row;
            .title{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                font-size: 20px;
                margin-left: 24px;
                color: @color-darkish-blue;
            }
            .group-button{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                i{
                    font-size: 24px;
                }
            }
        }
        .create-queue-queue-body{
            height: calc(~'100% - 158px');
            width: calc(~'100% - 24px');
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: flex-start;
            margin: 0px 16px 0px 8px;
            .create-queue-queue-body-box{
                display: flex;
                flex-flow: row;
                align-items: center;
                justify-content: flex-start;
                label.number-card{
                    margin-right: 16px;
                }
                .card-element-queue:first-child{
                    margin: 16px 0 4px 0;
                }
                .card-element-queue{
                    margin: 4px 0;
                }
            }

        }
        .create-queue-queue-footer{
            height: 79px;
            width: 100%;
            display: flex;
            flex-flow: row;
            border-top: solid 2px @color-whitethree;
            .label-footer{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-left:24px;
                font-size: 20px;
                color: @color-darkish-blue;
            }
            .button-load-queue{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
        }
    }
}