4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | 
12 |
18 |
19 |
12 | {{user.fullName}}
13 | 14 |15 | {{user.title}} 16 |
17 |20 | {{user.description}} 21 |
22 | 33 |
3 |
11 |
12 |
42 |
44 |
--------------------------------------------------------------------------------
/backend/users/models.py:
--------------------------------------------------------------------------------
1 | from django.db import models
2 | from django.contrib.auth.models import AbstractUser
3 |
4 | class User(AbstractUser):
5 | SEX_CHOICE = (
6 | ('m', 'Male'),
7 | ('f', 'Female'),
8 | ('o', 'Other'),
9 | )
10 |
11 | STATUS_CHOICE = (
12 | ('a', 'Active'),
13 | ('i', 'Inactive'),
14 | ('t', 'Terminated')
15 | )
16 |
17 | email = models.EmailField(unique=True)
18 | first_name = models.CharField(max_length=40, blank=True)
19 | last_name = models.CharField(max_length=40, blank=True)
20 | address = models.CharField(max_length=255, blank=True)
21 | sex = models.CharField(max_length=1, choices=SEX_CHOICE, blank=True, null=True)
22 | age = models.DateField(null=True, blank=True)
23 | terms_agreement = models.BooleanField(default=True, blank=True)
24 | verified = models.BooleanField(default=False)
25 | status = models.CharField(max_length=1, choices=STATUS_CHOICE,
26 | default=STATUS_CHOICE[0][0], blank=True)
27 | created_at = models.DateTimeField(auto_now_add=True)
28 | updated_at = models.DateTimeField(auto_now=True)
29 |
30 | def __unicode__(self):
31 | return self.email
32 |
33 | def get_all_expenses(self):
34 | return None
35 |
36 | def get_all_entries(self):
37 | return None
38 |
39 | class Meta:
40 | db_table = 'users'
41 |
--------------------------------------------------------------------------------
/src/components/SidebarPlugin/SidebarLink.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
8 |
10 | {{name}}
11 |- `s. The `::before` pseudo-element generates an element
26 | // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
27 | //
28 | // To trick IE into suppressing the underline, we give the pseudo-element an
29 | // underline and then immediately remove it.
30 | + .breadcrumb-item:hover::before {
31 | text-decoration: underline;
32 | }
33 | // stylelint-disable-next-line no-duplicate-selectors
34 | + .breadcrumb-item:hover::before {
35 | text-decoration: none;
36 | }
37 |
38 | &.active {
39 | color: $breadcrumb-active-color;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "docker-django-vue-postgres-template",
3 | "version": "1.0.0",
4 | "private": true,
5 | "description": "A better way to start a project. Docker, Django, VueJs, Postgres Template and Black Dashboard UI template",
6 | "author": "Chris Fuller
3 |
13 |
14 |
15 |
64 |
--------------------------------------------------------------------------------
/src/components/BaseAlert.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
16 |
6 |
8 |
13 |
14 |
15 |
4 |
15 |
16 |
17 |
66 |
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | // const IS_PRODUCTION = process.env.NODE_ENV === 'production'
2 |
3 | const webpack = require('webpack');
4 |
5 | module.exports = {
6 | outputDir: 'dist',
7 | assetsDir: 'static',
8 | lintOnSave: false,
9 | configureWebpack: {
10 | // Set up all the aliases we use in our app.
11 | resolve: {
12 | alias: {
13 | 'chart.js': 'chart.js/dist/Chart.js'
14 | }
15 | },
16 | plugins: [
17 | new webpack.optimize.LimitChunkCountPlugin({
18 | maxChunks: 6
19 | })
20 | ]
21 | },
22 | pwa: {
23 | name: 'Vue Black Dashboard',
24 | themeColor: '#344675',
25 | msTileColor: '#344675',
26 | appleMobileWebAppCapable: 'yes',
27 | appleMobileWebAppStatusBarStyle: '#344675'
28 | },
29 | pluginOptions: {
30 | i18n: {
31 | locale: 'en',
32 | fallbackLocale: 'en',
33 | localeDir: 'locales',
34 | enableInSFC: false
35 | }
36 | },
37 | css: {
38 | // Enable CSS source maps.
39 | sourceMap: process.env.NODE_ENV !== 'production'
40 | }
41 | };
42 |
43 |
44 |
45 | // module.exports = {
46 | // outputDir: 'dist',
47 | // assetsDir: 'static',
48 | // // baseUrl: IS_PRODUCTION
49 | // // ? 'http://cdn123.com'
50 | // // : '/',
51 | // // For Production, replace set baseUrl to CDN
52 | // // And set the CDN origin to `yourdomain.com/static`
53 | // // Whitenoise will serve once to CDN which will then cache
54 | // // and distribute
55 | // // devServer: {
56 | // // proxy: {
57 | // // '/api*': {
58 | // // // Forward frontend dev server request for /api to django dev server
59 | // // target: 'http://localhost:8000/',
60 | // // }
61 | // // }
62 | // // }
63 | // }
64 |
--------------------------------------------------------------------------------
/src/components/Cards/Card.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
23 |
24 |
55 |
57 |
--------------------------------------------------------------------------------
/backend/users/migrations/0001_initial.py:
--------------------------------------------------------------------------------
1 | # Generated by Django 2.1.7 on 2019-03-14 19:11
2 |
3 | from django.db import migrations, models
4 |
5 |
6 | class Migration(migrations.Migration):
7 |
8 | initial = True
9 |
10 | dependencies = [
11 | ]
12 |
13 | operations = [
14 | migrations.CreateModel(
15 | name='User',
16 | fields=[
17 | ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
18 | ('password', models.CharField(max_length=128, verbose_name='password')),
19 | ('last_login', models.DateTimeField(blank=True, null=True, verbose_name='last login')),
20 | ('email', models.EmailField(max_length=254, unique=True)),
21 | ('first_name', models.CharField(blank=True, max_length=40)),
22 | ('last_name', models.CharField(blank=True, max_length=40)),
23 | ('address', models.CharField(blank=True, max_length=255)),
24 | ('sex', models.CharField(blank=True, choices=[('m', 'Male'), ('f', 'Female'), ('o', 'Other')], max_length=1, null=True)),
25 | ('age', models.DateField(blank=True, null=True)),
26 | ('terms_agreement', models.BooleanField(blank=True, default=True)),
27 | ('verified', models.BooleanField(default=False)),
28 | ('status', models.CharField(blank=True, choices=[('a', 'Active'), ('i', 'Inactive'), ('t', 'Terminated')], default='a', max_length=1)),
29 | ('created_at', models.DateTimeField(auto_now_add=True)),
30 | ('updated_at', models.DateTimeField(auto_now=True)),
31 | ],
32 | options={
33 | 'db_table': 'users',
34 | },
35 | ),
36 | ]
37 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/bootstrap/mixins/_caret.scss:
--------------------------------------------------------------------------------
1 | @mixin caret-down {
2 | border-top: $caret-width solid;
3 | border-right: $caret-width solid transparent;
4 | border-bottom: 0;
5 | border-left: $caret-width solid transparent;
6 | }
7 |
8 | @mixin caret-up {
9 | border-top: 0;
10 | border-right: $caret-width solid transparent;
11 | border-bottom: $caret-width solid;
12 | border-left: $caret-width solid transparent;
13 | }
14 |
15 | @mixin caret-right {
16 | border-top: $caret-width solid transparent;
17 | border-right: 0;
18 | border-bottom: $caret-width solid transparent;
19 | border-left: $caret-width solid;
20 | }
21 |
22 | @mixin caret-left {
23 | border-top: $caret-width solid transparent;
24 | border-right: $caret-width solid;
25 | border-bottom: $caret-width solid transparent;
26 | }
27 |
28 | @mixin caret($direction: down) {
29 | @if $enable-caret {
30 | &::after {
31 | display: inline-block;
32 | width: 0;
33 | height: 0;
34 | margin-left: $caret-width * .85;
35 | vertical-align: $caret-width * .85;
36 | content: "";
37 | @if $direction == down {
38 | @include caret-down;
39 | } @else if $direction == up {
40 | @include caret-up;
41 | } @else if $direction == right {
42 | @include caret-right;
43 | }
44 | }
45 |
46 | @if $direction == left {
47 | &::after {
48 | display: none;
49 | }
50 |
51 | &::before {
52 | display: inline-block;
53 | width: 0;
54 | height: 0;
55 | margin-right: $caret-width * .85;
56 | vertical-align: $caret-width * .85;
57 | content: "";
58 | @include caret-left;
59 | }
60 | }
61 |
62 | &:empty::after {
63 | margin-left: 0;
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/bootstrap/utilities/_borders.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Border
5 | //
6 |
7 | .border { border: $border-width solid $border-color !important; }
8 | .border-top { border-top: $border-width solid $border-color !important; }
9 | .border-right { border-right: $border-width solid $border-color !important; }
10 | .border-bottom { border-bottom: $border-width solid $border-color !important; }
11 | .border-left { border-left: $border-width solid $border-color !important; }
12 |
13 | .border-0 { border: 0 !important; }
14 | .border-top-0 { border-top: 0 !important; }
15 | .border-right-0 { border-right: 0 !important; }
16 | .border-bottom-0 { border-bottom: 0 !important; }
17 | .border-left-0 { border-left: 0 !important; }
18 |
19 | @each $color, $value in $theme-colors {
20 | .border-#{$color} {
21 | border-color: $value !important;
22 | }
23 | }
24 |
25 | .border-white {
26 | border-color: $white !important;
27 | }
28 |
29 | //
30 | // Border-radius
31 | //
32 |
33 | .rounded {
34 | border-radius: $border-radius !important;
35 | }
36 | .rounded-top {
37 | border-top-left-radius: $border-radius !important;
38 | border-top-right-radius: $border-radius !important;
39 | }
40 | .rounded-right {
41 | border-top-right-radius: $border-radius !important;
42 | border-bottom-right-radius: $border-radius !important;
43 | }
44 | .rounded-bottom {
45 | border-bottom-right-radius: $border-radius !important;
46 | border-bottom-left-radius: $border-radius !important;
47 | }
48 | .rounded-left {
49 | border-top-left-radius: $border-radius !important;
50 | border-bottom-left-radius: $border-radius !important;
51 | }
52 |
53 | .rounded-circle {
54 | border-radius: 50% !important;
55 | }
56 |
57 | .rounded-0 {
58 | border-radius: 0 !important;
59 | }
60 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/custom/_footer.scss:
--------------------------------------------------------------------------------
1 | .footer{
2 | // padding: 24px 0 24px 250px;
3 |
4 | [class*="container-"] {
5 | padding: 0;
6 | }
7 |
8 | .nav{
9 | display: inline-block;
10 | float: left;
11 | margin-bottom: 0;
12 | padding-left: 30px;
13 | list-style: none;
14 | }
15 |
16 | .nav-item{
17 | display: inline-block;
18 |
19 | &:first-child a {
20 | padding-left: 0;
21 | }
22 | }
23 |
24 | .nav-link {
25 | color: $white;
26 | padding: 0 $padding-base-vertical;
27 | font-size: $font-size-sm;
28 | text-transform: uppercase;
29 | text-decoration: none;
30 |
31 | &:hover{
32 | text-decoration: none;
33 | }
34 | }
35 |
36 |
37 |
38 | .copyright{
39 | font-size: $font-size-sm;
40 | line-height: 1.8;
41 | color: $white;
42 | }
43 |
44 | &:after{
45 | display: table;
46 | clear: both;
47 | content: " ";
48 | }
49 | }
50 |
51 |
52 | @media screen and (max-width: 991px){
53 | .footer {
54 | padding-left: 0px;
55 |
56 | .copyright {
57 | text-align: right;
58 | margin-right: 15px;
59 | }
60 | }
61 | }
62 |
63 | @media screen and (min-width: 992px){
64 | .footer {
65 | .copyright {
66 | float: right;
67 | padding-right: 30px;
68 | }
69 | }
70 | }
71 |
72 | @media screen and (max-width: 768px){
73 | .footer {
74 | nav {
75 | display: block;
76 | margin-bottom: 5px;
77 | float: none;
78 | }
79 | }
80 | }
81 |
82 | @media screen and (max-width: 576px){
83 | .footer {
84 | text-align: center;
85 | .copyright {
86 | text-align: center;
87 | }
88 |
89 | .nav{
90 | float: none;
91 | padding-left: 0;
92 | }
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/bootstrap/mixins/_grid.scss:
--------------------------------------------------------------------------------
1 | /// Grid system
2 | //
3 | // Generate semantic grid columns with these mixins.
4 |
5 | @mixin make-container() {
6 | width: 100%;
7 | padding-right: ($grid-gutter-width / 2);
8 | padding-left: ($grid-gutter-width / 2);
9 | margin-right: auto;
10 | margin-left: auto;
11 | }
12 |
13 |
14 | // For each breakpoint, define the maximum width of the container in a media query
15 | @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
16 | @each $breakpoint, $container-max-width in $max-widths {
17 | @include media-breakpoint-up($breakpoint, $breakpoints) {
18 | max-width: $container-max-width;
19 | }
20 | }
21 | }
22 |
23 | @mixin make-row() {
24 | display: flex;
25 | flex-wrap: wrap;
26 | margin-right: ($grid-gutter-width / -2);
27 | margin-left: ($grid-gutter-width / -2);
28 | }
29 |
30 | @mixin make-col-ready() {
31 | position: relative;
32 | // Prevent columns from becoming too narrow when at smaller grid tiers by
33 | // always setting `width: 100%;`. This works because we use `flex` values
34 | // later on to override this initial width.
35 | width: 100%;
36 | min-height: 1px; // Prevent collapsing
37 | padding-right: ($grid-gutter-width / 2);
38 | padding-left: ($grid-gutter-width / 2);
39 | }
40 |
41 | @mixin make-col($size, $columns: $grid-columns) {
42 | flex: 0 0 percentage($size / $columns);
43 | // Add a `max-width` to ensure content within each column does not blow out
44 | // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
45 | // do not appear to require this.
46 | max-width: percentage($size / $columns);
47 | }
48 |
49 | @mixin make-col-offset($size, $columns: $grid-columns) {
50 | $num: $size / $columns;
51 | margin-left: if($num == 0, 0, percentage($num));
52 | }
53 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/bootstrap/utilities/_text.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Text
5 | //
6 |
7 | .text-monospace { font-family: $font-family-monospace; }
8 |
9 | // Alignment
10 |
11 | .text-justify { text-align: justify !important; }
12 | .text-nowrap { white-space: nowrap !important; }
13 | .text-truncate { @include text-truncate; }
14 |
15 | // Responsive alignment
16 |
17 | @each $breakpoint in map-keys($grid-breakpoints) {
18 | @include media-breakpoint-up($breakpoint) {
19 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
20 |
21 | .text#{$infix}-left { text-align: left !important; }
22 | .text#{$infix}-right { text-align: right !important; }
23 | .text#{$infix}-center { text-align: center !important; }
24 | }
25 | }
26 |
27 | // Transformation
28 |
29 | .text-lowercase { text-transform: lowercase !important; }
30 | .text-uppercase { text-transform: uppercase !important; }
31 | .text-capitalize { text-transform: capitalize !important; }
32 |
33 | // Weight and italics
34 |
35 | .font-weight-light { font-weight: $font-weight-light !important; }
36 | .font-weight-normal { font-weight: $font-weight-normal !important; }
37 | .font-weight-bold { font-weight: $font-weight-bold !important; }
38 | .font-italic { font-style: italic !important; }
39 |
40 | // Contextual colors
41 |
42 | .text-white { color: $white !important; }
43 |
44 | @each $color, $value in $theme-colors {
45 | @include text-emphasis-variant(".text-#{$color}", $value);
46 | }
47 |
48 | .text-body { color: $body-color !important; }
49 | .text-muted { color: $text-muted !important; }
50 |
51 | .text-black-50 { color: rgba($black, .5) !important; }
52 | .text-white-50 { color: rgba($white, .5) !important; }
53 |
54 | // Misc
55 |
56 | .text-hide {
57 | @include text-hide($ignore-warning: true);
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/BaseButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
11 |
12 | {{title}}
9 |{{subTitle}}
10 |
13 |
15 |
16 |
18 | | {{column}} | 7 |
|---|
| 16 | {{itemValue(item, column)}} 17 | | 18 |
3 |
4 |
5 |
37 |
43 |
44 |
46 |
67 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/custom/_alerts.scss:
--------------------------------------------------------------------------------
1 | .alert{
2 | border: 0;
3 | color: $white;
4 |
5 | .alert-link{
6 | color: $white;
7 | }
8 |
9 | &.alert-success{
10 | background-color: darken($success, 10%);
11 | }
12 |
13 | i.fa,
14 | i.tim-icons{
15 | font-size: $font-paragraph;
16 | }
17 |
18 | .close{
19 | color: $white;
20 | opacity: .9;
21 | text-shadow: none;
22 | line-height: 0;
23 | outline: 0;
24 | }
25 |
26 | span[data-notify="icon"]{
27 | font-size: 22px;
28 | display: block;
29 | left: 19px;
30 | position: absolute;
31 | top: 50%;
32 | margin-top: -11px;
33 | }
34 |
35 | button.close{
36 | position: absolute;
37 | right: 15px;
38 | top: 50%;
39 | margin-top: -13px;
40 | width: 25px;
41 | height: 25px;
42 | padding: 3px;
43 | }
44 |
45 | .close ~ span{
46 | display: block;
47 | max-width: 89%;
48 | }
49 |
50 | &.alert-with-icon{
51 | padding-left: 65px;
52 | }
53 | }
54 |
55 | .alert-dismissible {
56 | .close {
57 | top: 50%;
58 | right: $alert-padding-x;
59 | padding: 0;
60 | transform: translateY(-50%);
61 | color: rgba($white, .6);
62 | opacity: 1;
63 |
64 | &:hover,
65 | &:focus {
66 | color: rgba($white, .9);
67 | opacity: 1 !important;
68 | }
69 |
70 | @include media-breakpoint-down(xs) {
71 | top: 1rem;
72 | right: .5rem;
73 | }
74 |
75 | &>span:not(.sr-only) {
76 | font-size: 1.5rem;
77 | background-color: transparent;
78 | color: rgba($white, .6);
79 | }
80 |
81 | &:hover,
82 | &:focus {
83 | &>span:not(.sr-only) {
84 | background-color: transparent;
85 | color: rgba($white, .9);
86 | }
87 | }
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/src/components/NotificationPlugin/Notifications.vue:
--------------------------------------------------------------------------------
1 |
2 |
38 |
42 |
3 |
5 |
11 |
12 |
13 |
14 |
15 |
56 |
82 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/custom/cards/_card-user.scss:
--------------------------------------------------------------------------------
1 | .card-user {
2 | overflow: hidden;
3 | .image {
4 | height: 120px;
5 | }
6 |
7 | .author {
8 | text-align: center;
9 | text-transform: none;
10 | margin-top: 25px;
11 |
12 | a + p.description {
13 | margin-top: -7px;
14 | }
15 |
16 | .block {
17 | position: absolute;
18 | height: 100px;
19 | width: 250px;
20 | &.block-one {
21 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
22 | @include nc-rotate(150deg,10);
23 | margin-top: -90px;
24 | margin-left: -50px;
25 | }
26 |
27 | &.block-two {
28 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
29 | @include nc-rotate(30deg,10);
30 | margin-top: -40px;
31 | margin-left: -100px;
32 | }
33 |
34 | &.block-three {
35 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
36 | @include nc-rotate(170deg,10);
37 | margin-top: -70px;
38 | right: -45px;
39 |
40 | }
41 |
42 | &.block-four {
43 | @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
44 | @include nc-rotate(150deg,10);
45 | margin-top: -25px;
46 | right: -45px;
47 |
48 | }
49 | }
50 | }
51 |
52 | .avatar {
53 | width: 124px;
54 | height: 124px;
55 | border: 5px solid lighten($black,5%);
56 | border-bottom-color: $transparent-bg;
57 | background-color: $transparent-bg;
58 | position: relative;
59 | }
60 |
61 | .card-body {
62 | min-height: 240px;
63 | }
64 |
65 | hr {
66 | margin: 5px 15px;
67 | }
68 |
69 | .button-container {
70 | margin-bottom: 6px;
71 | text-align: center;
72 | }
73 |
74 | .card-description {
75 | margin-top: 30px;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/components/NotificationPlugin/index.js:
--------------------------------------------------------------------------------
1 | import Notifications from './Notifications.vue';
2 |
3 | const NotificationStore = {
4 | state: [], // here the notifications will be added
5 | settings: {
6 | overlap: false,
7 | verticalAlign: 'top',
8 | horizontalAlign: 'right',
9 | type: 'info',
10 | timeout: 5000,
11 | closeOnClick: true,
12 | showClose: true
13 | },
14 | setOptions(options) {
15 | this.settings = Object.assign(this.settings, options);
16 | },
17 | removeNotification(timestamp) {
18 | const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp);
19 | if (indexToDelete !== -1) {
20 | this.state.splice(indexToDelete, 1);
21 | }
22 | },
23 | addNotification(notification) {
24 | if (typeof notification === 'string' || notification instanceof String) {
25 | notification = { message: notification };
26 | }
27 | notification.timestamp = new Date();
28 | notification.timestamp.setMilliseconds(
29 | notification.timestamp.getMilliseconds() + this.state.length
30 | );
31 | notification = Object.assign({}, this.settings, notification);
32 | this.state.push(notification);
33 | },
34 | notify(notification) {
35 | if (Array.isArray(notification)) {
36 | notification.forEach(notificationInstance => {
37 | this.addNotification(notificationInstance);
38 | });
39 | } else {
40 | this.addNotification(notification);
41 | }
42 | }
43 | };
44 |
45 | const NotificationsPlugin = {
46 | install(Vue, options) {
47 | let app = new Vue({
48 | data: {
49 | notificationStore: NotificationStore
50 | },
51 | methods: {
52 | notify(notification) {
53 | this.notificationStore.notify(notification);
54 | }
55 | }
56 | });
57 | Vue.prototype.$notify = app.notify;
58 | Vue.prototype.$notifications = app.notificationStore;
59 | Vue.component('Notifications', Notifications);
60 | if (options) {
61 | NotificationStore.setOptions(options);
62 | }
63 | }
64 | };
65 |
66 | export default NotificationsPlugin;
67 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/bootstrap/mixins/_grid-framework.scss:
--------------------------------------------------------------------------------
1 | // Framework grid generation
2 | //
3 | // Used only by Bootstrap to generate the correct number of grid classes given
4 | // any value of `$grid-columns`.
5 |
6 | @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
7 | // Common properties for all breakpoints
8 | %grid-column {
9 | position: relative;
10 | width: 100%;
11 | min-height: 1px; // Prevent columns from collapsing when empty
12 | padding-right: ($gutter / 2);
13 | padding-left: ($gutter / 2);
14 | }
15 |
16 | @each $breakpoint in map-keys($breakpoints) {
17 | $infix: breakpoint-infix($breakpoint, $breakpoints);
18 |
19 | // Allow columns to stretch full width below their breakpoints
20 | @for $i from 1 through $columns {
21 | .col#{$infix}-#{$i} {
22 | @extend %grid-column;
23 | }
24 | }
25 | .col#{$infix},
26 | .col#{$infix}-auto {
27 | @extend %grid-column;
28 | }
29 |
30 | @include media-breakpoint-up($breakpoint, $breakpoints) {
31 | // Provide basic `.col-{bp}` classes for equal-width flexbox columns
32 | .col#{$infix} {
33 | flex-basis: 0;
34 | flex-grow: 1;
35 | max-width: 100%;
36 | }
37 | .col#{$infix}-auto {
38 | flex: 0 0 auto;
39 | width: auto;
40 | max-width: none; // Reset earlier grid tiers
41 | }
42 |
43 | @for $i from 1 through $columns {
44 | .col#{$infix}-#{$i} {
45 | @include make-col($i, $columns);
46 | }
47 | }
48 |
49 | .order#{$infix}-first { order: -1; }
50 |
51 | .order#{$infix}-last { order: $columns + 1; }
52 |
53 | @for $i from 0 through $columns {
54 | .order#{$infix}-#{$i} { order: $i; }
55 | }
56 |
57 | // `$columns - 1` because offsetting by the width of an entire row isn't possible
58 | @for $i from 0 through ($columns - 1) {
59 | @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
60 | .offset#{$infix}-#{$i} {
61 | @include make-col-offset($i, $columns);
62 | }
63 | }
64 | }
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/bootstrap/_pagination.scss:
--------------------------------------------------------------------------------
1 | .pagination {
2 | display: flex;
3 | @include list-unstyled();
4 | @include border-radius();
5 | }
6 |
7 | .page-link {
8 | position: relative;
9 | display: block;
10 | padding: $pagination-padding-y $pagination-padding-x;
11 | margin-left: -$pagination-border-width;
12 | line-height: $pagination-line-height;
13 | color: $pagination-color;
14 | background-color: $pagination-bg;
15 | border: $pagination-border-width solid $pagination-border-color;
16 |
17 | &:hover {
18 | z-index: 2;
19 | color: $pagination-hover-color;
20 | text-decoration: none;
21 | background-color: $pagination-hover-bg;
22 | border-color: $pagination-hover-border-color;
23 | }
24 |
25 | &:focus {
26 | z-index: 2;
27 | outline: $pagination-focus-outline;
28 | box-shadow: $pagination-focus-box-shadow;
29 | }
30 |
31 | // Opinionated: add "hand" cursor to non-disabled .page-link elements
32 | &:not(:disabled):not(.disabled) {
33 | cursor: pointer;
34 | }
35 | }
36 |
37 | .page-item {
38 | &:first-child {
39 | .page-link {
40 | margin-left: 0;
41 | @include border-left-radius($border-radius);
42 | }
43 | }
44 | &:last-child {
45 | .page-link {
46 | @include border-right-radius($border-radius);
47 | }
48 | }
49 |
50 | &.active .page-link {
51 | z-index: 1;
52 | color: $pagination-active-color;
53 | background-color: $pagination-active-bg;
54 | border-color: $pagination-active-border-color;
55 | }
56 |
57 | &.disabled .page-link {
58 | color: $pagination-disabled-color;
59 | pointer-events: none;
60 | // Opinionated: remove the "hand" cursor set previously for .page-link
61 | cursor: auto;
62 | background-color: $pagination-disabled-bg;
63 | border-color: $pagination-disabled-border-color;
64 | }
65 | }
66 |
67 |
68 | //
69 | // Sizing
70 | //
71 |
72 | .pagination-lg {
73 | @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
74 | }
75 |
76 | .pagination-sm {
77 | @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
78 | }
79 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/bootstrap/mixins/_gradients.scss:
--------------------------------------------------------------------------------
1 | // Gradients
2 |
3 | @mixin gradient-bg($color) {
4 | @if $enable-gradients {
5 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
6 | } @else {
7 | background-color: $color;
8 | }
9 | }
10 |
11 | // Horizontal gradient, from left to right
12 | //
13 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
14 | @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
15 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
16 | background-repeat: repeat-x;
17 | }
18 |
19 | // Vertical gradient, from top to bottom
20 | //
21 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
22 | @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
23 | background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
24 | background-repeat: repeat-x;
25 | }
26 |
27 | @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
28 | background-image: linear-gradient($deg, $start-color, $end-color);
29 | background-repeat: repeat-x;
30 | }
31 | @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
32 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
33 | background-repeat: no-repeat;
34 | }
35 | @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
36 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
37 | background-repeat: no-repeat;
38 | }
39 | @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
40 | background-image: radial-gradient(circle, $inner-color, $outer-color);
41 | background-repeat: no-repeat;
42 | }
43 | @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
44 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/BaseDropdown.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
28 |
59 |
60 |
61 |
64 |
--------------------------------------------------------------------------------
/src/components/Inputs/BaseInput.vue:
--------------------------------------------------------------------------------
1 |
2 |
29 |
40 |
58 |
30 |
39 |
31 |
38 |
32 |
37 |
33 |
36 | 404 Not Found
34 |Oops! It seems that this page does not exist.
35 |
7 |
8 |
11 |
12 |
13 |
14 |
19 |
20 |
26 |
27 |
28 |
29 |
34 |
36 |
37 |
95 |
98 |
--------------------------------------------------------------------------------
/src/pages/TableList.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
17 |
18 |
30 |
31 |
32 |
33 |
3 |
26 |
27 |
102 |
104 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/custom/utilities/_spacing.scss:
--------------------------------------------------------------------------------
1 | // Spacing columns vertically
2 |
3 | .row.row-grid > [class*="col-"] + [class*="col-"] {
4 | margin-top: 3rem;
5 | }
6 |
7 | @include media-breakpoint-up(lg) {
8 | .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] {
9 | margin-top: 0;
10 | }
11 | }
12 | @include media-breakpoint-up(md) {
13 | .row.row-grid > [class*="col-md-"] + [class*="col-md-"] {
14 | margin-top: 0;
15 | }
16 | }
17 | @include media-breakpoint-up(sm) {
18 | .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] {
19 | margin-top: 0;
20 | }
21 | }
22 |
23 | .row-grid + .row-grid {
24 | margin-top: 3rem;
25 | }
26 |
27 | // Negative margins and paddings
28 |
29 | @media(min-width: 992px) {
30 | [class*="mt--"],
31 | [class*="mr--"],
32 | [class*="mb--"],
33 | [class*="ml--"] {
34 | position: relative;
35 | z-index: 5;
36 | }
37 |
38 |
39 | // Large negative margins in pixels
40 |
41 | .mt--100 {
42 | margin-top: -100px !important;
43 | }
44 | .mr--100 {
45 | margin-right: -100px !important;
46 | }
47 | .mb--100 {
48 | margin-bottom: -100px !important;
49 | }
50 | .ml--100 {
51 | margin-left: -100px !important;
52 | }
53 | .mt--150 {
54 | margin-top: -150px !important;
55 | }
56 | .mb--150 {
57 | margin-bottom: -150px !important;
58 | }
59 | .mt--200 {
60 | margin-top: -200px !important;
61 | }
62 | .mb--200 {
63 | margin-bottom: -200px !important;
64 | }
65 | .mt--300 {
66 | margin-top: -300px !important;
67 | }
68 | .mb--300 {
69 | margin-bottom: -300px !important;
70 | }
71 |
72 |
73 | // Large margins in pixels
74 |
75 | .pt-100 {
76 | padding-top: 100px !important;
77 | }
78 | .pb-100 {
79 | padding-bottom: 100px !important;
80 | }
81 | .pt-150 {
82 | padding-top: 150px !important;
83 | }
84 | .pb-150 {
85 | padding-bottom: 150px !important;
86 | }
87 | .pt-200 {
88 | padding-top: 200px !important;
89 | }
90 | .pb-200 {
91 | padding-bottom: 200px !important;
92 | }
93 | .pt-250 {
94 | padding-top: 250px !important;
95 | }
96 | .pb-250 {
97 | padding-bottom: 250px !important;
98 | }
99 | .pt-300 {
100 | padding-top: 300px!important;
101 | }
102 | .pb-300 {
103 | padding-bottom: 300px!important;
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/src/assets/sass/black-dashboard/bootstrap/_nav.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | //
3 | // Kickstart any navigation component with a set of style resets. Works with
4 | // `
4 |
5 |
12 |
13 |
14 |
6 |
9 |
10 |
11 |
15 |
16 |
23 |
24 |
25 |
17 |
19 |
20 |
21 |
22 |