Skip to content

Commit

Permalink
black-rhino theme added
Browse files Browse the repository at this point in the history
  • Loading branch information
xaksis committed May 24, 2018
1 parent 3f2290a commit 0a58d63
Show file tree
Hide file tree
Showing 9 changed files with 185 additions and 16 deletions.
17 changes: 13 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,15 @@ Some example recipes for inspiration
- [@on-per-page-change](#on-per-page-change)
- [@on-sort-change](#on-sort-change)
- [@on-select-all](#on-select-all)
- [@on-column-filter](#on-column-filter)
- [Style Options](#style-options)
- [.vgt-table](#vgt-table)
- [.vgt-table .stripped](#vgt-table-stripped)
- [.vgt-table .condensed](#vgt-table-condensed)
- [Theme](#theme)
- [Themes](#themes)
- [default](#default)
- [nocturnal `theme='nocturnal'`](#nocturnal-themenocturnal)
- [black-rhino `theme='black-rhino'`](#black-rhino-themeblack-rhino)
- [Advanced Customization](#advanced-customization)
- [Custom row template](#custom-row-template)
- [Custom column headers](#custom-column-headers)
Expand Down Expand Up @@ -586,7 +588,11 @@ myStyleFn(row){
```

##### theme `String`
Allows using other themes. Currently there is one other theme - 'nocturnal'
Allows using other themes.
Included themes:
* [nocturnal](#nocturnal-themenocturnal)
* [black-rhino](#black-rhino-themeblack-rhino)

```html
<vue-good-table
:columns="columns"
Expand Down Expand Up @@ -1051,12 +1057,15 @@ Vue-good-table allows providing your own css classes for the table via **styleCl
![Table Bordered Striped Screenshot](README/images/vgt-table.condensed.png)


## Theme
Vue-good-table currently comes in two themes
## Themes

### default
### nocturnal `theme='nocturnal'`
![Nocturnal Theme Screenshot](README/images/vgt-table.nocturnal.png)

### black-rhino `theme='black-rhino'`
![Black Rhino Theme Screenshot](README/images/vgt-table.black-rhino.png)

## Advanced Customization

### Custom row template
Expand Down
Binary file added README/images/vgt-table.black-rhino.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 4 additions & 5 deletions dev/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@
@on-column-filter="onColumnFilter"
:columns="columns"
:rows="rows"
mode="remote"
styleClass="vgt-table striped bordered"
:pagination-options="{ enabled: true, perPage: 3}"
theme="black-rhino"
:pagination-options="{ enabled: true, perPage: 5}"
:search-options="{
enabled: false,
trigger: 'enter',
Expand Down Expand Up @@ -45,7 +44,7 @@ export default {
label: 'Created On',
field: 'createdAt',
type: 'date',
dateInputFormat: 'YYYY-MM-DDTHH:mm:ssZ',
dateInputFormat: 'YYYY-MM-DD',
dateOutputFormat: 'LLL',
},
{
Expand All @@ -55,7 +54,7 @@ export default {
},
],
rows: [
{ id:1, name:"John", age: 20, createdAt: '2018-02-18T00:00:43-05:00',score: 0.03343 },
// { id:1, name:"John", age: 20, createdAt: '2018-02-18T00:00:43-05:00',score: 0.03343 },
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
Expand Down
6 changes: 3 additions & 3 deletions dev/main.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import Vue from 'vue';
import App from './App';
import VueGoodTable from '../dist/vue-good-table.es';
// import '../dist/vue-good-table.css';
// import VueGoodTable from '../src';
// import VueGoodTable from '../dist/vue-good-table.es';
import '../dist/vue-good-table.css';
import VueGoodTable from '../src';

Vue.use(VueGoodTable);

Expand Down
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 5 additions & 1 deletion src/components/Table.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<template>
<div class="vgt-wrap" :class="{'rtl': rtl, 'nocturnal': theme==='nocturnal'}">
<div class="vgt-wrap" :class="{
'rtl': rtl,
'nocturnal': theme==='nocturnal',
'black-rhino': theme==='black-rhino',
}">
<div v-if="isTableLoading" class="vgt-loading vgt-center-align">
<slot name="loadingContent">
<span class="vgt-loading__content">
Expand Down
14 changes: 14 additions & 0 deletions src/styles/black-rhino/_overrides.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
$thead-bg-color-1: lighten(#2C394F, 18%);
$thead-bg-color-2: lighten(#2C394F, 16%);

$text-color: #dae2f0;
$text-color-td: rgb(73, 81, 94);
$text-shadow-color: lighten(#2C394F, 10%);

$secondary-text-color: rgb(152, 165, 185) ;
$border-color: #435169;
$border-color-td: #bbc5d6;
$input-border-color: $border-color;

$table-bg: #dfe5ee;
$highlight-color: #445168;
142 changes: 142 additions & 0 deletions src/styles/black-rhino/black-rhino.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
@import './overrides';
// suggested by wifey
.vgt-table.black-rhino{
border: 1px solid $border-color;
background-color: $table-bg;

& tr.clickable {
&:hover{
background-color: $highlight-color;
}
}

// td
& td {
border-bottom: 1px solid $border-color-td;
color: $text-color-td;
}

//th
& th.line-numbers {
color: $text-color;
border-right: 1px solid $border-color;
background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
}
thead th{
color: $text-color;
text-shadow: 1px 2px $text-shadow-color;
border-bottom: 1px solid $border-color;
background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
&.sorting-asc, &.sorting-desc {
color: lighten($text-color, 15%);
}
}

//bordered
&.bordered td {
border: 1px solid $border-color-td;
}

&.bordered th {
border: 1px solid $border-color;
}

//input
.vgt-input, .vgt-select{
color: $text-color;
background-color: lighten($thead-bg-color-2, 25%);
border: 1px solid $input-border-color;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: $text-color;
opacity: 0.7; /* Firefox */
}
}
}

.vgt-wrap.black-rhino{
.vgt-wrap__footer{
color: $text-color;
border: 1px solid $border-color;
background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
.footer__row-count{
position: relative;
padding-right: 3px;
&__label{
color: $secondary-text-color;
}
&__select{
color: $text-color-td;
background: $table-bg;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 15px;
padding-left: 5px;
border-radius: 3px;
&::-ms-expand{
display: none;
}
&:focus{
border-color: $link-color;
}
}
&::after{
content: '';
display: block;
position: absolute;
height: 0px;
width: 0px;
right: 6px;
top: 50%;
margin-top: -1px;
border-top: 6px solid $text-color-td;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: none;
}
}
.footer__navigation{
&__page-btn{
color: $text-color;
&.disabled,
&.disabled:hover {
.chevron.left:after{
border-right-color: $text-color;
}
.chevron.right:after{
border-left-color: $text-color;
}
}
}
&__info{
color: $text-color;
}
}
}

// control bar
.vgt-global-search{
border: 1px solid $border-color;
background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
}
.vgt-global-search__input{
.input__icon{
.magnifying-glass{
border: 2px solid darken($border-color, 2%);
&:before{
background: darken($border-color, 2%);
}
}
}
.vgt-input, .vgt-select{
color: $text-color;
background-color: darken($thead-bg-color-2, 5%);
border: 1px solid $input-border-color;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: $text-color;
opacity: 0.3; /* Firefox */
}
}
}
}
1 change: 1 addition & 0 deletions src/styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,4 @@

//themes
@import './nocturnal/nocturnal';
@import './black-rhino/black-rhino';

0 comments on commit 0a58d63

Please sign in to comment.