nillys-react-table-library
Version:
Responsive table library for React.js
2 lines (1 loc) • 4.68 kB
CSS
#NRTL{display:flex;flex-flow:column;align-items:center;justify-content:center;font-size:12px;margin-top:2em;--header-bg-color: linear-gradient(to left, rgb(204.4364640884, 218.0497237569, 115.9502762431), rgb(169.3251533742, 190.3680981595, 74.6319018405));--header-hover-bg-color: rgb(165.3480662983, 183.2928176796, 48.7071823204);--row-color: #ffffff;--hover-row-color: #36395a;--text-color: #36395a;--hover-text-color: #ffffff;--disable-button-color: #dcdcdc;--column-sorting-color: #dcdcdc;--column-sorting-full-filled-color: #36395a}@media(max-width: 768px){#NRTL{width:100%}}#NRTL .tableHeader{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:.5em}@media(max-width: 768px){#NRTL .tableHeader{padding:1em}}#NRTL .tableHeader .selectContainer{display:flex;align-items:center;gap:.5em}#NRTL .tableHeader .searchContainer{display:flex;align-items:center;gap:.5em}@media(max-width: 768px){#NRTL .tableHeader .searchContainer{justify-content:flex-end}}#NRTL .tableHeader .searchContainer input{border:1px solid #36395a;padding:.5em;height:1.7em}@media(max-width: 768px){#NRTL .tableHeader .searchContainer input{width:50%}}#NRTL .tableHeader .searchContainer input:focus{outline:3px solid #36395a}@media(max-width: 768px){#NRTL .tableWrapper{width:100%;overflow-x:auto}}#NRTL table{width:85dvw;border-collapse:collapse;border-spacing:0;background:var(--header-bg-color, linear-gradient(to left, rgb(204.4364640884, 218.0497237569, 115.9502762431), rgb(169.3251533742, 190.3680981595, 74.6319018405)));border-radius:10px;table-layout:fixed}@media(max-width: 768px){#NRTL table{width:100%;table-layout:auto;border-radius:unset}}#NRTL thead th{padding:10px;text-align:center;position:relative;font-weight:700}@media(max-width: 1024px){#NRTL thead th{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}@media(max-width: 1024px){#NRTL thead th:hover{white-space:normal;overflow:visible}#NRTL thead th:hover .chevron svg{opacity:0}}#NRTL thead th:hover{background:var(--header-hover-bg-color, rgb(165.3480662983, 183.2928176796, 48.7071823204));cursor:pointer;transition:background 150ms ease-in-out}#NRTL thead th:hover:first-child{border-radius:10px 0 0 0}@media(max-width: 768px){#NRTL thead th:hover:first-child{border-radius:unset}}#NRTL thead th:hover:last-child{border-radius:0 10px 0 0}@media(max-width: 768px){#NRTL thead th:hover:last-child{border-radius:unset}}#NRTL thead th div{display:flex;flex-flow:column;position:absolute;right:1.3dvw;top:0}@media(max-width: 768px){#NRTL thead th div{top:-4px;right:2dvw}}#NRTL thead th .chevron{stroke:var(--column-sorting-color, #dcdcdc);fill:var(--column-sorting-color, #dcdcdc)}@media(max-width: 1024px){#NRTL thead th .chevron svg{width:10px ;height:10px }}@media(max-width: 768px){#NRTL thead th .chevron svg{width:6px ;height:6px }}#NRTL thead th .chevron-active{stroke:var(--column-sorting-full-filled-color, #36395a);fill:var(--column-sorting-full-filled-color, #36395a)}#NRTL thead th div>span:first-child{position:absolute;bottom:-25.2px}#NRTL thead th div>span:last-child{position:absolute;top:17px}#NRTL thead th div span svg{width:1.2dvw;height:1.2dvh}#NRTL tbody tr{background:var(--row-color, #ffffff)}#NRTL td{padding:10px;text-align:center}#NRTL table tbody tr:hover{background:var(--row-hover-color, #36395a) ;cursor:default}#NRTL table tbody tr:hover td{color:var(--row-color, #ffffff)}#NRTL table tbody td{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#NRTL table tbody td:hover{white-space:normal;overflow:visible}#NRTL tbody tr:last-child td:first-child{border-radius:0 0 0 10px}@media(max-width: 768px){#NRTL tbody tr:last-child td:first-child{border-radius:unset}}#NRTL tbody tr:last-child td:last-child{border-radius:0 0 10px 0}@media(max-width: 768px){#NRTL tbody tr:last-child td:last-child{border-radius:unset}}#NRTL .tableFooter{margin:1em 0;width:100%;display:flex;justify-content:space-between;align-items:center}@media(max-width: 768px){#NRTL .tableFooter{padding:0 1.5em}}#NRTL .tableFooter .buttonContainer{display:flex;gap:1em;justify-content:center}#NRTL .tableFooter .buttonContainer button{width:150px;text-align:center;background:#f6f6f6;color:var(--text-color, #36395a);border:1px solid var(--text-color, #36395a);cursor:pointer;padding:.3em .5em}#NRTL .tableFooter .buttonContainer button:disabled{background:var(--default-disabled-button-color, #dcdcdc) ;cursor:not-allowed !important}#NRTL .tableFooter .buttonContainer .paginationIcn{font-size:1.4em;cursor:pointer}#NRTL .tableFooter .buttonContainer .disabled{opacity:0}/*# sourceMappingURL=nrtl.css.map */