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", "e2e": "node test/e2e/runner.js",
"lint": "vue-cli-service lint", "lint": "vue-cli-service lint",
"lint-fix": "vue-cli-service lint --fix", "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": { "dependencies": {
"chart.js": "^2.7.2", "chart.js": "^2.7.2",

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

@ -295,6 +295,9 @@
img { img {
max-width: 21px; max-width: 21px;
} }
&.logo-img-rtl {
margin-right: 0;
}
} }
a.logo-normal{ a.logo-normal{
@ -359,8 +362,8 @@
@include linear-gradient($success-states, $success); @include linear-gradient($success-states, $success);
} }
&[data="vue"] { &[data="purple"] {
@include linear-gradient($vue-states, $vue); @include linear-gradient($purple-states, $purple);
} }
.user{ .user{
@ -468,8 +471,8 @@
border-top: 2px solid $success; border-top: 2px solid $success;
} }
&[data="vue"]{ &[data="purple"]{
border-top: 2px solid $vue; border-top: 2px solid $purple;
} }
&[data="primary"]{ &[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; $orange-color: #f96332 !default;
$default: #344675 !default; $default: #344675 !default;
$primary: #e14eca !default; $primary: #42b883 !default;
$secondary: #f4f5f7 !default; $secondary: #f4f5f7 !default;
$success: #00f2c3 !default; $success: #00f2c3 !default;
$info: #1d8cf8 !default; $info: #1d8cf8 !default;
$warning: #ff8d72 !default; $warning: #ff8d72 !default;
$danger: #fd5d93 !default; $danger: #fd5d93 !default;
$black: #222a42 !default; $black: #222a42 !default;
$vue: #42b883 !default; $purple: #e14eca !default;
// gradient // gradient
$default-states: #263148 !default; $default-states: #263148 !default;
$primary-states: #ba54f5 !default; $primary-states: #38ef7d !default;
$success-states: #0098f0 !default; $success-states: #0098f0 !default;
$info-states: #3358f4 !default; $info-states: #3358f4 !default;
$warning-states: #ff6491 !default; $warning-states: #ff6491 !default;
$danger-states: #ec250d !default; $danger-states: #ec250d !default;
$black-states: #1d253b !default; $black-states: #1d253b !default;
$vue-states: #38ef7d !default; $purple-states: #ba54f5 !default;
$background-black: #1e1e2f !default; $background-black: #1e1e2f !default;
$background-states-black: #1e1e24 !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" id="searchModal"
:centered="false" :centered="false"
:show-close="true"> :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> </modal>
<base-dropdown tag="li" title-tag="a" class="nav-item" menu-on-right> <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"> <a slot="title" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true">
@ -114,7 +114,8 @@
return { return {
activeNotifications: false, activeNotifications: false,
showMenu: false, showMenu: false,
searchModalVisible: false searchModalVisible: false,
searchQuery: ''
}; };
}, },
methods: { methods: {

33
src/pages/Dashboard.vue
View File

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