yapsr-vue2-bootstrap-table2/examples/app.css

A sortable and searchable vue table, as a Vue component, using bootstrap styling.

/*** EXAMPLE ***/
#content {
    width: 100%;
}

.columnClassesTest {
    background-color: #000066;
}

.cellClassesTest {
    background-color: #a94442;
}

table.vue-table td.editable {
    background-color:lightgreen;
}


table.vue-table {

}

/*#maindiv {
    content: " ";
    box-sizing: border-box;
    display:
    table; width: 100%;
}
*/
.vue-table-loading .spinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -60px 0 0 -60px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.vue-table-loading {
    position: absolute;
    z-index: 99;
    background-color: #ddd;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}

.vue-table-loading-hidden {
    display: none;
}

table.vue-table thead > tr > th {
    cursor: pointer;
    padding-right: 30px !important;
}

/*.vue-table th.active {
    color: red;
}*/

table.vue-table .arrow {
    opacity: 1;
    position: relative;
}

table.vue-table .arrow:after {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    /*content: "\f007";*/
}

table.vue-table .arrow.asc:after {
    /*content: "\e155";*/
    content: "\f160";
}

table.vue-table .arrow.desc:after {
    /*content: "\e156";*/
    content: "\f161";
}



table.vue-table tr td div.message {
    float: left;
    cursor: pointer;
    width: 2em;
}

table.vue-table tr td div.editing,
table.vue-table tr td div.toggible {
    width: 80%;
    min-height: 1.5em;
}

table.vue-table .editable {
    cursor: pointer;
}



/*
.vue-table .selected-cell {
    background-color: #F7C072;
}

.vue-table .selected-row {
    background-color: #FAE1BE !important;
}
*/


 .icon::before {
     display: inline-block;
     font-style: normal;
     font-variant: normal;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
 }

.login::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
}

.tps::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
}

.twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
}