4 |
15 |
5 |
14 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | \n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-light-bootstrap-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉 https://www.creative-tim.com/bundles\n👉 https://www.creative-tim.com\n\n\n\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /src/components/BaseDropdown.vue: -------------------------------------------------------------------------------- 1 | 2 |
3 |
20 |
21 |
52 |
54 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_footers.scss:
--------------------------------------------------------------------------------
1 | .footer{
2 | background-color: $white-color;
3 |
4 | .footer-menu{
5 | height: 41px;
6 | }
7 |
8 | nav > ul{
9 | list-style: none;
10 | margin: 0;
11 | padding: 0;
12 | font-weight: normal;
13 |
14 | a:not(.btn){
15 | color: $dark-gray;
16 | display: block;
17 | margin-bottom: 3px;
18 | &:hover,
19 | &:focus{
20 | color: $default-states-color;
21 | }
22 | }
23 | }
24 | .social-area{
25 | padding: 15px 0;
26 | h5{
27 | padding-bottom: 15px;
28 | }
29 | }
30 | .social-area > a:not(.btn){
31 | color: $dark-gray;
32 | display: inline-block;
33 | vertical-align: top;
34 | padding: $padding-social-a;
35 | font-size: $font-size-large-navbar;
36 | font-weight: normal;
37 | line-height: $line-height;
38 | text-align: center;
39 | &:hover,
40 | &:focus{
41 | color: $default-states-color;
42 | }
43 | }
44 | .copyright{
45 | color: $default-states-color;
46 | padding: 10px 15px;
47 | margin: 10px 3px;
48 | line-height: 20px;
49 | font-size: $font-size-base;
50 | }
51 | hr{
52 | border-color: $medium-gray;
53 | }
54 | .title{
55 | color: $default-states-color;
56 | }
57 | }
58 |
59 | .footer-default{
60 | background-color: $smoke-bg;
61 | }
62 |
63 | .footer:not(.footer-big){
64 | nav > ul{
65 | font-size: $font-size-base;
66 | li{
67 | margin-left: 20px;
68 | float: left;
69 | }
70 | a{
71 | padding: 10px 0px;
72 | margin: 10px 10px 10px 0px;
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 |
18 |
19 |
24 |
30 |
31 |
4 |
6 |
7 |
8 |
11 |
12 | {{title}}
9 |{{subTitle}}
10 |
13 |
15 | 
4 |
13 | 
7 |
8 | "Lamborghini Mercy
14 | Your chick she so thirsty
15 | I'm in that two seat Lambo"
16 |
18 |
19 |
20 |
21 |
22 |
3 |
5 |
11 |
12 |
13 |
14 |
15 |
56 |
82 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_tables.scss:
--------------------------------------------------------------------------------
1 | .table{
2 |
3 | .radio,
4 | .checkbox{
5 | position: relative;
6 | height: 20px;
7 | display: block;
8 | width: 20px;
9 | padding: 0px 0px;
10 | margin: 0px 5px;
11 | text-align: center;
12 |
13 | .icons{
14 | left: 5px;
15 | }
16 | }
17 | > thead > tr > th,
18 | > tbody > tr > th,
19 | > tfoot > tr > th,
20 | > thead > tr > td,
21 | > tbody > tr > td,
22 | > tfoot > tr > td{
23 | padding: 12px 8px;
24 | vertical-align: middle;
25 | &:last-child {
26 | width: 100%;
27 | }
28 | }
29 |
30 | > thead > tr > th{
31 | border-bottom-width: 1px;
32 | font-size: $font-size-small;
33 | text-transform: uppercase;
34 | color: $dark-gray;
35 | font-weight: $font-weight-normal;
36 | padding-bottom: 5px;
37 | border-top: none !important;
38 | border-bottom: none;
39 | text-align: left !important;
40 | }
41 |
42 | .td-actions .btn{
43 | @include opacity(0.36);
44 |
45 | &.btn-xs{
46 | padding-left: 3px;
47 | padding-right: 3px;
48 | }
49 | }
50 | .td-actions{
51 | min-width: 90px;
52 | }
53 |
54 | > tbody > tr{
55 | position: relative;
56 |
57 | &:hover{
58 | .td-actions .btn{
59 | @include opacity(1);
60 | }
61 | }
62 | }
63 |
64 | .btn:focus{
65 | box-shadow: none !important;
66 | }
67 | }
68 |
69 | .table.table-sm {
70 |
71 | > thead > tr > th,
72 | > tbody > tr > th,
73 | > tfoot > tr > th,
74 | > thead > tr > td,
75 | > tbody > tr > td,
76 | > tfoot > tr > td{
77 | padding: 6px 6px;
78 | }
79 |
80 | > thead > tr > th,
81 | > thead > th {
82 | font-size: $font-size-small;
83 | padding-bottom: 3px;
84 | }
85 |
86 | > tbody > tr > td {
87 | font-size: $font-size-small;
88 | }
89 | }
90 |
91 | .table-upgrade{
92 | .table{
93 | tr{
94 | td{
95 | width: 100%
96 | }
97 | }
98 | }
99 | }
100 |
--------------------------------------------------------------------------------
/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/lbd/_alerts.scss:
--------------------------------------------------------------------------------
1 | .alert{
2 | border: 0;
3 | border-radius: 0;
4 | color: #FFFFFF;
5 | padding: 10px 15px;
6 | font-size: 14px;
7 |
8 | .container &{
9 | border-radius: 4px;
10 |
11 | }
12 | .navbar &{
13 | border-radius: 0;
14 | left: 0;
15 | position: absolute;
16 | right: 0;
17 | top: 85px;
18 | width: 100%;
19 | z-index: 3;
20 | }
21 | .navbar:not(.navbar-transparent) &{
22 | top: 70px;
23 | }
24 |
25 | span[data-notify="icon"]{
26 | font-size: 30px;
27 | display: block;
28 | left: 15px;
29 | position: absolute;
30 | top: 50%;
31 | margin-top: -15px;
32 | }
33 |
34 | i.nc-simple-remove{
35 | font-size: 12px !important;
36 | font: bold normal normal 14px/1 'nucleo-icons';
37 | }
38 |
39 | button.close{
40 | position: absolute;
41 | right: 10px;
42 | top: 50%;
43 | margin-top: -13px;
44 | z-index: 1033;
45 | background-color: #FFFFFF;
46 | display: block;
47 | border-radius: 50%;
48 | opacity: .4;
49 | line-height: 9px;
50 | width: 25px;
51 | height: 25px;
52 | outline: 0 !important;
53 | text-align: center;
54 | padding: 3px;
55 | font-weight: 300;
56 |
57 | &:hover{
58 | opacity: .55;
59 | }
60 | }
61 |
62 | .close ~ span{
63 | display: block;
64 | max-width: 89%;
65 | }
66 |
67 | &[data-notify="container"]{
68 | padding: 10px 10px 10px 20px;
69 | border-radius: $border-radius-base;
70 | }
71 |
72 | &.alert-with-icon{
73 | padding-left: 65px;
74 | }
75 | }
76 | .alert-primary{
77 | background-color: $blue-navbar;
78 | }
79 | .alert-info{
80 | background-color: $azure-navbar;
81 | }
82 | .alert-success {
83 | background-color: $green-navbar;
84 | }
85 | .alert-warning {
86 | background-color: $orange-navbar;
87 | }
88 | .alert-danger {
89 | background-color: $red-navbar;
90 | }
91 |
--------------------------------------------------------------------------------
/src/routes/routes.js:
--------------------------------------------------------------------------------
1 | import DashboardLayout from '../layout/DashboardLayout.vue'
2 | // GeneralViews
3 | import NotFound from '../pages/NotFoundPage.vue'
4 |
5 | // Admin pages
6 | import Overview from 'src/pages/Overview.vue'
7 | import UserProfile from 'src/pages/UserProfile.vue'
8 | import TableList from 'src/pages/TableList.vue'
9 | import Typography from 'src/pages/Typography.vue'
10 | import Icons from 'src/pages/Icons.vue'
11 | import Maps from 'src/pages/Maps.vue'
12 | import Notifications from 'src/pages/Notifications.vue'
13 | import Upgrade from 'src/pages/Upgrade.vue'
14 |
15 | const routes = [
16 | {
17 | path: '/',
18 | component: DashboardLayout,
19 | redirect: '/admin/overview'
20 | },
21 | {
22 | path: '/admin',
23 | component: DashboardLayout,
24 | redirect: '/admin/overview',
25 | children: [
26 | {
27 | path: 'overview',
28 | name: 'Overview',
29 | component: Overview
30 | },
31 | {
32 | path: 'user',
33 | name: 'User',
34 | component: UserProfile
35 | },
36 | {
37 | path: 'table-list',
38 | name: 'Table List',
39 | component: TableList
40 | },
41 | {
42 | path: 'typography',
43 | name: 'Typography',
44 | component: Typography
45 | },
46 | {
47 | path: 'icons',
48 | name: 'Icons',
49 | component: Icons
50 | },
51 | {
52 | path: 'maps',
53 | name: 'Maps',
54 | component: Maps
55 | },
56 | {
57 | path: 'notifications',
58 | name: 'Notifications',
59 | component: Notifications
60 | },
61 | {
62 | path: 'upgrade',
63 | name: 'Upgrade to PRO',
64 | component: Upgrade
65 | }
66 | ]
67 | },
68 | { path: '*', component: NotFound }
69 | ]
70 |
71 | /**
72 | * Asynchronously load view (Webpack Lazy loading compatible)
73 | * The specified component must be inside the Views folder
74 | * @param {string} name the filename (basename) of the view to load.
75 | function view(name) {
76 | var res= require('../components/Dashboard/Views/' + name + '.vue');
77 | return res;
78 | };**/
79 |
80 | export default routes
81 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_typography.scss:
--------------------------------------------------------------------------------
1 | /* Font Smoothing */
2 | body,
3 | h1, .h1,
4 | h2, .h2,
5 | h3, .h3,
6 | h4, .h4,
7 | h5, .h5,
8 | h6, .h6,
9 | p,
10 | .navbar,
11 | .brand,
12 | .btn-simple,
13 | .alert,
14 | a,
15 | .td-name,
16 | td,
17 | button.close{
18 | -moz-osx-font-smoothing: grayscale;
19 | -webkit-font-smoothing: antialiased;
20 | font-family: "Roboto","Helvetica Neue",Arial,sans-serif;
21 | font-weight: $font-weight-normal;
22 | }
23 |
24 | h1, .h1, h2, .h2, h3, .h3, h4, .h4{
25 | font-weight: $font-weight-light;
26 | margin: $margin-large-vertical 0 $margin-base-vertical;
27 | }
28 |
29 | h1, .h1 {
30 | font-size: $font-size-h1;
31 | }
32 | h2, .h2{
33 | font-size: $font-size-h2;
34 | }
35 | h3, .h3{
36 | font-size: $font-size-h3;
37 | margin: 20px 0 10px;
38 | }
39 | h4, .h4{
40 | font-size: $font-size-h4;
41 | line-height: 30px;
42 | }
43 | h5, .h5 {
44 | font-size: $font-size-h5;
45 | margin-bottom: 15px;
46 | }
47 | h6, .h6{
48 | font-size: $font-size-h6;
49 | font-weight: $font-weight-bold;
50 | text-transform: uppercase;
51 | }
52 | p{
53 | font-size: $font-paragraph;
54 | line-height: $line-height-general;
55 | }
56 |
57 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
58 | color: $dark-gray;
59 | font-weight: $font-weight-light;
60 | line-height: $line-height-general;
61 | }
62 |
63 | h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small {
64 | font-size: 60%;
65 | }
66 |
67 | h1 .subtitle{
68 | display: block;
69 | margin: 0 0 $margin-large-vertical;
70 | }
71 |
72 | .text-muted{
73 | color: #9A9A9A;
74 | }
75 | .text-primary, .text-primary:hover{
76 | color: #1D62F0 !important;
77 | }
78 | .text-info, .text-info:hover{
79 | color: $info-color !important;
80 | }
81 | .text-success, .text-success:hover{
82 | color: $success-color !important;
83 | }
84 | .text-warning, .text-warning:hover{
85 | color: $warning-color !important;
86 | }
87 | .text-danger, .text-danger:hover{
88 | color: $danger-color !important;
89 | }
90 |
91 |
--------------------------------------------------------------------------------
/src/layout/DashboardLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
9 |
10 |
11 |
13 |
14 |
15 |
17 |
18 |
19 |
21 |
22 |
23 |
25 |
26 |
27 |
29 |
30 |
31 |
33 |
34 |
35 |
37 |
38 |
40 |
41 |
42 |
52 |
53 |
56 |
78 |
--------------------------------------------------------------------------------
/src/pages/NotFoundPage.vue:
--------------------------------------------------------------------------------
1 |
2 | Dashboard
8 |User Profile
12 |Table list
16 |Typography
20 |Icons
24 |Maps
28 |Notifications
32 |Upgrade to PRO
39 |
43 |
46 |
47 |
48 |
49 |
51 |
3 |
28 |
61 |
62 |
63 |
67 |
--------------------------------------------------------------------------------
/src/components/Inputs/BaseInput.vue:
--------------------------------------------------------------------------------
1 |
2 |
29 |
40 |
60 |
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/Maps.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
17 |
18 |
30 |
31 |
32 |
33 |
6 |
35 |
36 |
92 |
104 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_misc.scss:
--------------------------------------------------------------------------------
1 | /* General overwrite */
2 | body,
3 | .wrapper{
4 | min-height: 100vh;
5 | position: relative;
6 | }
7 | a{
8 | color: $info-color;
9 |
10 | &:hover, &:focus{
11 | color: $info-states-color;
12 | text-decoration: none;
13 | }
14 | }
15 |
16 | a:focus, a:active,
17 | button::-moz-focus-inner,
18 | input::-moz-focus-inner,
19 | input[type="reset"]::-moz-focus-inner,
20 | input[type="button"]::-moz-focus-inner,
21 | input[type="submit"]::-moz-focus-inner,
22 | select::-moz-focus-inner,
23 | input[type="file"] > input[type="button"]::-moz-focus-inner{
24 | outline:0;
25 | }
26 | .ui-slider-handle:focus,
27 | .navbar-toggle,
28 | input:focus {
29 | outline : 0 !important;
30 | }
31 |
32 | /* Animations */
33 | .form-control,
34 | .input-group-addon,
35 | .tagsinput,
36 | .navbar,
37 | .navbar .alert{
38 | @include transition($general-transition-time, $transition-linear);
39 | }
40 |
41 | .sidebar .nav a,
42 | .table > tbody > tr .td-actions .btn{
43 | @include transition($fast-transition-time, $transition-ease-in);
44 | }
45 |
46 | .btn{
47 | @include transition($ultra-fast-transition-time, $transition-ease-in);
48 | }
49 | .fa{
50 | width: 18px;
51 | text-align: center;
52 | }
53 | .margin-top{
54 | margin-top: 50px;
55 | }
56 |
57 | .wrapper{
58 | position: relative;
59 | top: 0;
60 | height: 100vh;
61 | }
62 |
63 | // documentation
64 |
65 | .page-header{
66 | .page-header-image{
67 | background-position: center center;
68 | background-size: cover;
69 | overflow: hidden;
70 | width: 100%;
71 | z-index: 1;
72 | }
73 | .title-container{
74 | color: #fff;
75 | position: relative;
76 | top: 250px;
77 | z-index: 3;
78 | }
79 | .filter:after{
80 | background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #9368e9 0%, #943bea 100%) repeat scroll 0 0 / 150% 150%;
81 | content: "";
82 | display: block;
83 | height: 100%;
84 | left: 0;
85 | opacity: 0.77;
86 | position: absolute;
87 | top: 0;
88 | width: 100%;
89 | z-index: 2;
90 | }
91 | }
92 |
93 | .documentation .page-header,
94 | .documentation .page-header-image,
95 | .documentation .page-header-image .filter:after{
96 | height: 100vh;
97 | }
98 |
99 | .documentation .footer{
100 | z-index: 3;
101 | }
102 | .documentation .wrapper{
103 | margin-top: -61px;
104 | height: 100vh;
105 | }
106 | .documentation .navbar{
107 | z-index: 21;
108 | }
109 |
110 | .card-tasks{
111 | .card-body{
112 | .table{
113 | td{
114 | font-size: 14px;
115 |
116 | .btn{
117 | font-size: 14px;
118 | }
119 | .btn-info{
120 | margin-top: 3px;
121 | padding-right: 0;
122 | }
123 | }
124 | td:last-child{
125 | padding-right: 0;
126 | }
127 | }
128 | }
129 | }
130 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at joracristi@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/src/pages/Upgrade.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
34 |
8 |
9 |
15 |
16 |
10 | 
11 |
12 | {{title}}
13 |
14 |
11 |
3 |
79 |
80 |
83 |
91 |
--------------------------------------------------------------------------------
/src/pages/TableList.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
78 |
5 |
76 |
77 |
6 |
75 |
7 |
74 |
8 |
11 |
12 | Light Bootstrap Dashboard PRO
9 |Are you looking for more components? Please check our Premium Version of Light Bootstrap Dashboard.
10 |11 |
13 |
14 |
15 |
71 |
72 |
73 | | 16 | | Free | 17 |PRO | 18 |
|---|---|---|
| Components | 22 |16 | 23 |160+ | 24 |
| Plugins | 27 |4 | 28 |17+ | 29 |
| Example Pages | 32 |4 | 33 |25+ | 34 |
| Documentation | 37 |38 | | 39 | |
| SASS Files | 42 |43 | | 44 | |
| Login/Register/Lock Pages | 47 |48 | | 49 | |
| Premium Support | 52 |53 | | 54 | |
| 57 | | Free | 58 |Just $49 | 59 |
| 62 | | 63 | Current Version 64 | | 65 |66 | Upgrade to PRO 67 | | 68 |
3 |
55 |
56 |
114 |
116 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/mixins/_chartist.scss:
--------------------------------------------------------------------------------
1 | // Scales for responsive SVG containers
2 | $ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
3 | $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
4 |
5 | // Class names to be used when generating CSS
6 | $ct-class-chart: ct-chart !default;
7 | $ct-class-chart-line: ct-chart-line !default;
8 | $ct-class-chart-bar: ct-chart-bar !default;
9 | $ct-class-horizontal-bars: ct-horizontal-bars !default;
10 | $ct-class-chart-pie: ct-chart-pie !default;
11 | $ct-class-chart-donut: ct-chart-donut !default;
12 | $ct-class-label: ct-label !default;
13 | $ct-class-series: ct-series !default;
14 | $ct-class-line: ct-line !default;
15 | $ct-class-point: ct-point !default;
16 | $ct-class-area: ct-area !default;
17 | $ct-class-bar: ct-bar !default;
18 | $ct-class-slice-pie: ct-slice-pie !default;
19 | $ct-class-slice-donut: ct-slice-donut !default;
20 | $ct-class-grid: ct-grid !default;
21 | $ct-class-vertical: ct-vertical !default;
22 | $ct-class-horizontal: ct-horizontal !default;
23 | $ct-class-start: ct-start !default;
24 | $ct-class-end: ct-end !default;
25 |
26 | // Container ratio
27 | $ct-container-ratio: (1/1.618) !default;
28 |
29 | // Text styles for labels
30 | $ct-text-color: rgba(0, 0, 0, 0.4) !default;
31 | $ct-text-size: 1.3rem !default;
32 | $ct-text-align: flex-start !default;
33 | $ct-text-justify: flex-start !default;
34 | $ct-text-line-height: 1;
35 |
36 | // Grid styles
37 | $ct-grid-color: rgba(0, 0, 0, 0.2) !default;
38 | $ct-grid-dasharray: 2px !default;
39 | $ct-grid-width: 1px !default;
40 |
41 | // Line chart properties
42 | $ct-line-width: 3px !default;
43 | $ct-line-dasharray: false !default;
44 | $ct-point-size: 8px !default;
45 | // Line chart point, can be either round or square
46 | $ct-point-shape: round !default;
47 | // Area fill transparency between 0 and 1
48 | $ct-area-opacity: 0.8 !default;
49 |
50 | // Bar chart bar width
51 | $ct-bar-width: 10px !default;
52 |
53 | // Donut width (If donut width is to big it can cause issues where the shape gets distorted)
54 | $ct-donut-width: 60px !default;
55 |
56 | // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you
57 | // should set this property to false
58 | $ct-include-classes: true !default;
59 |
60 | // If this is set to true the CSS will contain colored series. You can extend or change the color with the
61 | // properties below
62 | $ct-include-colored-series: $ct-include-classes !default;
63 |
64 | // If set to true this will include all responsive container variations using the scales defined at the top of the script
65 | $ct-include-alternative-responsive-containers: $ct-include-classes !default;
66 |
67 | // Series names and colors. This can be extended or customized as desired. Just add more series and colors.
68 | $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default;
69 | $ct-series-colors: (
70 | $new-blue,
71 | $new-red,
72 | $new-orange,
73 | $new-purple,
74 | $new-green,
75 | $new-dark-blue,
76 | $new-black,
77 | $social-google,
78 | $social-tumblr,
79 | $social-youtube,
80 | $social-twitter,
81 | $social-pinterest,
82 | $social-behance,
83 | #6188e2,
84 | #a748ca
85 | ) !default;
86 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_bootstrap-switch.scss:
--------------------------------------------------------------------------------
1 | .bootstrap-switch {
2 | display: inline-block;
3 | direction: ltr;
4 | cursor: pointer;
5 | border-radius: 30px;
6 | border: 0;
7 | position: relative;
8 | text-align: left;
9 | overflow: hidden;
10 | margin-bottom: 5px;
11 | margin-left: 66px;
12 | line-height: 8px;
13 | width: 61px !important;
14 | height: 26px;
15 | outline: none;
16 | z-index: 0;
17 | margin-right: 1px;
18 | -webkit-user-select: none;
19 | -moz-user-select: none;
20 | -ms-user-select: none;
21 | user-select: none;
22 | vertical-align: middle;
23 | -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
24 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
25 | }
26 |
27 | .bootstrap-switch .bootstrap-switch-container {
28 | display: inline-flex;
29 | top: 0;
30 | height: 26px;
31 | border-radius: 4px;
32 | -webkit-transform: translate3d(0, 0, 0);
33 | transform: translate3d(0, 0, 0);
34 | width: 100px !important;
35 | }
36 |
37 | .bootstrap-switch .bootstrap-switch-handle-on,
38 | .bootstrap-switch .bootstrap-switch-handle-off,
39 | .bootstrap-switch .bootstrap-switch-label {
40 | -webkit-box-sizing: border-box;
41 | -moz-box-sizing: border-box;
42 | box-sizing: border-box;
43 | cursor: pointer;
44 | display: inline-block !important;
45 | height: 100%;
46 | color: #fff;
47 | padding: 6px 10px;
48 | font-size: 11px;
49 | text-indent: -5px;
50 | line-height: 15px;
51 | -webkit-transition: 0.25s ease-out;
52 | transition: 0.25s ease-out;
53 |
54 | i{
55 | font-size: 12px;
56 | line-height: 14px;
57 | }
58 | }
59 |
60 | .bootstrap-switch .bootstrap-switch-handle-on,
61 | .bootstrap-switch .bootstrap-switch-handle-off {
62 | text-align: center;
63 | z-index: 1;
64 | float: left;
65 | width: 50% !important;
66 | background-color: $info-color;
67 | }
68 |
69 |
70 | .bootstrap-switch .bootstrap-switch-label {
71 | text-align: center;
72 | z-index: 100;
73 | color: #333333;
74 | background: #ffffff;
75 | width: 22px !important;
76 | height: 22px;
77 | margin: 2px -11px;
78 | border-radius: 12px;
79 | position: relative;
80 | float: left;
81 | padding: 0;
82 | background-color: #FFFFFF;
83 | box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 1px rgba(0, 0, 0, 0.25);
84 | }
85 |
86 | .bootstrap-switch .bootstrap-switch-handle-on {
87 | border-bottom-left-radius: 3px;
88 | border-top-left-radius: 3px;
89 | }
90 |
91 | .bootstrap-switch .bootstrap-switch-handle-off {
92 | text-indent: 6px;
93 | }
94 |
95 | .bootstrap-switch input[type='radio'],
96 | .bootstrap-switch input[type='checkbox'] {
97 | position: absolute !important;
98 | top: 0;
99 | left: 0;
100 | opacity: 0;
101 | filter: alpha(opacity=0);
102 | z-index: -1;
103 | }
104 |
105 |
106 | .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
107 | -webkit-transition: margin-left 0.5s;
108 | transition: margin-left 0.5s;
109 | }
110 |
111 |
112 | .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container {
113 | margin-left: -2px !important;
114 | }
115 |
116 | .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container {
117 | margin-left: -37px !important;
118 | }
119 |
120 | .bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label {
121 | width: 26px !important;
122 | margin: 2px -15px;
123 | }
124 |
125 | .bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label {
126 | width: 26px !important;
127 | margin: 2px -15px -13px -11px;
128 | }
129 |
--------------------------------------------------------------------------------
/documentation/tutorial-components.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
4 |
54 |
5 |
53 |
6 |
9 |
10 |
16 |
17 |
18 |
19 |
20 |
21 | Striped Table with Hover
11 |Here is a subtitle for this table
12 | 13 |
22 |
23 |
24 |
34 |
35 |
36 | Table on Plain Background
25 |Here is a subtitle for this table
26 | 27 |
28 |
31 |
32 |
33 |
37 |
40 |
41 |
47 |
48 |
49 |
50 |
51 |
52 | Small table
42 |Here is a subtitle for this table
43 | 44 |
79 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_dropdown.scss:
--------------------------------------------------------------------------------
1 | .dropdown-menu{
2 | visibility: hidden;
3 | margin: 0;
4 | padding: 0;
5 | border-radius: $border-radius-extreme;
6 | display: block;
7 | z-index: 9000;
8 | position: absolute;
9 |
10 | @include opacity(0);
11 | @include box-shadow($dropdown-shadow);
12 |
13 | .show &{
14 | @include opacity(1);
15 | visibility: visible;
16 | transform: translate3d(0px, 0px, 0px) !important;
17 | }
18 | .select &{
19 | border-radius: $border-radius-bottom;
20 | @include box-shadow(none);
21 | @include transform-origin($select-coordinates);
22 | @include transform-scale(1);
23 | @include transition($fast-transition-time, $transition-linear);
24 | margin-top: -20px;
25 | }
26 | .select.show &{
27 | margin-top: -1px;
28 | }
29 |
30 | .dropdown-item {
31 | padding: $padding-base-vertical $padding-base-horizontal;
32 | color: #333333;
33 |
34 | img{
35 | margin-top: -3px;
36 | }
37 | }
38 | .dropdown-item:focus{
39 | outline: 0 !important;
40 | }
41 |
42 | .btn-group.select &{
43 | min-width: 100%;
44 | }
45 |
46 | > li:first-child > a{
47 | border-top-left-radius: $border-radius-extreme;
48 | border-top-right-radius: $border-radius-extreme;
49 | }
50 |
51 | > li:last-child > a{
52 | border-bottom-left-radius: $border-radius-extreme;
53 | border-bottom-right-radius: $border-radius-extreme;
54 | }
55 |
56 | .select & > li:first-child > a{
57 | border-radius: 0;
58 | border-bottom: 0 none;
59 | }
60 |
61 | .dropdown-item:hover,
62 | .dropdown-item:focus {
63 | background-color: $smoke-bg;
64 | color: #333333;
65 | opacity: 1;
66 | text-decoration: none;
67 | }
68 |
69 | &.dropdown-blue > li > a:hover,
70 | &.dropdown-blue > li > a:focus{
71 | background-color: $light-blue;
72 | }
73 | &.dropdown-azure > li > a:hover,
74 | &.dropdown-azure > li > a:focus{
75 | background-color: $light-azure;
76 | }
77 | &.ct-green > li > a:hover,
78 | &.ct-green > li > a:focus{
79 | background-color: $light-green;
80 | }
81 | &.dropdown-orange > li > a:hover,
82 | &.dropdown-orange > li > a:focus{
83 | background-color: $light-orange;
84 | }
85 | &.dropdown-red > li > a:hover,
86 | &.dropdown-red > li > a:focus{
87 | background-color: $light-red;
88 | }
89 |
90 | .dropdown-item{
91 | i[class*="nc-icon"]{
92 | font-size: 18px;
93 | text-align: center;
94 | line-height: 25px;
95 | float: left;
96 | padding-right: 10px;
97 | }
98 | }
99 |
100 | &.dropdown-menu-right{
101 | &:before,
102 | &:after{
103 | right: 12px !important;
104 | left: auto !important;
105 | }
106 | }
107 |
108 | }
109 |
110 | .dropdown-with-icons{
111 | > li > a{
112 | padding-left: 0px;
113 | line-height: 28px;
114 | }
115 | i{
116 | text-align: center;
117 | line-height: 28px;
118 | float: left;
119 |
120 | &[class^="pe-"]{
121 | font-size: 24px;
122 | width: 46px;
123 | }
124 | &[class^="fa"]{
125 | font-size: 14px;
126 | width: 38px;
127 | }
128 | }
129 | }
130 |
131 | //fix bug for the select items in btn-group
132 | .btn-group.select{
133 | overflow: hidden;
134 | }
135 | .btn-group.select.show{
136 | overflow: visible;
137 | }
138 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_buttons.scss:
--------------------------------------------------------------------------------
1 | .btn{
2 | border-width: $border-thick;
3 | background-color: $transparent-bg;
4 | font-weight: $font-weight-normal;
5 |
6 | @include opacity(.8);
7 | padding: $padding-base-vertical $padding-base-horizontal;
8 |
9 | @include btn-styles($default-color, $default-states-color);
10 |
11 | &:hover,
12 | &:focus{
13 | @include opacity(1);
14 | outline: 0 !important;
15 | box-shadow: none;
16 | }
17 | &:active,
18 | &.active,
19 | .open > &.dropdown-toggle {
20 | @include box-shadow(none);
21 | outline: 0 !important;
22 | }
23 |
24 | &.btn-icon{
25 | padding: $padding-base-vertical;
26 | }
27 |
28 | }
29 |
30 | // Apply the mixin to the buttons
31 | //.btn-default { @include btn-styles($default-color, $default-states-color); }
32 | .btn-primary { @include btn-styles($primary-color, $primary-states-color); }
33 | .btn-success { @include btn-styles($success-color, $success-states-color); }
34 | .btn-info { @include btn-styles($info-color, $info-states-color); }
35 | .btn-warning { @include btn-styles($warning-color, $warning-states-color); }
36 | .btn-danger { @include btn-styles($danger-color, $danger-states-color); }
37 | .btn-neutral {
38 | @include btn-styles($white-color, $white-color);
39 |
40 | &:active,
41 | &.active,
42 | .open > &.dropdown-toggle{
43 | background-color: $white-color;
44 | color: $default-color;
45 | }
46 |
47 | &.btn-fill,
48 | &.btn-fill:hover,
49 | &.btn-fill:focus{
50 | color: $default-color;
51 | }
52 |
53 | &.btn-simple:active,
54 | &.btn-simple.active{
55 | background-color: transparent;
56 | }
57 | }
58 |
59 | .btn{
60 | &:disabled,
61 | &[disabled],
62 | &.disabled{
63 | @include opacity(.5);
64 | }
65 | }
66 | .btn-round{
67 | border-width: $border-thin;
68 | border-radius: $btn-round-radius !important;
69 | padding: $padding-round-vertical $padding-round-horizontal;
70 |
71 | &.btn-icon{
72 | padding: $padding-round-vertical;
73 | }
74 | }
75 | .btn-simple{
76 | border: $none;
77 | font-size: $font-size-medium;
78 | padding: $padding-base-vertical $padding-base-horizontal;
79 |
80 | &.btn-icon{
81 | padding: $padding-base-vertical;
82 | }
83 | }
84 | .btn-lg{
85 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
86 | font-weight: $font-weight-normal;
87 | }
88 | .btn-sm{
89 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small);
90 | }
91 | .btn-xs {
92 | @include btn-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $border-radius-small);
93 | }
94 | .btn-wd {
95 | min-width: 140px;
96 | }
97 |
98 | .btn-group.select{
99 | width: 100%;
100 | }
101 | .btn-group.select .btn{
102 | text-align: left;
103 | }
104 | .btn-group.select .caret{
105 | position: absolute;
106 | top: 50%;
107 | margin-top: -1px;
108 | right: 8px;
109 | }
110 | .btn-social{
111 | opacity: 0.85;
112 | }
113 |
114 | .btn-twitter{
115 | border-color: $social-twitter;
116 | color: $social-twitter;
117 | &:hover{
118 | opacity: 1 !important;
119 | border-color: $social-twitter;
120 | color: $social-twitter;
121 | }
122 | }
123 | .btn-facebook{
124 | border-color: $social-facebook;
125 | color: $social-facebook;
126 |
127 | &:hover{
128 | opacity: 1 !important;
129 | border-color: $social-facebook;
130 | color: $social-facebook;
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/src/layout/TopNavbar.vue:
--------------------------------------------------------------------------------
1 |
2 |
66 |
67 |
100 |
103 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_inputs.scss:
--------------------------------------------------------------------------------
1 | .form-control::-moz-placeholder{
2 | @include placeholder($medium-gray,1);
3 | }
4 | .form-control:-moz-placeholder{
5 | @include placeholder($medium-gray,1);
6 | }
7 | .form-control::-webkit-input-placeholder{
8 | @include placeholder($medium-gray,1);
9 | }
10 | .form-control:-ms-input-placeholder{
11 | @include placeholder($medium-gray,1);
12 | }
13 |
14 | .form-control {
15 | background-color: $white-bg;
16 | border: 1px solid $light-gray;
17 | border-radius: $border-radius-base;
18 | color: #565656;
19 | @include input-size($padding-base-vertical, $padding-base-horizontal - 4, $height-base);
20 | @include box-shadow(none);
21 |
22 | &:focus{
23 | background-color: $white-bg;
24 | border: 1px solid $medium-dark-gray;
25 | @include box-shadow(none);
26 | outline: 0 !important;
27 | color: #333333;
28 | }
29 |
30 | .has-success &,
31 | .has-error &,
32 | .has-success &:focus,
33 | .has-error &:focus{
34 | border-color: $light-gray;
35 | @include box-shadow(none);
36 | }
37 |
38 | .has-success &{
39 | color: $success-color;
40 | }
41 | .has-success &:focus{
42 | border-color: $success-color;
43 | }
44 | .has-error &{
45 | color: $danger-color;
46 | }
47 | .has-error &:focus{
48 | border-color: $danger-color;
49 | }
50 |
51 | & + .form-control-feedback{
52 | border-radius: $border-radius-large;
53 | font-size: $font-size-base;
54 | margin-top: -7px;
55 | position: absolute;
56 | right: 10px;
57 | top: 50%;
58 | vertical-align: middle;
59 | }
60 |
61 | .open &{
62 | border-radius: $border-radius-base $border-radius-base 0 0;
63 | border-bottom-color: transparent;
64 | }
65 | }
66 |
67 | .input-lg{
68 | height: 55px;
69 | padding: $padding-large-vertical $padding-large-horizontal;
70 | }
71 |
72 | .has-error{
73 | .form-control-feedback{
74 | color: $danger-color;
75 | }
76 | }
77 | .has-success{
78 | .form-control-feedback{
79 | color: $success-color
80 | }
81 | }
82 |
83 |
84 | .input-group-addon {
85 | background-color: $white-color;
86 | border: 1px solid $light-gray;
87 | border-radius: $border-radius-base;
88 |
89 | .has-success &,
90 | .has-error &{
91 | background-color: $white-color;
92 | border: 1px solid $light-gray;
93 | }
94 | .has-error .form-control:focus + &{
95 | border-color: $danger-color;
96 | color: $danger-color;
97 | }
98 | .has-success .form-control:focus + &{
99 | border-color: $success-color;
100 | color: $success-color;
101 | }
102 | .form-control:focus + &,
103 | .form-control:focus ~ &{
104 | background-color: $white-color;
105 | border-color: $dark-gray;
106 | }
107 | }
108 |
109 | .input-group .form-control:first-child,
110 | .input-group-addon:first-child,
111 | .input-group-btn:first-child > .dropdown-toggle,
112 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
113 | border-right: 0 none;
114 | }
115 | .input-group .form-control:last-child,
116 | .input-group-addon:last-child,
117 | .input-group-btn:last-child > .dropdown-toggle,
118 | .input-group-btn:first-child > .btn:not(:first-child) {
119 | border-left: 0 none;
120 | }
121 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
122 | background-color: $smoke-bg;
123 | color: $default-color;
124 | cursor: not-allowed;
125 | }
126 |
127 | .input-group-btn .btn{
128 | border-width: $border-thin;
129 | padding: $padding-round-vertical $padding-base-horizontal;
130 | }
131 | .input-group-btn .btn-default:not(.btn-fill){
132 | border-color: $medium-gray;
133 | }
134 |
135 | .input-group-btn:last-child > .btn{
136 | margin-left: 0;
137 | }
138 |
139 | .input-group-focus .input-group-addon{
140 | border-color: $dark-gray;
141 | }
142 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_checkbox-radio-switch.scss:
--------------------------------------------------------------------------------
1 | .from-check,
2 | .form-check-radio {
3 | margin-bottom: 12px;
4 | position: relative;
5 |
6 | }
7 |
8 | .form-check{
9 | padding-left: 0;
10 | .form-check-label{
11 | display: inline-block;
12 | position: relative;
13 | cursor: pointer;
14 | padding-left: 35px;
15 | line-height: 26px;
16 | margin-bottom: 0;
17 | }
18 |
19 | .form-check-sign::before,
20 | .form-check-sign::after{
21 | font-family: 'FontAwesome';
22 | content: "\f096";
23 | display: inline-block;
24 | color: $info-color;
25 | position: absolute;
26 | width: 19px;
27 | height: 19px;
28 | margin-top: -12px;
29 | margin-left: -23px;
30 | font-size: 21px;
31 | cursor: pointer;
32 | -webkit-transition: opacity 0.3s linear;
33 | -moz-transition: opacity 0.3s linear;
34 | -o-transition: opacity 0.3s linear;
35 | -ms-transition: opacity 0.3s linear;
36 | transition: opacity 0.3s linear;
37 | }
38 | .form-check-sign::after{
39 | font-family: 'FontAwesome';
40 | content: "\f046";
41 | text-align: center;
42 | opacity: 0;
43 | color: $info-color;
44 | border: 0;
45 | background-color: inherit;
46 | }
47 | &.disabled{
48 | .form-check-label{
49 | color: $dark-gray;
50 | opacity: .5;
51 | cursor: not-allowed;
52 | }
53 | }
54 |
55 | }
56 |
57 | .form-check.disabled .form-check-label,
58 | .form-check.disabled .form-check-label {
59 |
60 | }
61 |
62 | .form-check input[type="checkbox"],
63 | .form-check-radio input[type="radio"]{
64 | opacity: 0;
65 | position: absolute;
66 | visibility: hidden;
67 | }
68 | .form-check input[type="checkbox"]:checked + .form-check-sign::after{
69 | opacity: 1;
70 | }
71 |
72 | .form-control input[type="checkbox"]:disabled + .form-check-sign::before,
73 | .checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
74 | cursor: not-allowed;
75 | }
76 |
77 | .form-check .form-check-label input[type="checkbox"]:disabled + .form-check-sign,
78 | .form-check-radio input[type="radio"]:disabled + .form-check-sign{
79 | pointer-events: none !important;
80 | }
81 |
82 | .form-check-radio{
83 | .form-check-label{
84 | padding-left: 2rem;
85 | }
86 | &.disabled{
87 | .form-check-label{
88 | color: $dark-gray;
89 | opacity: .5;
90 | cursor: not-allowed;
91 | }
92 | }
93 | }
94 |
95 | .form-check-radio .form-check-sign::before{
96 | font-family: 'FontAwesome';
97 | content: "\f10c";
98 | font-size: 22px;
99 | -webkit-font-smoothing: antialiased;
100 | -moz-osx-font-smoothing: grayscale;
101 | display: inline-block;
102 | position: absolute;
103 | opacity: .50;
104 | left: 5px;
105 | top: -5px;
106 | }
107 |
108 | .form-check-label input[type="checkbox"]:checked + .form-check-sign:before{
109 | // background-color: #66615B;
110 | }
111 |
112 | .form-check-radio input[type="radio"] + .form-check-sign:after,
113 | .form-check-radio input[type="radio"] {
114 | opacity: 0;
115 | -webkit-transition: opacity 0.3s linear;
116 | -moz-transition: opacity 0.3s linear;
117 | -o-transition: opacity 0.3s linear;
118 | -ms-transition: opacity 0.3s linear;
119 | transition: opacity 0.3s linear;
120 | content:" ";
121 | display: block;
122 | }
123 |
124 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after {
125 | font-family: 'FontAwesome';
126 | content: "\f192";
127 | top: -5px;
128 | position: absolute;
129 | left: 5px;
130 | opacity: 1;
131 | font-size: 22px;
132 | }
133 |
134 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after{
135 | opacity: 1;
136 | }
137 |
138 |
139 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
140 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
141 | color: $dark-gray;
142 | }
143 |
--------------------------------------------------------------------------------
/src/components/Cards/ChartCard.vue:
--------------------------------------------------------------------------------
1 |
2 |
80 |
81 |
95 |
82 |
94 | Vue Light Bootstrap Dashboard
83 |v2.1.0
84 |85 | We are constantly doing updates for you. 86 |
87 | View Documentation 93 |
3 |
13 |
14 |
135 |
138 |
--------------------------------------------------------------------------------
/src/pages/Typography.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
9 |
12 |
3 |
85 |
86 |
96 |
99 |
--------------------------------------------------------------------------------
/src/pages/UserProfile/EditProfileForm.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
84 |
5 |
83 |
6 |
7 |
8 |
80 |
81 |
82 | Light Bootstrap Table Heading
9 |Created using Roboto Font Family
10 | 11 |
12 |
14 |
15 | Header 1
Light Bootstrap Table Heading 13 |
16 |
18 | Header 2
Light Bootstrap Table Heading 17 |
19 |
21 | Header 3
Light Bootstrap Table Heading 20 |
22 |
24 | Header 4
Light Bootstrap Table Heading 23 |
25 |
27 | Header 5
Light Bootstrap Table Heading 26 |
28 |
30 | Header 6
Light Bootstrap Table Heading 29 |
31 |
34 | ParagraphLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. 32 |
33 |
35 |
45 |
46 | Quote
36 |37 |44 |38 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. 39 |
40 | 41 | Steve Jobs, CEO Apple 42 | 43 |
47 |
52 | Muted Text
48 |49 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. 50 |
51 |
53 |
56 |
73 |
74 | Coloured Text
57 |58 | Text Primary - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet. 59 |
60 |61 | Text Info - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet. 62 |
63 |64 | Text Success - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet. 65 |
66 |67 | Text Warning - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet. 68 |
69 |70 | Text Danger - Light Bootstrap Table Heading and complex bootstrap dashboard you've ever seen on the internet. 71 |
72 |
75 |
76 | ".small" is a tag for the headers 77 | 78 |
79 | Small Tag
Header with small subtitle76 | ".small" is a tag for the headers 77 | 78 |
Edit Profile
4 | 99 |
9 |
18 |
19 |
20 |
21 |
26 |
27 |
152 |
175 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_cards.scss:
--------------------------------------------------------------------------------
1 | .card{
2 | border-radius: $border-radius-base;
3 | background-color: $white-color;
4 | margin-bottom: 30px;
5 |
6 | .card-image{
7 | width: 100%;
8 | overflow: hidden;
9 | height: 260px;
10 | border-radius: $border-radius-base $border-radius-base 0 0;
11 | position: relative;
12 | -webkit-transform-style: preserve-3d;
13 | -moz-transform-style: preserve-3d;
14 | transform-style: preserve-3d;
15 |
16 | img {
17 | width: 100%;
18 | }
19 | }
20 | .filter{
21 | position: absolute;
22 | z-index: 2;
23 | background-color: rgba(0,0,0,.68);
24 | top: 0;
25 | left: 0;
26 | width: 100%;
27 | height: 100%;
28 | text-align: center;
29 |
30 | @include opacity(0);
31 |
32 | .btn{
33 | @include vertical-align();
34 | }
35 | }
36 | &:hover .filter{
37 | @include opacity(1);
38 | }
39 | .btn-hover{
40 | @include opacity(0);
41 | }
42 | &:hover .btn-hover{
43 | @include opacity(1);
44 | }
45 | .card-body{
46 | padding: 15px 15px 10px 15px;
47 | }
48 | .card-header{
49 | padding: 15px 15px 0;
50 | background-color: $white-color;
51 | border-bottom: none !important;
52 |
53 | }
54 | .card-category,
55 | label{
56 | font-size: $font-size-base;
57 | font-weight: $font-weight-normal;
58 | color: $dark-gray;
59 | margin-bottom: 0px;
60 |
61 | i{
62 | font-size: $font-paragraph;
63 | }
64 | }
65 |
66 | label{
67 | font-size: $font-size-small;
68 | margin-bottom: 5px;
69 | text-transform: uppercase;
70 | }
71 |
72 | .card-title{
73 | margin: $none;
74 | color: $black-color;
75 | font-weight: $font-weight-light;
76 | }
77 | .avatar{
78 | width: 30px;
79 | height: 30px;
80 | overflow: hidden;
81 | border-radius: 50%;
82 | margin-right: 5px;
83 | }
84 | .description{
85 | font-size: $font-size-base;
86 | color: #333;
87 | }
88 | .card-footer{
89 | padding-top: 0;
90 | background-color: $transparent-bg;
91 | line-height: 30px;
92 | border-top: none !important;
93 | font-size: 14px;
94 |
95 | .legend{
96 | padding: 5px 0;
97 | }
98 |
99 | hr{
100 | margin-top: 5px;
101 | margin-bottom: 5px;
102 | }
103 | }
104 | .stats{
105 | color: #a9a9a9;
106 | }
107 | .card-footer div{
108 | display: inline-block;
109 | }
110 |
111 | .author{
112 | font-size: $font-size-small;
113 | font-weight: $font-weight-bold;
114 | text-transform: uppercase;
115 | }
116 | .author i{
117 | font-size: $font-size-base;
118 | }
119 | h6{
120 | font-size: $font-size-small;
121 | margin: 0;
122 | }
123 | &.card-separator:after{
124 | height: 100%;
125 | right: -15px;
126 | top: 0;
127 | width: 1px;
128 | background-color: $medium-gray;
129 | card-body: "";
130 | position: absolute;
131 | }
132 |
133 | .ct-chart{
134 | margin: 30px 0 30px;
135 | height: 245px;
136 | }
137 |
138 | .ct-label{
139 | font-size: 1rem !important;
140 | }
141 |
142 | .table{
143 | tbody td:first-child,
144 | thead th:first-child{
145 | padding-left: 15px;
146 | }
147 |
148 | tbody td:last-child,
149 | thead th:last-child{
150 | padding-right: 15px;
151 | display: inline-flex;
152 | }
153 | }
154 |
155 | .alert{
156 | border-radius: $border-radius-base;
157 | position: relative;
158 |
159 | &.alert-with-icon{
160 | padding-left: 65px;
161 | }
162 | }
163 | }
164 |
165 |
166 |
167 | .card-stats{
168 | .card-body{
169 | padding: 15px 15px 0px;
170 |
171 | .numbers{
172 | font-size: 1.8rem;
173 | text-align: right;
174 |
175 | p{
176 | margin-bottom: 0;
177 | }
178 | }
179 | }
180 | .card-footer{
181 | padding: 0px 15px 10px 15px;
182 |
183 |
184 | }
185 | .icon-big {
186 | font-size: 3em;
187 | min-height: 64px;
188 |
189 | i{
190 | font-weight: 400;
191 | line-height: 59px;
192 | }
193 | }
194 |
195 |
196 | }
197 |
198 | .card-user{
199 | .card-image{
200 | height: 110px;
201 | }
202 | .card-image-plain{
203 | height: 0;
204 | margin-top: 110px;
205 | }
206 | .author{
207 | text-align: center;
208 | text-transform: none;
209 | margin-top: -70px;
210 | }
211 | .avatar{
212 | width: 124px;
213 | height: 124px;
214 | border: 5px solid #FFFFFF;
215 | position: relative;
216 | margin-bottom: 15px;
217 |
218 | &.border-gray{
219 | border-color: #EEEEEE;
220 | }
221 | }
222 | .title{
223 | line-height: 24px;
224 | }
225 | .card-body{
226 | min-height: 240px;
227 | }
228 | }
229 |
230 | .card-user,
231 | .card-price{
232 | .card-footer{
233 | padding: 5px 15px 10px;
234 | }
235 | hr{
236 | margin: 5px 15px;
237 | }
238 | }
239 | .card-plain{
240 | background-color: transparent;
241 | box-shadow: none;
242 | border-radius: 0;
243 |
244 | .card-image{
245 | border-radius: 4px;
246 | }
247 | }
248 |
249 | .card.card-plain{
250 | border: none !important;
251 |
252 | .card-header{
253 | background-color: transparent !important;
254 | }
255 | }
256 |
--------------------------------------------------------------------------------
/src/pages/Notifications.vue:
--------------------------------------------------------------------------------
1 |
2 | {{title}}
22 |
23 |
3 |
97 |
98 |
129 |
132 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_chartist.scss:
--------------------------------------------------------------------------------
1 | @mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) {
2 | display: block;
3 | position: relative;
4 | width: $width;
5 |
6 | &:before {
7 | display: block;
8 | float: left;
9 | content: "";
10 | width: 0;
11 | height: 0;
12 | padding-bottom: $ratio * 100%;
13 | }
14 |
15 | &:after {
16 | content: "";
17 | display: table;
18 | clear: both;
19 | }
20 |
21 | > svg {
22 | display: block;
23 | position: absolute;
24 | top: 0;
25 | left: 0;
26 | }
27 | }
28 |
29 | @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
30 | -webkit-box-align: $ct-text-align;
31 | -webkit-align-items: $ct-text-align;
32 | -ms-flex-align: $ct-text-align;
33 | align-items: $ct-text-align;
34 | -webkit-box-pack: $ct-text-justify;
35 | -webkit-justify-content: $ct-text-justify;
36 | -ms-flex-pack: $ct-text-justify;
37 | justify-content: $ct-text-justify;
38 | // Fallback to text-align for non-flex browsers
39 | @if($ct-text-justify == 'flex-start') {
40 | text-align: left;
41 | } @else if ($ct-text-justify == 'flex-end') {
42 | text-align: right;
43 | } @else {
44 | text-align: center;
45 | }
46 | }
47 |
48 | @mixin ct-flex() {
49 | // Fallback to block
50 | display: block;
51 | display: -webkit-box;
52 | display: -moz-box;
53 | display: -ms-flexbox;
54 | display: -webkit-flex;
55 | display: flex;
56 | }
57 |
58 | @mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
59 | fill: $ct-text-color;
60 | color: $ct-text-color;
61 | font-size: $ct-text-size;
62 | line-height: $ct-text-line-height;
63 | }
64 |
65 | @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
66 | stroke: $ct-grid-color;
67 | stroke-width: $ct-grid-width;
68 |
69 | @if ($ct-grid-dasharray) {
70 | stroke-dasharray: $ct-grid-dasharray;
71 | }
72 | }
73 |
74 | @mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) {
75 | stroke-width: $ct-point-size;
76 | stroke-linecap: $ct-point-shape;
77 | }
78 |
79 | @mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) {
80 | fill: none;
81 | stroke-width: $ct-line-width;
82 |
83 | @if ($ct-line-dasharray) {
84 | stroke-dasharray: $ct-line-dasharray;
85 | }
86 | }
87 |
88 | @mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) {
89 | stroke: none;
90 | fill-opacity: $ct-area-opacity;
91 | }
92 |
93 | @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) {
94 | fill: none;
95 | stroke-width: $ct-bar-width;
96 | }
97 |
98 | @mixin ct-chart-donut($ct-donut-width: $ct-donut-width) {
99 | fill: none;
100 | stroke-width: $ct-donut-width;
101 | }
102 |
103 | @mixin ct-chart-series-color($color) {
104 | .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
105 | stroke: $color;
106 | }
107 |
108 | .#{$ct-class-slice-pie}, .#{$ct-class-area} {
109 | fill: $color;
110 | }
111 | }
112 |
113 | @mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
114 |
115 | .#{$ct-class-label} {
116 | @include ct-chart-label($ct-text-color, $ct-text-size);
117 | }
118 |
119 | .#{$ct-class-chart-line} .#{$ct-class-label},
120 | .#{$ct-class-chart-bar} .#{$ct-class-label} {
121 | @include ct-flex();
122 | }
123 |
124 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
125 | @include ct-align-justify(flex-end, flex-start);
126 | // Fallback for browsers that don't support foreignObjects
127 | text-anchor: start;
128 | }
129 |
130 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
131 | @include ct-align-justify(flex-start, flex-start);
132 | // Fallback for browsers that don't support foreignObjects
133 | text-anchor: start;
134 | }
135 |
136 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
137 | @include ct-align-justify(flex-end, flex-end);
138 | // Fallback for browsers that don't support foreignObjects
139 | text-anchor: end;
140 | }
141 |
142 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
143 | @include ct-align-justify(flex-end, flex-start);
144 | // Fallback for browsers that don't support foreignObjects
145 | text-anchor: start;
146 | }
147 |
148 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
149 | @include ct-align-justify(flex-end, center);
150 | // Fallback for browsers that don't support foreignObjects
151 | text-anchor: start;
152 | }
153 |
154 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
155 | @include ct-align-justify(flex-start, center);
156 | // Fallback for browsers that don't support foreignObjects
157 | text-anchor: start;
158 | }
159 |
160 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
161 | @include ct-align-justify(flex-end, flex-start);
162 | // Fallback for browsers that don't support foreignObjects
163 | text-anchor: start;
164 | }
165 |
166 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
167 | @include ct-align-justify(flex-start, flex-start);
168 | // Fallback for browsers that don't support foreignObjects
169 | text-anchor: start;
170 | }
171 |
172 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
173 | //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
174 | @include ct-align-justify(center, flex-end);
175 | // Fallback for browsers that don't support foreignObjects
176 | text-anchor: end;
177 | }
178 |
179 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
180 | @include ct-align-justify(center, flex-start);
181 | // Fallback for browsers that don't support foreignObjects
182 | text-anchor: end;
183 | }
184 |
185 | .#{$ct-class-grid} {
186 | @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
187 | }
188 |
189 | .#{$ct-class-point} {
190 | @include ct-chart-point($ct-point-size, $ct-point-shape);
191 | }
192 |
193 | .#{$ct-class-line} {
194 | @include ct-chart-line($ct-line-width);
195 | }
196 |
197 | .#{$ct-class-area} {
198 | @include ct-chart-area();
199 | }
200 |
201 | .#{$ct-class-bar} {
202 | @include ct-chart-bar($ct-bar-width);
203 | }
204 |
205 | .#{$ct-class-slice-donut} {
206 | @include ct-chart-donut($ct-donut-width);
207 | }
208 |
209 | @if $ct-include-colored-series {
210 | @for $i from 0 to length($ct-series-names) {
211 | .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
212 | $color: nth($ct-series-colors, $i + 1);
213 |
214 | @include ct-chart-series-color($color);
215 | }
216 | }
217 | }
218 | }
219 |
220 | @if $ct-include-classes {
221 | @include ct-chart();
222 |
223 | @if $ct-include-alternative-responsive-containers {
224 | @for $i from 0 to length($ct-scales-names) {
225 | .#{nth($ct-scales-names, $i + 1)} {
226 | @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
227 | }
228 | }
229 | }
230 | }
--------------------------------------------------------------------------------
/src/assets/sass/lbd/mixins/_vendor-prefixes.scss:
--------------------------------------------------------------------------------
1 | // User select
2 | // For selecting text on the page
3 |
4 | @mixin user-select($select) {
5 | -webkit-user-select: $select;
6 | -moz-user-select: $select;
7 | -ms-user-select: $select; // IE10+
8 | user-select: $select;
9 | }
10 |
11 | @mixin box-shadow($shadow...) {
12 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
13 | box-shadow: $shadow;
14 | }
15 |
16 | // Box sizing
17 | @mixin box-sizing($boxmodel) {
18 | -webkit-box-sizing: $boxmodel;
19 | -moz-box-sizing: $boxmodel;
20 | box-sizing: $boxmodel;
21 | }
22 |
23 |
24 | @mixin transition($time, $type){
25 | -webkit-transition: all $time $type;
26 | -moz-transition: all $time $type;
27 | -o-transition: all $time $type;
28 | -ms-transition: all $time $type;
29 | transition: all $time $type;
30 | }
31 |
32 | @mixin transform-scale($value){
33 | -webkit-transform: scale($value);
34 | -moz-transform: scale($value);
35 | -o-transform: scale($value);
36 | -ms-transform: scale($value);
37 | transform: scale($value);
38 | }
39 |
40 | @mixin transform-translate-x($value){
41 | -webkit-transform: translate3d($value, 0, 0);
42 | -moz-transform: translate3d($value, 0, 0);
43 | -o-transform: translate3d($value, 0, 0);
44 | -ms-transform: translate3d($value, 0, 0);
45 | transform: translate3d($value, 0, 0);
46 | }
47 |
48 | @mixin transform-translate-3d($value){
49 | -webkit-transform: translate3d($value, 0, 0);
50 | -moz-transform: translate3d($value, 0, 0);
51 | -o-transform: translate3d($value, 0, 0);
52 | -ms-transform: translate3d($value, 0, 0);
53 | transform: translate3d($value, 0, 0) !important;
54 | }
55 |
56 | @mixin transform-translate-y-dropdown($value){
57 | -webkit-transform: translate3d(0, $value, 0) !important;
58 | -moz-transform: translate3d(0, $value, 0) !important;
59 | -o-transform: translate3d(0, $value, 0) !important;
60 | -ms-transform: translate3d(0, $value, 0) !important;
61 | transform: translate3d(0, $value, 0) !important;
62 | }
63 |
64 | @mixin transform-translate-3d-0($value){
65 | -webkit-transform: translate3d(0, $value, 0) !important;
66 | -moz-transform: translate3d(0, $value, 0) !important;
67 | -o-transform: translate3d(0, $value, 0) !important;
68 | -ms-transform: translate3d(0, $value, 0) !important;
69 | transform: translate3d(0, $value, 0) !important;
70 | }
71 |
72 | @mixin transform-origin($coordinates){
73 | -webkit-transform-origin: $coordinates;
74 | -moz-transform-origin: $coordinates;
75 | -o-transform-origin: $coordinates;
76 | -ms-transform-origin: $coordinates;
77 | transform-origin: $coordinates;
78 | }
79 |
80 | @mixin icon-gradient ($top-color, $bottom-color){
81 | background: $top-color;
82 | background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%);
83 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top-color), color-stop(100%,$bottom-color));
84 | background: -webkit-linear-gradient(top, $top-color 0%,$bottom-color 100%);
85 | background: -o-linear-gradient(top, $top-color 0%,$bottom-color 100%);
86 | background: -ms-linear-gradient(top, $top-color 0%,$bottom-color 100%);
87 | background: linear-gradient(to bottom, $top-color 0%,$bottom-color 100%);
88 | background-size: 150% 150%;
89 | }
90 |
91 | @mixin radial-gradient($extern-color, $center-color){
92 | background: $extern-color;
93 | background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
94 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
95 | background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
96 | background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
97 | background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
98 | background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
99 | background-size: 550% 450%;
100 | }
101 |
102 | @mixin vertical-align {
103 | position: relative;
104 | top: 50%;
105 | -webkit-transform: translateY(-50%);
106 | -ms-transform: translateY(-50%);
107 | transform: translateY(-50%);
108 | }
109 |
110 | @mixin rotate-180(){
111 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
112 | -webkit-transform: rotate(180deg);
113 | -ms-transform: rotate(180deg);
114 | transform: rotate(180deg);
115 | }
116 |
117 | @mixin bar-animation($type){
118 | -webkit-animation: $type 500ms linear 0s;
119 | -moz-animation: $type 500ms linear 0s;
120 | animation: $type 500ms 0s;
121 | -webkit-animation-fill-mode: forwards;
122 | -moz-animation-fill-mode: forwards;
123 | animation-fill-mode: forwards;
124 | }
125 |
126 | @mixin topbar-x-rotation(){
127 | @keyframes topbar-x {
128 | 0% {top: 0px; transform: rotate(0deg); }
129 | 45% {top: 6px; transform: rotate(145deg); }
130 | 75% {transform: rotate(130deg); }
131 | 100% {transform: rotate(135deg); }
132 | }
133 | @-webkit-keyframes topbar-x {
134 | 0% {top: 0px; -webkit-transform: rotate(0deg); }
135 | 45% {top: 6px; -webkit-transform: rotate(145deg); }
136 | 75% {-webkit-transform: rotate(130deg); }
137 | 100% { -webkit-transform: rotate(135deg); }
138 | }
139 | @-moz-keyframes topbar-x {
140 | 0% {top: 0px; -moz-transform: rotate(0deg); }
141 | 45% {top: 6px; -moz-transform: rotate(145deg); }
142 | 75% {-moz-transform: rotate(130deg); }
143 | 100% { -moz-transform: rotate(135deg); }
144 | }
145 | }
146 |
147 | @mixin topbar-back-rotation(){
148 | @keyframes topbar-back {
149 | 0% { top: 6px; transform: rotate(135deg); }
150 | 45% { transform: rotate(-10deg); }
151 | 75% { transform: rotate(5deg); }
152 | 100% { top: 0px; transform: rotate(0); }
153 | }
154 |
155 | @-webkit-keyframes topbar-back {
156 | 0% { top: 6px; -webkit-transform: rotate(135deg); }
157 | 45% { -webkit-transform: rotate(-10deg); }
158 | 75% { -webkit-transform: rotate(5deg); }
159 | 100% { top: 0px; -webkit-transform: rotate(0); }
160 | }
161 |
162 | @-moz-keyframes topbar-back {
163 | 0% { top: 6px; -moz-transform: rotate(135deg); }
164 | 45% { -moz-transform: rotate(-10deg); }
165 | 75% { -moz-transform: rotate(5deg); }
166 | 100% { top: 0px; -moz-transform: rotate(0); }
167 | }
168 | }
169 |
170 | @mixin bottombar-x-rotation(){
171 | @keyframes bottombar-x {
172 | 0% {bottom: 0px; transform: rotate(0deg);}
173 | 45% {bottom: 6px; transform: rotate(-145deg);}
174 | 75% {transform: rotate(-130deg);}
175 | 100% {transform: rotate(-135deg);}
176 | }
177 | @-webkit-keyframes bottombar-x {
178 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);}
179 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
180 | 75% {-webkit-transform: rotate(-130deg);}
181 | 100% {-webkit-transform: rotate(-135deg);}
182 | }
183 | @-moz-keyframes bottombar-x {
184 | 0% {bottom: 0px; -moz-transform: rotate(0deg);}
185 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);}
186 | 75% {-moz-transform: rotate(-130deg);}
187 | 100% {-moz-transform: rotate(-135deg);}
188 | }
189 | }
190 |
191 | @mixin bottombar-back-rotation{
192 | @keyframes bottombar-back {
193 | 0% { bottom: 6px;transform: rotate(-135deg);}
194 | 45% { transform: rotate(10deg);}
195 | 75% { transform: rotate(-5deg);}
196 | 100% { bottom: 0px;transform: rotate(0);}
197 | }
198 | @-webkit-keyframes bottombar-back {
199 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
200 | 45% {-webkit-transform: rotate(10deg);}
201 | 75% {-webkit-transform: rotate(-5deg);}
202 | 100% {bottom: 0px;-webkit-transform: rotate(0);}
203 | }
204 | @-moz-keyframes bottombar-back {
205 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);}
206 | 45% {-moz-transform: rotate(10deg);}
207 | 75% {-moz-transform: rotate(-5deg);}
208 | 100% {bottom: 0px;-moz-transform: rotate(0);}
209 | }
210 |
211 | }
212 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_variables.scss:
--------------------------------------------------------------------------------
1 | //== Buttons
2 | //
3 | //## For each of Bootstrap's buttons, define text, background and border color.
4 |
5 | $none: 0 !default;
6 | $border-thin: 1px !default;
7 | $border-thick: 2px !default;
8 |
9 | $white-color: #FFFFFF !default;
10 | $white-bg: #FFFFFF !default;
11 |
12 | $smoke-bg: #F5F5F5 !default;
13 |
14 | $black-bg: rgba(30,30,30,.97) !default;
15 |
16 | $black-color: #333333 !default;
17 | $black-hr: #444444 !default;
18 |
19 | $light-gray: #E3E3E3 !default;
20 | $medium-gray: #DDDDDD !default;
21 | $medium-dark-gray: #AAAAAA !default;
22 | $dark-gray: #9A9A9A !default;
23 |
24 | $transparent-bg: transparent !default;
25 |
26 | $default-color: #888888 !default;
27 | $default-bg: #888888 !default;
28 | $default-states-color: #777777 !default;
29 |
30 | $primary-color: #3472F7 !default;
31 | $primary-bg: #3472F7 !default;
32 | $primary-states-color: #1D62F0 !default;
33 |
34 | $success-color: #87CB16 !default;
35 | $success-bg: #87CB16 !default;
36 | $success-states-color: #049F0C !default;
37 |
38 | $info-color: #1DC7EA !default;
39 | $info-bg: #1DC7EA !default;
40 | $info-states-color: lighten($info-color, 8%) !default;
41 |
42 | $warning-color: #FF9500 !default;
43 | $warning-bg: #FF9500 !default;
44 | $warning-states-color: #ED8D00 !default;
45 |
46 |
47 | $danger-color: #FF4A55 !default;
48 | $danger-bg: #FF4A55 !default;
49 | $danger-states-color: #EE2D20 !default;
50 |
51 |
52 |
53 | $link-disabled-color: #666666 !default;
54 |
55 |
56 | /* light colors */
57 | $light-blue: rgba($primary-color, .2);
58 | $light-azure: rgba($info-color, .2);
59 | $light-green: rgba($success-color, .2);
60 | $light-orange: rgba($warning-color, .2);
61 | $light-red: rgba($danger-color, .2);
62 |
63 |
64 | //== Components
65 | //
66 |
67 | $padding-base-vertical: 8px !default;
68 | $padding-base-horizontal: 16px !default;
69 |
70 | $padding-round-vertical: 9px !default;
71 | $padding-round-horizontal: 18px !default;
72 |
73 | $padding-simple-vertical: 10px !default;
74 | $padding-simple-horizontal: 18px !default;
75 |
76 | $padding-large-vertical: 14px !default;
77 | $padding-large-horizontal: 30px !default;
78 |
79 | $padding-small-vertical: 5px !default;
80 | $padding-small-horizontal: 10px !default;
81 |
82 | $padding-xs-vertical: 1px !default;
83 | $padding-xs-horizontal: 5px !default;
84 |
85 | $padding-label-vertical: 2px !default;
86 | $padding-label-horizontal: 12px !default;
87 |
88 | $margin-large-vertical: 30px !default;
89 | $margin-base-vertical: 15px !default;
90 |
91 | $padding-zero: 0px !default;
92 |
93 | $margin-bottom: 0 0 10px 0 !default;
94 | $border-radius-small: 3px !default;
95 | $border-radius-base: 4px !default;
96 | $border-radius-large: 6px !default;
97 | $border-radius-extreme: 10px !default;
98 |
99 | $border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
100 | $border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
101 |
102 | $btn-round-radius: 30px !default;
103 |
104 | $height-base: 40px !default;
105 |
106 | $font-size-base: 14px !default;
107 | $font-size-small: 12px !default;
108 | $font-size-medium: 16px !default;
109 | $font-size-large: 18px !default;
110 | $font-size-large-navbar: 20px !default;
111 |
112 | $font-size-h1: 52px !default;
113 | $font-size-h2: 36px !default;
114 | $font-size-h3: 28px !default;
115 | $font-size-h4: 22px !default;
116 | $font-size-h5: 16px !default;
117 | $font-size-h6: 14px !default;
118 | $font-paragraph: 16px !default;
119 | $font-size-navbar: 16px !default;
120 | $font-size-small: 12px !default;
121 |
122 | $font-weight-light: 300 !default;
123 | $font-weight-normal: 400 !default;
124 | $font-weight-semi: 500 !default;
125 | $font-weight-bold: 600 !default;
126 |
127 | $line-height-general: 1.5 !default;
128 | $line-height: 20px !default;
129 | $line-height-lg: 54px !default;
130 |
131 | $sidebar-width: calc(100% - 260px) !default;
132 |
133 |
134 | $border-radius-top: 10px 10px 0 0 !default;
135 | $border-radius-bottom: 0 0 10px 10px !default;
136 |
137 | $dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
138 |
139 | $general-transition-time: 300ms !default;
140 |
141 | $slow-transition-time: 370ms !default;
142 | $dropdown-coordinates: 29px -50px !default;
143 |
144 | $fast-transition-time: 150ms !default;
145 |
146 | $ultra-fast-transition-time: 100ms !default;
147 |
148 | $select-coordinates: 50% -40px !default;
149 |
150 | $transition-linear: linear !default;
151 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
152 | $transition-ease: ease 0s;
153 | $transition-ease-in: ease-in !default;
154 | $transition-ease-out: ease-out !default;
155 |
156 |
157 | $navbar-padding-a: 10px 15px;
158 | $navbar-margin-a: 10px 3px;
159 |
160 | $padding-social-a: 10px 5px;
161 |
162 | $navbar-margin-a-btn: 15px 3px;
163 | $navbar-margin-a-btn-round: 16px 3px;
164 |
165 | $navbar-padding-a-icons: 6px 15px;
166 | $navbar-margin-a-icons: 6px 3px;
167 |
168 | $navbar-padding-brand: 15px 15px;
169 | $navbar-margin-brand: 5px 0px;
170 |
171 | $navbar-margin-brand-icons: 12px auto;
172 |
173 | $navbar-margin-btn: 15px 3px;
174 |
175 | $height-icon: 64px !default;
176 | $width-icon: 64px !default;
177 | $padding-icon: 12px !default;
178 | $border-radius-icon: 15px !default;
179 |
180 | $size-icon: 64px;
181 | $size-icon-sm: 32px;
182 |
183 |
184 | $height-icon-sm: 32px;
185 | $width-icon-sm: 32px;
186 | $padding-icon-sm: 4px;
187 | $border-radius-icon-sm: 7px;
188 |
189 | $height-icon-message: 40px;
190 | $width-icon-message: 40px;
191 |
192 | $height-icon-message-sm: 20px;
193 | $width-icon-message-sm: 20px;
194 |
195 | $default-color-top: #d9d9d9 !default;
196 | $default-color-bottom: #909297 !default;
197 |
198 | $blue-color-top: #4087ea;
199 | $blue-color-bottom: #533ce1;
200 |
201 | $azure-color-top: #45c0fd;
202 | $azure-color-bottom: #4091ff;
203 |
204 | $green-color-top: #a1eb3a;
205 | $green-color-bottom: #6dc030;
206 |
207 | $orange-color-top: #ffb33b;
208 | $orange-color-bottom: #ff5221;
209 |
210 | $red-color-top: #ff3b30;
211 | $red-color-bottom: #bb0502;
212 |
213 | $purple-color-top: #df55e1;
214 | $purple-color-bottom: #943bea;
215 |
216 | $pink-color-top: #ff2a63;
217 | $pink-color-bottom: #ff2e2e;
218 |
219 | $black-color-top: #292929;
220 | $black-color-bottom: #0e0e0e;
221 |
222 | $social-facebook: #3b5998;
223 | $social-twitter: #55acee;
224 | $social-pinterest: #cc2127;
225 | $social-google: #dd4b39;
226 | $social-linkedin: #0976b4;
227 | $social-dribbble: #ea4c89;
228 | $social-github: #333333;
229 | $social-youtube: #e52d27;
230 | $social-stumbleupon: #eb4924;
231 | $social-reddit: #ff4500;
232 | $social-tumblr: #35465c;
233 | $social-behance: #1769ff;
234 |
235 |
236 | $filter-blue: darken($primary-color, 10%);
237 | $filter-azure: darken($info-color, 10%);
238 | $filter-green: darken($success-color, 10%);
239 | $filter-orange: darken($warning-color, 10%);
240 | $filter-red: darken($danger-color, 10%);
241 |
242 |
243 | $new-blue: #1DC7EA;
244 | $new-purple: #9368E9;
245 | $new-red: #FB404B;
246 | $new-green: #87CB16;
247 | $new-orange: #FFA534;
248 | $new-dark-blue: #1F77D0;
249 | $new-black: #5e5e5e;
250 |
251 |
252 | $topbar-x: topbar-x !default;
253 | $topbar-back: topbar-back !default;
254 | $bottombar-x: bottombar-x !default;
255 | $bottombar-back: bottombar-back !default;
256 |
257 |
258 | $white-navbar: rgba(#FFFFFF, .96);
259 | $blue-navbar: lighten($new-dark-blue, 10%);
260 | $azure-navbar: lighten($new-blue, 15%);
261 | $green-navbar: lighten($new-green, 10%);
262 | $orange-navbar: lighten($new-orange, 10%);
263 | $red-navbar: lighten($new-red, 10%);
264 |
--------------------------------------------------------------------------------
/src/pages/Overview.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
61 |
62 | 94 |
95 |
96 |
6 |
60 |
7 |
32 | Notifications Style
8 |
9 | This is a plain notification
10 |
11 |
12 |
15 | This is a notification with close button.
16 |
17 |
24 |
31 |
33 |
59 | Notification states
34 |
35 |
38 | Info - This is a regular notification made with ".alert-info"
39 |
40 |
41 |
44 | Success - This is a regular notification made with ".alert-success"
45 |
46 |
47 |
50 | Warning - This is a regular notification made with ".alert-warning"
51 |
52 |
53 |
56 | Danger - This is a regular notification made with ".alert-danger"
57 |
58 | 61 |
62 | 94 |
3 |
171 |
172 |
271 |
274 |
--------------------------------------------------------------------------------
/src/assets/sass/lbd/_navbars.scss:
--------------------------------------------------------------------------------
1 | .nav {
2 | .nav-item{
3 | .nav-link:hover,
4 | .nav-link:focus{
5 | background-color: transparent;
6 | }
7 | }
8 |
9 | }
10 | .navbar{
11 | border: $none;
12 | font-size: $font-size-navbar;
13 | border-radius: 0;
14 | min-height: 50px;
15 | background-color: $white-navbar;
16 | border-bottom: 1px solid rgba(0, 0, 0, 0.1);
17 | padding: 5px 15px;
18 |
19 | .navbar-brand {
20 | font-weight: 400;
21 | margin: 5px 0px;
22 | font-size: 20px;
23 | color: $default-color;
24 |
25 | &:hover{
26 | color: #5e5e5e;
27 | }
28 | }
29 | .navbar-toggler{
30 | width: 37px;
31 | height: 27px;
32 | vertical-align: middle;
33 | outline: 0;
34 | cursor: pointer;
35 |
36 | &.navbar-toggler-left{
37 | position: relative;
38 | left: 0;
39 | padding-left: 0;
40 | }
41 |
42 | & .navbar-toggler-bar{
43 | width: 3px;
44 | height: 3px;
45 | border-radius: 50%;
46 | margin: 0 auto;
47 | }
48 | .burger-lines{
49 | display: block;
50 | position: relative;
51 | background-color: #888;
52 | width: 24px;
53 | height: 2px;
54 | border-radius: 1px;
55 | margin: 4px auto;
56 | }
57 | }
58 |
59 | .dropdown.nav-item{
60 | .dropdown-toggle:after{
61 | margin-top: 8px;
62 | }
63 | }
64 |
65 | .navbar-nav{
66 | align-items: center;
67 |
68 | .nav-item{
69 | .nav-link{
70 | color: $default-color;
71 | padding: $navbar-padding-a;
72 | position: relative;
73 | display: inline-flex;
74 | line-height: 1.2;
75 |
76 | &.btn{
77 | margin: $navbar-margin-a-btn;
78 | padding: $padding-base-vertical $padding-base-horizontal;
79 | }
80 |
81 | &.btn-round{
82 | margin: $navbar-margin-a-btn-round;
83 | }
84 |
85 | [class^="fa"]{
86 | font-size: $font-size-large + 1;
87 | position: relative;
88 | line-height: 40px;
89 | top: 1px;
90 | }
91 |
92 | &:hover{
93 | color: $info-color;
94 | }
95 | }
96 |
97 | .dropdown-menu{
98 | border-radius: $border-radius-extreme;
99 | margin-top: -5px;
100 |
101 | .dropdown-item{
102 | &:first-child{
103 | border-top-left-radius: 10px;
104 | border-top-right-radius: 10px;
105 | }
106 | &:last-child{
107 | border-bottom-left-radius: 10px;
108 | border-bottom-right-radius: 10px;
109 | }
110 | }
111 |
112 | .divider{
113 | height: 1px;
114 | margin: 5px 0;
115 | overflow: hidden;
116 | background-color: #e5e5e5;
117 | }
118 | }
119 | }
120 |
121 | .notification{
122 | position: absolute;
123 | background-color: #FB404B;
124 | text-align: center;
125 | border-radius: 10px;
126 | min-width: 18px;
127 | padding: 0 5px;
128 | height: 18px;
129 | font-size: 12px;
130 | color: $white-color;
131 | font-weight: bold;
132 | line-height: 18px;
133 | top: 0;
134 | left: 7px;
135 | }
136 |
137 | .dropdown-toggle:after{
138 | display: inline-block;
139 | width: 0;
140 | height: 0;
141 | margin-left: 5px;
142 | margin-top: 12px;
143 | vertical-align: middle;
144 | border-top: 4px dashed;
145 | border-top: 4px solid\9;
146 | border-right: 4px solid transparent;
147 | border-left: 4px solid transparent;
148 | }
149 |
150 |
151 | }
152 | .btn{
153 | margin: $navbar-margin-btn;
154 | font-size: $font-size-base;
155 | }
156 | .btn-simple{
157 | font-size: $font-size-medium;
158 | }
159 |
160 | &.fixed{
161 | width: calc(100% - #{$sidebar-width});
162 | right: 0;
163 | left: auto;
164 | border-radius: 0;
165 | }
166 |
167 | .nc-icon{
168 | font-weight: 700;
169 | }
170 | }
171 |
172 | .navbar-transparent, [class*="navbar-ct"]{
173 | .navbar-brand{
174 | color: $white-color;
175 | @include opacity(.9);
176 |
177 | &:focus,
178 | &:hover{
179 | background-color: transparent;
180 | @include opacity(1);
181 | color: $white-color;
182 | }
183 | }
184 |
185 | .navbar-nav{
186 | .nav-item{
187 | .nav-link:not(.btn){
188 | color: $white-color;
189 | border-color: $white-color;
190 | @include opacity(0.8);
191 | }
192 | }
193 |
194 | .active,
195 | .nav-item{
196 | .nav-link:not(.btn),
197 | .nav-link:hover:not(.btn),
198 | .nav-link:focus:not(.btn) {
199 | background-color: transparent;
200 | border-radius: 3px;
201 | color: $white-color;
202 | @include opacity(1);
203 | }
204 | }
205 |
206 | .nav .nav-item .nav-link.btn:hover{
207 | background-color: transparent;
208 | }
209 |
210 | .show{
211 | .nav-link,
212 | .nav-link:hover,
213 | .nav-link:focus{
214 | background-color: transparent;
215 | color: $white-color;
216 | @include opacity(1);
217 | }
218 | }
219 | }
220 |
221 | .btn-default{
222 | color: $white-color;
223 | border-color: $white-color;
224 | }
225 | .btn-default.btn-fill{
226 | color: $dark-gray;
227 | background-color: $white-color;
228 | @include opacity(.9);
229 | }
230 | .btn-default.btn-fill:hover,
231 | .btn-default.btn-fill:focus,
232 | .btn-default.btn-fill:active,
233 | .btn-default.btn-fill.active,
234 | .show .dropdown-toggle.btn-fill.btn-default{
235 | border-color: $white-color;
236 | @include opacity(1);
237 | }
238 |
239 | }
240 | .navbar-transparent{
241 | .dropdown-menu .divider{
242 | background-color: rgba($white-color,.2);
243 | }
244 | }
245 |
246 |
247 | .navbar-default {
248 | background-color: $white-navbar;
249 | border-bottom: 1px solid rgba(0, 0, 0, 0.1);
250 |
251 | .navbar-nav{
252 | .nav-item{
253 | .nav-link:not(.btn){
254 | color: $dark-gray;
255 | }
256 | }
257 |
258 | .active .nav-link,
259 | .active .nav-link:not(.btn):hover,
260 | .active .nav-link:not(.btn):focus,
261 | .nav-item .nav-link:not(.btn):hover,
262 | .nav-item .nav-link:not(.btn):focus{
263 | background-color: transparent;
264 | border-radius: 3px;
265 | color: $info-color;
266 | @include opacity(1);
267 | }
268 |
269 | .show{
270 | .nav-link,
271 | .nav-link:hover,
272 | .nav-link:focus{
273 | background-color: transparent;
274 | color: $info-color;
275 | }
276 | }
277 |
278 |
279 | .navbar-toggle:hover,.navbar-toggle:focus {
280 | background-color: transparent;
281 | }
282 |
283 | }
284 |
285 | &:not(.navbar-transparent) .btn-default:hover{
286 | color: $info-color;
287 | border-color: $info-color;
288 | }
289 | &:not(.navbar-transparent) .btn-neutral,
290 | &:not(.navbar-transparent) .btn-neutral:hover,
291 | &:not(.navbar-transparent) .btn-neutral:active{
292 | color: $dark-gray;
293 | }
294 | }
295 |
296 | /* Navbar with icons */
297 |
298 | .navbar-icons{
299 | &.navbar .navbar-brand{
300 | margin-top: 12px;
301 | margin-bottom: 12px;
302 | }
303 | .navbar-nav{
304 | .nav-item{
305 | .nav-link{
306 | text-align: center;
307 | padding: $navbar-padding-a-icons;
308 | margin: $navbar-margin-a-icons;
309 | }
310 | }
311 |
312 | [class^="pe"] {
313 | font-size: 30px;
314 | position: relative;
315 | }
316 | p {
317 | margin: 3px 0 0;
318 | }
319 | }
320 | }
321 |
322 | .navbar-form{
323 | @include box-shadow(none);
324 | .form-control{
325 | @include light-form();
326 | height: 22px;
327 | font-size: $font-size-navbar;
328 | line-height: $line-height-general;
329 | color: $light-gray;
330 | }
331 | .navbar-transparent & .form-control,
332 | [class*="navbar-ct"] & .form-control{
333 | color: $white-color;
334 | border: $none;
335 | border-bottom: 1px solid rgba($white-color,.6);
336 | }
337 |
338 | }
339 |
340 | .navbar-ct-blue{
341 | @include navbar-color($blue-navbar);
342 | }
343 | .navbar-ct-azure{
344 | @include navbar-color($azure-navbar);
345 | }
346 | .navbar-ct-green{
347 | @include navbar-color($green-navbar);
348 | }
349 | .navbar-ct-orange{
350 | @include navbar-color($orange-navbar);
351 | }
352 | .navbar-ct-red{
353 | @include navbar-color($red-navbar);
354 | }
355 |
356 | .navbar-transparent{
357 | padding-top: 15px;
358 | background-color: transparent;
359 | border-bottom: 1px solid transparent;
360 | }
361 |
362 | .navbar-toggle{
363 | margin-top: 19px;
364 | margin-bottom: 19px;
365 | border: $none;
366 |
367 | .icon-bar {
368 | background-color: $white-color;
369 | }
370 | .navbar-collapse,
371 | .navbar-form {
372 | border-color: transparent;
373 | }
374 |
375 | &.navbar-default .navbar-toggle:hover,
376 | &.navbar-default .navbar-toggle:focus {
377 | background-color: transparent;
378 | }
379 | }
380 |
--------------------------------------------------------------------------------
4 |
170 |
5 |
66 |
6 |
7 |
18 |
19 |
20 |
8 |
9 |
10 |
11 |
14 | Capacity
12 |105GB
13 |
15 | Updated now
16 |
17 |
21 |
22 |
33 |
34 |
35 |
23 |
24 |
25 |
26 |
29 | Revenue
27 |$1,345
28 |
30 | Last day
31 |
32 |
36 |
37 |
48 |
49 |
50 |
38 |
39 |
40 |
41 |
44 | Errors
42 |23
43 |
45 | Last day
46 |
47 |
51 |
52 |
63 |
64 |
65 |
53 |
54 |
55 |
56 |
59 | Followers
57 |+45
58 |
60 | Updated now
61 |
62 |
67 |
109 |
110 |
68 |
71 |
72 |
82 |
87 |
88 |
89 | Users Behavior
73 |24 Hours performance
74 | 75 | 76 |
77 | Open
78 | Click
79 | Click Second Time
80 |
81 | 82 |
83 | Updated 3 minutes ago
84 |
85 |
86 |
90 |
91 |
92 |
102 |
107 |
108 | Email Statistics
93 |Last Campaign Performance
94 | 95 | 96 |
97 | Open
98 | Bounce
99 | Unsubscribe
100 |
101 | 102 |
103 | Campaign sent 2 days ago
104 |
105 |
106 |
111 |
169 |
112 |
117 |
118 |
127 |
132 |
133 |
134 | 2014 Sales
119 |All products including Taxes
120 | 121 | 122 |
123 | Tesla Model S
124 | BMW 5 Series
125 |
126 | 127 |
128 | Data information certified
129 |
130 |
131 |
135 |
136 |
137 |
142 |
143 |
144 |
145 |
146 |
148 | {{row.title}}
149 |
150 |
153 |
156 |
157 |
158 |
159 |
165 |
166 |
167 |
168 | Tasks
138 |Backend development
139 | 140 |