File: //home/arjun/projects/propbase/propbase_website/styles/table.scss
@import "partials/partials";
.table-sec{
border-radius: 8px;
overflow: hidden;
padding-bottom: 0;
border: 1px solid #E3E4F3;
background-color: #fff;
margin-bottom: 5px;
}
.table-cover{
.custom-table{
margin-bottom: 0;
border-radius: 8px;
background-color: #fff;
thead{
th{
vertical-align: middle;
padding: 15px 16px;
font-weight: 600;
font-size: 13px;
color: $text-primary-dark;
border-bottom: solid 1px #E3E4F3 !important;
}
}
.th-sort{
padding-left: 5px;
}
tbody{
td{
color: $text-primary-dark;
font-size: 14px;
padding: 15px 16px;
border-color: #E3E4F3;
vertical-align: middle;
.blog-thumb{
width: 50px;
border-radius: 5px;
}
.blog-title{
max-width: 380px;
margin-bottom: 0;
}
}
tr{
&.td-disable{
background-color: #e3e3ef;
td{
opacity: .8;
}
}
// &:last-child{
// td{
// border-bottom: none;
// }
// }
}
}
.action-btn-block{
display: flex;
white-space: nowrap;
}
.td-action-btn{
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #D1E5FF;
padding: 0;
margin: 2px 4px;
border-radius: 50%;
border: none;
transition: .3s;
border: solid 1px transparent;
.td-btn-dark{
display: none;
}
}
.td-btn-disable{
cursor: not-allowed;
border: solid 1px transparent !important;
opacity: .8;
}
.text-b{
font-weight: 500;
}
.text-red{
color: #FC5252;
}
.text-orange{
color: #F3AA01;
}
.text-yellow{
color: #FFDF6E;
}
.text-green{
color: #0DAD4D;
}
.text-blue{
color: #0C15F9;
}
}
}
.table-pagination-cover{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 15px 30px;
border-radius: 8px;
border: 1px solid #E3E4F3;
.select-block{
color: #697F9B;
font-size: 12px;
.pagination-select{
margin-left: 8px;
box-shadow: none;
outline: none;
border-radius: 8px;
border: 1px solid #E3E4F3;
background: #FFF;
color: #697F9B;
font-size: 12px;
padding: 5px 7px;
width: 60px;
}
}
.entries-block{
color: #697F9B;
font-size: 12px;
}
.pagination-block{
.pagination{
.page-item{
.page-link{
margin: 0 4px;
color: #ADC3DF;
font-size: 12px;
border: solid 1px #E3E4F3;
border-radius: 50%;
width: 26px;
height: 26px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&.active, &:hover{
background-color: $primary-blue !important;
color: $white !important;
}
}
.page-link-dots{
margin: 0;
color: #ADC3DF;
font-size: 20px;
width: 18px;
height: 26px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
}
}
}
}
@media($sm-1679){
.table-cover .custom-table thead th {
padding: 15px 10px;
font-size: 12px;
}
.table-cover .custom-table tbody td {
font-size: 12px;
padding: 13px 10px;
}
}
@media($sm-1481){
.table-cover .custom-table tbody td {
font-size: 13px;
}
.table-cover .custom-table thead th {
font-size: 12px;
}
}
@media($sm-1199){
.table-cover .custom-table tbody td {
font-size: 12px;
padding: 12px 10px;
}
.table-cover .custom-table thead th {
font-size: 11px;
padding: 12px 10px;
}
}
@media($sm-991){
.table-pagination-cover{
padding: 10px 15px;
}
}
@media(max-width: 670px){
.table-pagination-cover{
flex-wrap: wrap;
.pagination-block{
width: 100%;
display: flex;
justify-content: flex-end;
padding-top: 8px;
}
}
}
@media($sm-767){
.table-no-data{
padding: 5vh 15px;
}
}
@media($sm-479){
.table-pagination-cover{
flex-direction: column;
align-items: center;
}
.table-pagination-cover .pagination-block{
justify-content: center;
padding-top: 12px;
}
.table-pagination-cover .entries-block{
padding-top: 12px;
}
}
.th-sort-col{
display: inline-flex;
align-items: center;
}
.copy-btn{
border: none;
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 0;
background: #e3e4f38c;
}
.td-copy-btn, .copy-btn-def{
border: none;
padding: 0;
background-color: transparent;
}
.copy-btn-def{
border: none;
padding: 0;
background-color: transparent;
}
td{
.td-copy-btn{
margin-left: 5px;
line-height: 0;
}
}
.td-ellipsis{
max-width: 12ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.td-ellipsis-2-row{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
cursor: pointer;
}
.txt-nowrap{
white-space: nowrap;
}
.text-end{
.th-sort-col{
text-align: right;
}
}
@media($sm-1679){
.th-w-70{
width: 70px;
}
.th-w-105{
width: 105px;
}
}
.td-text-nowrap{
white-space: nowrap;
}
.custom-table{
.low-tier{
background-color: #FFF2F2;
td{
&:first-child{
position: relative;
&::before{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 5px;
background-color: #FCD1D1;
}
}
}
}
}
.td-single-row{
text-wrap: nowrap;
}
.th-info{
width: 12px;
margin-left: 5px;
}
.table-sec{
.table-cover{
min-height: 60vh;
@media ($sm-1679) {
min-height: 65vh;
}
}
}
.td-ellipsis-user{
max-width: 350px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
cursor: pointer;
}
.custom-table{
td{
.pool-coins-td{
display: flex;
align-items: center;
}
.pool-coins{
display: inline-flex;
flex-shrink: 0;
margin-right: 5px;
img{
width: 19px;
border-radius: 50%;
&.coin-2{
transform: translateX(-5px);
}
}
}
}
}
.pool-management-table{
.custom-table{
min-width: 1000px;
}
}
.table-cover .custom-table{
.td-config-btn{
flex-shrink: 0;
display: inline-block;
padding: 4px 15px;
border-radius: 25px;
font-size: 10px;
border: 1px solid #DBE2F6;
color: $text-primary-dark;
background-color: #DBE2F6;
}
}
.blog-table, .announcement-table{
min-width: 800px;
}