style/style.scss
@mixin zt-placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
.zt-scroller{
height: 100%;
overflow-x: auto;
}
.zt-wrapper {
height: 100%;
font-size: 11px;
position: relative;
overflow-y: auto;
.zt-loading{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.4);
}
.zt-dot-spinner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&>div{
$zt-dot-spinner-animation-speed: 1000ms !default;
$zt-dot-spinner-dot-size: 10px !default;
width: $zt-dot-spinner-dot-size;
height: $zt-dot-spinner-dot-size;
border: ($zt-dot-spinner-dot-size / 5) solid white;
border-radius: 50%;
float: left;
margin: 0 ($zt-dot-spinner-dot-size / 2);
transform: scale(0);
animation: zt-dot-spinner-kf $zt-dot-spinner-animation-speed ease infinite 0ms;
&:nth-child(2) {
animation: zt-dot-spinner-kf $zt-dot-spinner-animation-speed ease infinite $zt-dot-spinner-animation-speed * 0.3;
}
&:nth-child(3) {
animation: zt-dot-spinner-kf $zt-dot-spinner-animation-speed ease infinite $zt-dot-spinner-animation-speed * 0.6;
}
}
}
@keyframes zt-dot-spinner-kf {
50% {
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}
.zt-table-header {
font-size: 12px;
border-bottom: 2px solid #EDEDED;
>div{
white-space: nowrap;
}
.zt-header-main{
height: 28px;
color:#666;
background: #F5F5F5;
border-bottom: 1px solid #CBCBCB;;
.zt-header-col {
font-weight: bold;
display: inline-block;
cursor: default;
padding: 6px 9px;
position: relative;
box-sizing: border-box;
&.zt-no-hpadding{
padding-left: 0;
padding-right: 0;
}
.zt-header-col-order{
position: absolute;
left: 5px;
top: 9px;
display: none;
// make it a triangle
width: 0;
height: 0;
border-style: solid;
}
&.zt-column-ordered{
.zt-header-col-title{
margin-left: 10px;
}
}
&.zt-column-ordered.zt-column-order-asc{
.zt-header-col-order{
display: block;
border-width: 0 5px 6px 5px;
border-color: transparent transparent #777777 transparent;
}
}
&.zt-column-ordered.zt-column-order-desc{
.zt-header-col-order{
display: block;
border-width: 6px 5px 0 5px;
border-color: #777777 transparent transparent transparent;
}
}
&.zt-header-col-orderable:hover {
background: #D9EDCD;
transition: background 350ms;
}
}
}
.zt-searchers{
height: 25px;
background: #FFF;
.zt-header-col{
display: inline-block;
padding:0;
box-sizing: border-box;
position: relative;
.zt-input-wrapper {
display: inline-block;
position: absolute;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
input {
display: inline-block;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 2px;
border: 1px solid #DDD;
text-indent: 2px;
@include zt-placeholder {
font-style: italic;
color: #DDD;
font-weight: 100;
font-size: 11px;
}
}
select{
width: 100%;
}
}
}
}
.zt-header-col {
vertical-align: middle;
border: 1px solid #CBCBCB;
height:100%;
}
}
.zt-table-wrapper {
overflow-y: visible;
overflow-x: visible;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
.zt-table-table {
height: 100%;
}
}
.zt-table-table {
display: block;
margin: 0;
padding: 0;
width: 100%;
.zt-table-tbody {
display: block;
}
.zt-table-tr {
list-style: none;
display: block;
white-space: nowrap;
margin: 0;
padding: 0;
cursor: default;
height: 20px;
border-bottom: 1px solid #F1F1F1;
&:hover{
background: #F5F5F5;
}
&.zt-selected {
background: #DCEFDA;
transition: background 200ms;
}
&.zt-selected:hover {
background: #C7E0C5;
transition: background 120ms;
}
.zt-table-td {
vertical-align: middle;
display: inline-block;
margin: 0;
padding: 2px;
border-right: 1px solid #F1F1F1;
transition: background 200ms;
height:100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden; /* "overflow" value must be different from visible"*/
-o-text-overflow: ellipsis; /* Opera < 11*/
text-overflow: ellipsis; /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
&:first-child{
border-left: 1px solid #F1F1F1;
}
}
&:last-child .zt-table-td {
border-bottom: none;
}
.zt-table-td-fill{
width: 100%;
}
.zt-cell-has-action{
cursor: pointer;
&:hover{
background: #fff0d1;
}
}
}
}
}
.zt-unhighlightable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.zt-checkbox{
width: 12px;
height: 12px;
border-radius: 2px;
background: #dcdcdc;
border: 1px solid #c3c3c3;
margin: auto;
cursor: pointer;
position: relative;
}
.zt-for-selected-only{
display: none;
}
.zt-selected{
.zt-for-selected-only{
display: inline-block;
}
.zt-for-unselected-only{
display: none;
}
}
.zt-selected .zt-checkbox,
.zt-checkbox.zt-active
{
background: #41860e;
&:before{
position: absolute;
content: '';
left: 3px;
top: 3px;
right: 3px;
bottom: 3px;
background: #eeffec;
border-radius: 1px;
}
}
// Grid table
.zt-grid-body{
display: flex;
}
.zt-table-grid-item{
display: inline-block;
vertical-align: middle;
margin: 5px;
border: 1px solid #DDD;
padding: 3px;
}
// zt-selection-only is used to hide characters on screen but to mae them available for selection and copy/paste
.zt-only-for-selection{
display: inline-block;
width: 0;
height: 0;
opacity: 0;
font-size: 0;
}
@import "zt-paginator";
@import "zt-badge-list";
@import "zt-sort-details";
@import "zt-search-details";