react-core-image-upload/__sites_/src/less/modules/m-table.less

a component for image to upload and crop

.m-table-label {
    margin-bottom: 24px;
    border-bottom:1px solid #ddd;
    line-height: 49px;
    color:#313c48;
}
.m-table thead th,.m-table tbody td {
    padding:10px 14px;
    border-bottom: 1px solid #d9dde3;
    border-collapse: collapse;
}
.m-table {
    width:100%;
    text-align: left;
    line-height: 100%;
    thead {
        background: #fff;
        border-bottom: 2px solid #d9dde3;
        th {
            border-width: 0px;
            text-align: left;
        }
    }
    tbody {
        tr.disabled td{
            background: #e3e3e3 !important;
            cursor: not-allowed;
        }
        td.rowspan-td {
            border-right: 1px solid #d9dde3;
            border-left: 1px solid #d9dde3;
            padding-left:48px;
            text-align: left;
        }
        td.rowspan-right {
            border-right: 1px solid #d9dde3;
        }
        tr:hover {
            td {
                background-color: #fff;
            }
            td.rowspan-td {
                background: none;
            }
        }
        tr.error {
            background: #faf2ca !important;
        }
        tr {
              

            td {
                .icon-btn {
                    color: #707070;
                    border: none;
                    background: transparent;
                }
                .icon-btn:hover {
                    color: #61bbf4;
                }
                .icon-btn[disabled] {
                    color: #ccc;
                }
                
            }
            
            &.selected{
                
                border-left:3px solid @peter-river;
             
            }
        }
        td.inner:only-child {
            padding-right: 48px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        td.inner:only-child:hover {
            background-color: transparent;
        }
        td.inner {
            th {
                text-align: center;
            }
            th:first-child {
                text-align: left;
            }
            td {
                background-color: transparent;
            }
            tr:hover {
                td {
                    background-color: #f8f8f8;
                }
            }
        }
        tr.end-noborder  td{
            border-bottom-width: 0px;
        }
        
    }
    input[type="checkbox"] {
        margin-right:10px;
    }
    
    .text-link {
        color: #61bbf4;
    }
    .text-link:hover {
        color: #707070;
    }
    td.inner {
        & > table {
            width: 100%;
            thead {
                background: #d9dde3;
                border-color: #d9dde3;
                color: #707070;
            }
        }
    }
}

.disable {
    tbody {
        tr:hover {
            td {
                background: #f8f8f8;
            }
        }
    }
}
.no-bottom-border{
    tbody tr td {
        border-bottom-width: 0px;
    }
}
.bordered {
    thead {
        tr th{
            border:1px solid #d9dde3;    
        }
    }
    tbody {
        td:first-child {
            border-left: 1px solid #d9dde3;
        }
        td:last-child {
            border-right: 1px solid #d9dde3;
        }
        tr:hover {
            td {
                background: #fff;
            }
        }
    }
    thead {
        background: #f5f5f7;
    }
}
.bordered  thead,.bordered  tbody tr td {
    border:1px solid #d9dde3;
}
.centered {
    text-align: center;
}
.m-table.dark {
    thead {
        border-color: #e5eef5;
        border:1px solid #d9dde3;
        border-bottom: none;
        tr {
            background: #e5eef5;
            height: 30px;
            th {
                color:#687178;
            }
        }
    }
}
.dark {
    tbody {
        tr:nth-child(even) {
            background: #fff;
        }
        tr {
            td:first-child {
                border-left:1px solid #d9dde3;
            }
            td:last-child {
                border-right:1px solid #d9dde3;
            }
        }
    }
}
.tbl-form {
    tbody {
        tr {
            td {
                padding-top: 10px;
                border-bottom: 0px;
            }
        }
    }
}

.hover{
    tbody tr:hover td{
        background: #f3f3f3;
        cursor: pointer;
    }
}

.no-bordered tbody tr td,
.no-bordered thead,
.no-bordered thead tr th
{
    border-width: 0px !important;
}