tobi/vue-black-dash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Css tweaks & improvements

Browse Source 
Make green as primary color
This commit is contained in:
cristij 2018-10-14 15:56:29 +03:00
parent 5303bf6186
commit 684960cc5c
7 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -7,7 +7,8 @@
"e2e": "node test/e2e/runner.js",
"lint": "vue-cli-service lint",
"lint-fix": "vue-cli-service lint --fix",
"dev": "vue-cli-service serve --open"
"dev": "vue-cli-service serve --open",
"serve": "vue-cli-service serve --open"
},
"dependencies": {
"chart.js": "^2.7.2",

11
src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss
View File

@ -295,6 +295,9 @@
img {
max-width: 21px;
}
&.logo-img-rtl {
margin-right: 0;
}
}
a.logo-normal{
@ -359,8 +362,8 @@
@include linear-gradient($success-states, $success);
}
&[data="vue"] {
@include linear-gradient($vue-states, $vue);
&[data="purple"] {
@include linear-gradient($purple-states, $purple);
}
.user{
@ -468,8 +471,8 @@
border-top: 2px solid $success;
}
&[data="vue"]{
border-top: 2px solid $vue;
&[data="purple"]{
border-top: 2px solid $purple;
}
&[data="primary"]{

8
src/assets/sass/black-dashboard/custom/_variables.scss
View File

@ -100,24 +100,24 @@ $default-color-opacity: rgba(182, 182, 182, .6) !default;
$orange-color: #f96332 !default;
$default: #344675 !default;
$primary: #e14eca !default;
$primary: #42b883 !default;
$secondary: #f4f5f7 !default;
$success: #00f2c3 !default;
$info: #1d8cf8 !default;
$warning: #ff8d72 !default;
$danger: #fd5d93 !default;
$black: #222a42 !default;
$vue: #42b883 !default;
$purple: #e14eca !default;
// gradient
$default-states: #263148 !default;
$primary-states: #ba54f5 !default;
$primary-states: #38ef7d !default;
$success-states: #0098f0 !default;
$info-states: #3358f4 !default;
$warning-states: #ff6491 !default;
$danger-states: #ec250d !default;
$black-states: #1d253b !default;
$vue-states: #38ef7d !default;
$purple-states: #ba54f5 !default;
$background-black: #1e1e2f !default;
$background-states-black: #1e1e24 !default;

3
src/components/SidebarPlugin/SideBar.vue
View File

File diff suppressed because one or more lines are too long

10
src/config.js Normal file
View File

@ -0,0 +1,10 @@
export default {
colors: {
default: "#344675",
primary: "#42b883",
info: "#1d8cf8",
danger: "#fd5d93",
teal: "#00d6b4",
primaryGradient: ['rgba(76, 211, 150, 0.1)', 'rgba(53, 183, 125, 0)', 'rgba(119,52,169,0)'],
}
}

5
src/layout/dashboard/TopNavbar.vue
View File

@ -39,7 +39,7 @@
id="searchModal"
:centered="false"
:show-close="true">
<input slot="header" type="text" class="form-control" id="inlineFormInputGroup" placeholder="SEARCH">
<base-input slot="header" v-model="searchQuery" type="text" id="inlineFormInputGroup" placeholder="SEARCH"/>
</modal>
<base-dropdown tag="li" title-tag="a" class="nav-item" menu-on-right>
<a slot="title" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true">
@ -114,7 +114,8 @@
return {
activeNotifications: false,
showMenu: false,
searchModalVisible: false
searchModalVisible: false,
searchQuery: ''
};
},
methods: {

33
src/pages/Dashboard.vue
View File

@ -33,7 +33,7 @@
<line-chart style="height: 100%"
ref="bigChart"
:chart-data="bigLineChart.chartData"
:gradient-color="bigLineChart.gradientColors"
:gradient-colors="bigLineChart.gradientColors"
:gradient-stops="bigLineChart.gradientStops"
:extra-options="bigLineChart.extraOptions">
</line-chart>
@ -51,7 +51,7 @@
<div class="chart-area">
<line-chart style="height: 100%"
:chart-data="purpleLineChart.chartData"
:gradient-color="purpleLineChart.gradientColors"
:gradient-colors="purpleLineChart.gradientColors"
:gradient-stops="purpleLineChart.gradientStops"
:extra-options="purpleLineChart.extraOptions">
</line-chart>
@ -67,7 +67,6 @@
<div class="chart-area">
<bar-chart style="height: 100%"
:chart-data="blueBarChart.chartData"
:gradient-color="blueBarChart.gradientColors"
:gradient-stops="blueBarChart.gradientStops"
:extra-options="blueBarChart.extraOptions">
</bar-chart>
@ -83,7 +82,6 @@
<div class="chart-area">
<line-chart style="height: 100%"
:chart-data="greenLineChart.chartData"
:gradient-color="greenLineChart.gradientColors"
:gradient-stops="greenLineChart.gradientStops"
:extra-options="greenLineChart.extraOptions">
</line-chart>
@ -129,6 +127,7 @@
import * as chartConfigs from '@/components/Charts/config';
import TaskList from './Dashboard/TaskList';
import UserTable from './Dashboard/UserTable';
import config from '@/config';
export default {
components: {
@ -148,7 +147,7 @@
activeIndex: 0,
chartData: null,
extraOptions: chartConfigs.purpleChartOptions,
gradientColors: ['rgba(72,72,176,0.1)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
gradientColors: config.colors.primaryGradient,
gradientStops: [1, 0.4, 0],
categories: []
},
@ -159,13 +158,13 @@
datasets: [{
label: "Data",
fill: true,
borderColor: '#d048b6',
borderColor: config.colors.primary,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#d048b6',
pointBackgroundColor: config.colors.primary,
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#d048b6',
pointHoverBackgroundColor: config.colors.primary,
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
@ -173,7 +172,7 @@
data: [80, 100, 70, 80, 120, 80],
}]
},
gradientColors: ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
gradientColors: config.colors.primaryGradient,
gradientStops: [1, 0.2, 0],
},
greenLineChart: {
@ -183,13 +182,13 @@
datasets: [{
label: "My First dataset",
fill: true,
borderColor: '#00d6b4',
borderColor: config.colors.danger,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#00d6b4',
pointBackgroundColor: config.colors.danger,
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#00d6b4',
pointHoverBackgroundColor: config.colors.danger,
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
@ -207,14 +206,14 @@
datasets: [{
label: "Countries",
fill: true,
borderColor: '#1f8ef1',
borderColor: config.colors.info,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
data: [53, 20, 10, 80, 100, 45],
}]
},
gradientColors: ['rgba(29,140,248,0.2)', 'rgba(29,140,248,0.0)', 'rgba(29,140,248,0)'],
gradientColors: config.colors.primaryGradient,
gradientStops: [1, 0.4, 0],
}
}
@ -235,13 +234,13 @@
let chartData = {
datasets: [{
fill: true,
borderColor: '#d346b1',
borderColor: config.colors.primary,
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#d346b1',
pointBackgroundColor: config.colors.primary,
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#d346b1',
pointHoverBackgroundColor: config.colors.primary,
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,