`)
2 | .dropup,
3 | .dropright,
4 | .dropdown,
5 | .dropleft {
6 | position: relative;
7 | }
8 |
9 | .dropdown-toggle {
10 | white-space: nowrap;
11 |
12 | // Generate the caret automatically
13 | @include caret;
14 | }
15 |
16 | // The dropdown menu
17 | .dropdown-menu {
18 | position: absolute;
19 | top: 100%;
20 | left: 0;
21 | z-index: $zindex-dropdown;
22 | display: none; // none by default, but block on "open" of the menu
23 | float: left;
24 | min-width: $dropdown-min-width;
25 | padding: $dropdown-padding-y 0;
26 | margin: $dropdown-spacer 0 0; // override default ul
27 | @include font-size($dropdown-font-size);
28 | color: $dropdown-color;
29 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
30 | list-style: none;
31 | background-color: $dropdown-bg;
32 | background-clip: padding-box;
33 | border: $dropdown-border-width solid $dropdown-border-color;
34 | @include border-radius($dropdown-border-radius);
35 | @include box-shadow($dropdown-box-shadow);
36 | }
37 |
38 | @each $breakpoint in map-keys($grid-breakpoints) {
39 | @include media-breakpoint-up($breakpoint) {
40 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
41 |
42 | .dropdown-menu#{$infix}-left {
43 | right: auto;
44 | left: 0;
45 | }
46 |
47 | .dropdown-menu#{$infix}-right {
48 | right: 0;
49 | left: auto;
50 | }
51 | }
52 | }
53 |
54 | // Allow for dropdowns to go bottom up (aka, dropup-menu)
55 | // Just add .dropup after the standard .dropdown class and you're set.
56 | .dropup {
57 | .dropdown-menu {
58 | top: auto;
59 | bottom: 100%;
60 | margin-top: 0;
61 | margin-bottom: $dropdown-spacer;
62 | }
63 |
64 | .dropdown-toggle {
65 | @include caret(up);
66 | }
67 | }
68 |
69 | .dropright {
70 | .dropdown-menu {
71 | top: 0;
72 | right: auto;
73 | left: 100%;
74 | margin-top: 0;
75 | margin-left: $dropdown-spacer;
76 | }
77 |
78 | .dropdown-toggle {
79 | @include caret(right);
80 | &::after {
81 | vertical-align: 0;
82 | }
83 | }
84 | }
85 |
86 | .dropleft {
87 | .dropdown-menu {
88 | top: 0;
89 | right: 100%;
90 | left: auto;
91 | margin-top: 0;
92 | margin-right: $dropdown-spacer;
93 | }
94 |
95 | .dropdown-toggle {
96 | @include caret(left);
97 | &::before {
98 | vertical-align: 0;
99 | }
100 | }
101 | }
102 |
103 | // When enabled Popper.js, reset basic dropdown position
104 | // stylelint-disable-next-line no-duplicate-selectors
105 | .dropdown-menu {
106 | &[x-placement^="top"],
107 | &[x-placement^="right"],
108 | &[x-placement^="bottom"],
109 | &[x-placement^="left"] {
110 | right: auto;
111 | bottom: auto;
112 | }
113 | }
114 |
115 | // Dividers (basically an `
`) within the dropdown
116 | .dropdown-divider {
117 | @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y);
118 | }
119 |
120 | // Links, buttons, and more within the dropdown menu
121 | //
122 | // `
`-specific styles are denoted with `// For s`
123 | .dropdown-item {
124 | display: block;
125 | width: 100%; // For ``s
126 | padding: $dropdown-item-padding-y $dropdown-item-padding-x;
127 | clear: both;
128 | font-weight: $font-weight-normal;
129 | color: $dropdown-link-color;
130 | text-align: inherit; // For ``s
131 | white-space: nowrap; // prevent links from randomly breaking onto new lines
132 | background-color: transparent; // For ``s
133 | border: 0; // For ``s
134 |
135 | // Prevent dropdown overflow if there's no padding
136 | // See https://github.com/twbs/bootstrap/pull/27703
137 | @if $dropdown-padding-y == 0 {
138 | &:first-child {
139 | @include border-top-radius($dropdown-inner-border-radius);
140 | }
141 |
142 | &:last-child {
143 | @include border-bottom-radius($dropdown-inner-border-radius);
144 | }
145 | }
146 |
147 | @include hover-focus {
148 | color: $dropdown-link-hover-color;
149 | text-decoration: none;
150 | @include gradient-bg($dropdown-link-hover-bg);
151 | }
152 |
153 | &.active,
154 | &:active {
155 | color: $dropdown-link-active-color;
156 | text-decoration: none;
157 | @include gradient-bg($dropdown-link-active-bg);
158 | }
159 |
160 | &.disabled,
161 | &:disabled {
162 | color: $dropdown-link-disabled-color;
163 | pointer-events: none;
164 | background-color: transparent;
165 | // Remove CSS gradients if they're enabled
166 | @if $enable-gradients {
167 | background-image: none;
168 | }
169 | }
170 | }
171 |
172 | .dropdown-menu.show {
173 | display: block;
174 | }
175 |
176 | // Dropdown section headers
177 | .dropdown-header {
178 | display: block;
179 | padding: $dropdown-padding-y $dropdown-item-padding-x;
180 | margin-bottom: 0; // for use with heading elements
181 | @include font-size($font-size-sm);
182 | color: $dropdown-header-color;
183 | white-space: nowrap; // as with > li > a
184 | }
185 |
186 | // Dropdown text
187 | .dropdown-item-text {
188 | display: block;
189 | padding: $dropdown-item-padding-y $dropdown-item-padding-x;
190 | color: $dropdown-link-color;
191 | }
192 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_functions.scss:
--------------------------------------------------------------------------------
1 | // Bootstrap functions
2 | //
3 | // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
4 |
5 | // Ascending
6 | // Used to evaluate Sass maps like our grid breakpoints.
7 | @mixin _assert-ascending($map, $map-name) {
8 | $prev-key: null;
9 | $prev-num: null;
10 | @each $key, $num in $map {
11 | @if $prev-num == null or unit($num) == "%" {
12 | // Do nothing
13 | } @else if not comparable($prev-num, $num) {
14 | @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
15 | } @else if $prev-num >= $num {
16 | @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
17 | }
18 | $prev-key: $key;
19 | $prev-num: $num;
20 | }
21 | }
22 |
23 | // Starts at zero
24 | // Used to ensure the min-width of the lowest breakpoint starts at 0.
25 | @mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
26 | $values: map-values($map);
27 | $first-value: nth($values, 1);
28 | @if $first-value != 0 {
29 | @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
30 | }
31 | }
32 |
33 | // Replace `$search` with `$replace` in `$string`
34 | // Used on our SVG icon backgrounds for custom forms.
35 | //
36 | // @author Hugo Giraudel
37 | // @param {String} $string - Initial string
38 | // @param {String} $search - Substring to replace
39 | // @param {String} $replace ('') - New value
40 | // @return {String} - Updated string
41 | @function str-replace($string, $search, $replace: "") {
42 | $index: str-index($string, $search);
43 |
44 | @if $index {
45 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
46 | }
47 |
48 | @return $string;
49 | }
50 |
51 | // Color contrast
52 | @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
53 | $r: red($color);
54 | $g: green($color);
55 | $b: blue($color);
56 |
57 | $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
58 |
59 | @if ($yiq >= $yiq-contrasted-threshold) {
60 | @return $dark;
61 | } @else {
62 | @return $light;
63 | }
64 | }
65 |
66 | // Retrieve color Sass maps
67 | @function color($key: "blue") {
68 | @return map-get($colors, $key);
69 | }
70 |
71 | @function theme-color($key: "primary") {
72 | @return map-get($theme-colors, $key);
73 | }
74 |
75 | @function gray($key: "100") {
76 | @return map-get($grays, $key);
77 | }
78 |
79 | // Request a theme color level
80 | @function theme-color-level($color-name: "primary", $level: 0) {
81 | $color: theme-color($color-name);
82 | $color-base: if($level > 0, $black, $white);
83 | $level: abs($level);
84 |
85 | @return mix($color-base, $color, $level * $theme-color-interval);
86 | }
87 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_grid.scss:
--------------------------------------------------------------------------------
1 | // Container widths
2 | //
3 | // Set the container width, and override it for fixed navbars in media queries.
4 |
5 | @if $enable-grid-classes {
6 | .container {
7 | @include make-container();
8 | @include make-container-max-widths();
9 | }
10 | }
11 |
12 | // Fluid container
13 | //
14 | // Utilizes the mixin meant for fixed width containers, but with 100% width for
15 | // fluid, full width layouts.
16 |
17 | @if $enable-grid-classes {
18 | .container-fluid {
19 | @include make-container();
20 | }
21 | }
22 |
23 | // Row
24 | //
25 | // Rows contain and clear the floats of your columns.
26 |
27 | @if $enable-grid-classes {
28 | .row {
29 | @include make-row();
30 | }
31 |
32 | // Remove the negative margin from default .row, then the horizontal padding
33 | // from all immediate children columns (to prevent runaway style inheritance).
34 | .no-gutters {
35 | margin-right: 0;
36 | margin-left: 0;
37 |
38 | > .col,
39 | > [class*="col-"] {
40 | padding-right: 0;
41 | padding-left: 0;
42 | }
43 | }
44 | }
45 |
46 | // Columns
47 | //
48 | // Common styles for small and large grid columns
49 |
50 | @if $enable-grid-classes {
51 | @include make-grid-columns();
52 | }
53 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_images.scss:
--------------------------------------------------------------------------------
1 | // Responsive images (ensure images don't scale beyond their parents)
2 | //
3 | // This is purposefully opt-in via an explicit class rather than being the default for all `, , or .
4 |
5 | .list-group {
6 | display: flex;
7 | flex-direction: column;
8 |
9 | // No need to set list-style: none; since .list-group-item is block level
10 | padding-left: 0; // reset padding because ul and ol
11 | margin-bottom: 0;
12 | }
13 |
14 |
15 | // Interactive list items
16 | //
17 | // Use anchor or button elements instead of `li`s or `div`s to create interactive
18 | // list items. Includes an extra `.active` modifier class for selected items.
19 |
20 | .list-group-item-action {
21 | width: 100%; // For `
`s (anchors become 100% by default though)
22 | color: $list-group-action-color;
23 | text-align: inherit; // For ``s (anchors inherit)
24 |
25 | // Hover state
26 | @include hover-focus {
27 | z-index: 1; // Place hover/focus items above their siblings for proper border styling
28 | color: $list-group-action-hover-color;
29 | text-decoration: none;
30 | background-color: $list-group-hover-bg;
31 | }
32 |
33 | &:active {
34 | color: $list-group-action-active-color;
35 | background-color: $list-group-action-active-bg;
36 | }
37 | }
38 |
39 |
40 | // Individual list items
41 | //
42 | // Use on `li`s or `div`s within the `.list-group` parent.
43 |
44 | .list-group-item {
45 | position: relative;
46 | display: block;
47 | padding: $list-group-item-padding-y $list-group-item-padding-x;
48 | // Place the border on the list items and negative margin up for better styling
49 | margin-bottom: -$list-group-border-width;
50 | color: $list-group-color;
51 | background-color: $list-group-bg;
52 | border: $list-group-border-width solid $list-group-border-color;
53 |
54 | &:first-child {
55 | @include border-top-radius($list-group-border-radius);
56 | }
57 |
58 | &:last-child {
59 | margin-bottom: 0;
60 | @include border-bottom-radius($list-group-border-radius);
61 | }
62 |
63 | &.disabled,
64 | &:disabled {
65 | color: $list-group-disabled-color;
66 | pointer-events: none;
67 | background-color: $list-group-disabled-bg;
68 | }
69 |
70 | // Include both here for ``s and ``s
71 | &.active {
72 | z-index: 2; // Place active items above their siblings for proper border styling
73 | color: $list-group-active-color;
74 | background-color: $list-group-active-bg;
75 | border-color: $list-group-active-border-color;
76 | }
77 | }
78 |
79 |
80 | // Horizontal
81 | //
82 | // Change the layout of list group items from vertical (default) to horizontal.
83 |
84 | @each $breakpoint in map-keys($grid-breakpoints) {
85 | @include media-breakpoint-up($breakpoint) {
86 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
87 |
88 | .list-group-horizontal#{$infix} {
89 | flex-direction: row;
90 |
91 | .list-group-item {
92 | margin-right: -$list-group-border-width;
93 | margin-bottom: 0;
94 |
95 | &:first-child {
96 | @include border-left-radius($list-group-border-radius);
97 | @include border-top-right-radius(0);
98 | }
99 |
100 | &:last-child {
101 | margin-right: 0;
102 | @include border-right-radius($list-group-border-radius);
103 | @include border-bottom-left-radius(0);
104 | }
105 | }
106 | }
107 | }
108 | }
109 |
110 |
111 | // Flush list items
112 | //
113 | // Remove borders and border-radius to keep list group items edge-to-edge. Most
114 | // useful within other components (e.g., cards).
115 |
116 | .list-group-flush {
117 | .list-group-item {
118 | border-right: 0;
119 | border-left: 0;
120 | @include border-radius(0);
121 |
122 | &:last-child {
123 | margin-bottom: -$list-group-border-width;
124 | }
125 | }
126 |
127 | &:first-child {
128 | .list-group-item:first-child {
129 | border-top: 0;
130 | }
131 | }
132 |
133 | &:last-child {
134 | .list-group-item:last-child {
135 | margin-bottom: 0;
136 | border-bottom: 0;
137 | }
138 | }
139 | }
140 |
141 |
142 | // Contextual variants
143 | //
144 | // Add modifier classes to change text and background color on individual items.
145 | // Organizationally, this must come after the `:hover` states.
146 |
147 | @each $color, $value in $theme-colors {
148 | @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
149 | }
150 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_media.scss:
--------------------------------------------------------------------------------
1 | .media {
2 | display: flex;
3 | align-items: flex-start;
4 | }
5 |
6 | .media-body {
7 | flex: 1;
8 | }
9 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_mixins.scss:
--------------------------------------------------------------------------------
1 | // Toggles
2 | //
3 | // Used in conjunction with global variables to enable certain theme features.
4 |
5 | // Vendor
6 | @import "vendor/rfs";
7 |
8 | // Deprecate
9 | @import "mixins/deprecate";
10 |
11 | // Utilities
12 | @import "mixins/breakpoints";
13 | @import "mixins/hover";
14 | @import "mixins/image";
15 | @import "mixins/badge";
16 | @import "mixins/resize";
17 | @import "mixins/screen-reader";
18 | @import "mixins/size";
19 | @import "mixins/reset-text";
20 | @import "mixins/text-emphasis";
21 | @import "mixins/text-hide";
22 | @import "mixins/text-truncate";
23 | @import "mixins/visibility";
24 |
25 | // // Components
26 | @import "mixins/alert";
27 | @import "mixins/buttons";
28 | @import "mixins/caret";
29 | @import "mixins/pagination";
30 | @import "mixins/lists";
31 | @import "mixins/list-group";
32 | @import "mixins/nav-divider";
33 | @import "mixins/forms";
34 | @import "mixins/table-row";
35 |
36 | // // Skins
37 | @import "mixins/background-variant";
38 | @import "mixins/border-radius";
39 | @import "mixins/box-shadow";
40 | @import "mixins/gradients";
41 | @import "mixins/transition";
42 |
43 | // // Layout
44 | @import "mixins/clearfix";
45 | @import "mixins/grid-framework";
46 | @import "mixins/grid";
47 | @import "mixins/float";
48 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_nav.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | //
3 | // Kickstart any navigation component with a set of style resets. Works with
4 | // ``s or ``s.
5 |
6 | .nav {
7 | display: flex;
8 | flex-wrap: wrap;
9 | padding-left: 0;
10 | margin-bottom: 0;
11 | list-style: none;
12 | }
13 |
14 | .nav-link {
15 | display: block;
16 | padding: $nav-link-padding-y $nav-link-padding-x;
17 |
18 | @include hover-focus {
19 | text-decoration: none;
20 | }
21 |
22 | // Disabled state lightens text
23 | &.disabled {
24 | color: $nav-link-disabled-color;
25 | pointer-events: none;
26 | cursor: default;
27 | }
28 | }
29 |
30 | //
31 | // Tabs
32 | //
33 |
34 | .nav-tabs {
35 | border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
36 |
37 | .nav-item {
38 | margin-bottom: -$nav-tabs-border-width;
39 | }
40 |
41 | .nav-link {
42 | border: $nav-tabs-border-width solid transparent;
43 | @include border-top-radius($nav-tabs-border-radius);
44 |
45 | @include hover-focus {
46 | border-color: $nav-tabs-link-hover-border-color;
47 | }
48 |
49 | &.disabled {
50 | color: $nav-link-disabled-color;
51 | background-color: transparent;
52 | border-color: transparent;
53 | }
54 | }
55 |
56 | .nav-link.active,
57 | .nav-item.show .nav-link {
58 | color: $nav-tabs-link-active-color;
59 | background-color: $nav-tabs-link-active-bg;
60 | border-color: $nav-tabs-link-active-border-color;
61 | }
62 |
63 | .dropdown-menu {
64 | // Make dropdown border overlap tab border
65 | margin-top: -$nav-tabs-border-width;
66 | // Remove the top rounded corners here since there is a hard edge above the menu
67 | @include border-top-radius(0);
68 | }
69 | }
70 |
71 |
72 | //
73 | // Pills
74 | //
75 |
76 | .nav-pills {
77 | .nav-link {
78 | @include border-radius($nav-pills-border-radius);
79 | }
80 |
81 | .nav-link.active,
82 | .show > .nav-link {
83 | color: $nav-pills-link-active-color;
84 | background-color: $nav-pills-link-active-bg;
85 | }
86 | }
87 |
88 |
89 | //
90 | // Justified variants
91 | //
92 |
93 | .nav-fill {
94 | .nav-item {
95 | flex: 1 1 auto;
96 | text-align: center;
97 | }
98 | }
99 |
100 | .nav-justified {
101 | .nav-item {
102 | flex-basis: 0;
103 | flex-grow: 1;
104 | text-align: center;
105 | }
106 | }
107 |
108 |
109 | // Tabbable tabs
110 | //
111 | // Hide tabbable panes to start, show them when `.active`
112 |
113 | .tab-content {
114 | > .tab-pane {
115 | display: none;
116 | }
117 | > .active {
118 | display: block;
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/assets/scss/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 |
32 | .page-item {
33 | &:first-child {
34 | .page-link {
35 | margin-left: 0;
36 | @include border-left-radius($border-radius);
37 | }
38 | }
39 | &:last-child {
40 | .page-link {
41 | @include border-right-radius($border-radius);
42 | }
43 | }
44 |
45 | &.active .page-link {
46 | z-index: 1;
47 | color: $pagination-active-color;
48 | background-color: $pagination-active-bg;
49 | border-color: $pagination-active-border-color;
50 | }
51 |
52 | &.disabled .page-link {
53 | color: $pagination-disabled-color;
54 | pointer-events: none;
55 | // Opinionated: remove the "hand" cursor set previously for .page-link
56 | cursor: auto;
57 | background-color: $pagination-disabled-bg;
58 | border-color: $pagination-disabled-border-color;
59 | }
60 | }
61 |
62 |
63 | //
64 | // Sizing
65 | //
66 |
67 | .pagination-lg {
68 | @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
69 | }
70 |
71 | .pagination-sm {
72 | @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
73 | }
74 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_popover.scss:
--------------------------------------------------------------------------------
1 | .popover {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | z-index: $zindex-popover;
6 | display: block;
7 | max-width: $popover-max-width;
8 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
9 | // So reset our font and text properties to avoid inheriting weird values.
10 | @include reset-text();
11 | @include font-size($popover-font-size);
12 | // Allow breaking very long words so they don't overflow the popover's bounds
13 | word-wrap: break-word;
14 | background-color: $popover-bg;
15 | background-clip: padding-box;
16 | border: $popover-border-width solid $popover-border-color;
17 | @include border-radius($popover-border-radius);
18 | @include box-shadow($popover-box-shadow);
19 |
20 | .arrow {
21 | position: absolute;
22 | display: block;
23 | width: $popover-arrow-width;
24 | height: $popover-arrow-height;
25 | margin: 0 $border-radius-lg;
26 |
27 | &::before,
28 | &::after {
29 | position: absolute;
30 | display: block;
31 | content: "";
32 | border-color: transparent;
33 | border-style: solid;
34 | }
35 | }
36 | }
37 |
38 | .bs-popover-top {
39 | margin-bottom: $popover-arrow-height;
40 |
41 | > .arrow {
42 | bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
43 |
44 | &::before {
45 | bottom: 0;
46 | border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
47 | border-top-color: $popover-arrow-outer-color;
48 | }
49 |
50 | &::after {
51 | bottom: $popover-border-width;
52 | border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
53 | border-top-color: $popover-arrow-color;
54 | }
55 | }
56 | }
57 |
58 | .bs-popover-right {
59 | margin-left: $popover-arrow-height;
60 |
61 | > .arrow {
62 | left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
63 | width: $popover-arrow-height;
64 | height: $popover-arrow-width;
65 | margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
66 |
67 | &::before {
68 | left: 0;
69 | border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
70 | border-right-color: $popover-arrow-outer-color;
71 | }
72 |
73 | &::after {
74 | left: $popover-border-width;
75 | border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
76 | border-right-color: $popover-arrow-color;
77 | }
78 | }
79 | }
80 |
81 | .bs-popover-bottom {
82 | margin-top: $popover-arrow-height;
83 |
84 | > .arrow {
85 | top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
86 |
87 | &::before {
88 | top: 0;
89 | border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
90 | border-bottom-color: $popover-arrow-outer-color;
91 | }
92 |
93 | &::after {
94 | top: $popover-border-width;
95 | border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
96 | border-bottom-color: $popover-arrow-color;
97 | }
98 | }
99 |
100 | // This will remove the popover-header's border just below the arrow
101 | .popover-header::before {
102 | position: absolute;
103 | top: 0;
104 | left: 50%;
105 | display: block;
106 | width: $popover-arrow-width;
107 | margin-left: -$popover-arrow-width / 2;
108 | content: "";
109 | border-bottom: $popover-border-width solid $popover-header-bg;
110 | }
111 | }
112 |
113 | .bs-popover-left {
114 | margin-right: $popover-arrow-height;
115 |
116 | > .arrow {
117 | right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
118 | width: $popover-arrow-height;
119 | height: $popover-arrow-width;
120 | margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
121 |
122 | &::before {
123 | right: 0;
124 | border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
125 | border-left-color: $popover-arrow-outer-color;
126 | }
127 |
128 | &::after {
129 | right: $popover-border-width;
130 | border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
131 | border-left-color: $popover-arrow-color;
132 | }
133 | }
134 | }
135 |
136 | .bs-popover-auto {
137 | &[x-placement^="top"] {
138 | @extend .bs-popover-top;
139 | }
140 | &[x-placement^="right"] {
141 | @extend .bs-popover-right;
142 | }
143 | &[x-placement^="bottom"] {
144 | @extend .bs-popover-bottom;
145 | }
146 | &[x-placement^="left"] {
147 | @extend .bs-popover-left;
148 | }
149 | }
150 |
151 |
152 | // Offset the popover to account for the popover arrow
153 | .popover-header {
154 | padding: $popover-header-padding-y $popover-header-padding-x;
155 | margin-bottom: 0; // Reset the default from Reboot
156 | @include font-size($font-size-base);
157 | color: $popover-header-color;
158 | background-color: $popover-header-bg;
159 | border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
160 | $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
161 | @include border-top-radius($offset-border-width);
162 |
163 | &:empty {
164 | display: none;
165 | }
166 | }
167 |
168 | .popover-body {
169 | padding: $popover-body-padding-y $popover-body-padding-x;
170 | color: $popover-body-color;
171 | }
172 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_print.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important, selector-no-qualifying-type
2 |
3 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
4 |
5 | // ==========================================================================
6 | // Print styles.
7 | // Inlined to avoid the additional HTTP request:
8 | // https://www.phpied.com/delay-loading-your-print-css/
9 | // ==========================================================================
10 |
11 | @if $enable-print-styles {
12 | @media print {
13 | *,
14 | *::before,
15 | *::after {
16 | // Bootstrap specific; comment out `color` and `background`
17 | //color: $black !important; // Black prints faster
18 | text-shadow: none !important;
19 | //background: transparent !important;
20 | box-shadow: none !important;
21 | }
22 |
23 | a {
24 | &:not(.btn) {
25 | text-decoration: underline;
26 | }
27 | }
28 |
29 | // Bootstrap specific; comment the following selector out
30 | //a[href]::after {
31 | // content: " (" attr(href) ")";
32 | //}
33 |
34 | abbr[title]::after {
35 | content: " (" attr(title) ")";
36 | }
37 |
38 | // Bootstrap specific; comment the following selector out
39 | //
40 | // Don't show links that are fragment identifiers,
41 | // or use the `javascript:` pseudo protocol
42 | //
43 |
44 | //a[href^="#"]::after,
45 | //a[href^="javascript:"]::after {
46 | // content: "";
47 | //}
48 |
49 | pre {
50 | white-space: pre-wrap !important;
51 | }
52 | pre,
53 | blockquote {
54 | border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
55 | page-break-inside: avoid;
56 | }
57 |
58 | //
59 | // Printing Tables:
60 | // http://css-discuss.incutio.com/wiki/Printing_Tables
61 | //
62 |
63 | thead {
64 | display: table-header-group;
65 | }
66 |
67 | tr,
68 | img {
69 | page-break-inside: avoid;
70 | }
71 |
72 | p,
73 | h2,
74 | h3 {
75 | orphans: 3;
76 | widows: 3;
77 | }
78 |
79 | h2,
80 | h3 {
81 | page-break-after: avoid;
82 | }
83 |
84 | // Bootstrap specific changes start
85 |
86 | // Specify a size and min-width to make printing closer across browsers.
87 | // We don't set margin here because it breaks `size` in Chrome. We also
88 | // don't use `!important` on `size` as it breaks in Chrome.
89 | @page {
90 | size: $print-page-size;
91 | }
92 | body {
93 | min-width: $print-body-min-width !important;
94 | }
95 | .container {
96 | min-width: $print-body-min-width !important;
97 | }
98 |
99 | // Bootstrap components
100 | .navbar {
101 | display: none;
102 | }
103 | .badge {
104 | border: $border-width solid $black;
105 | }
106 |
107 | .table {
108 | border-collapse: collapse !important;
109 |
110 | td,
111 | th {
112 | background-color: $white !important;
113 | }
114 | }
115 |
116 | .table-bordered {
117 | th,
118 | td {
119 | border: 1px solid $gray-300 !important;
120 | }
121 | }
122 |
123 | .table-dark {
124 | color: inherit;
125 |
126 | th,
127 | td,
128 | thead th,
129 | tbody + tbody {
130 | border-color: $table-border-color;
131 | }
132 | }
133 |
134 | .table .thead-dark th {
135 | color: inherit;
136 | border-color: $table-border-color;
137 | }
138 |
139 | // Bootstrap specific changes end
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_progress.scss:
--------------------------------------------------------------------------------
1 | // Disable animation if transitions are disabled
2 | @if $enable-transitions {
3 | @keyframes progress-bar-stripes {
4 | from { background-position: $progress-height 0; }
5 | to { background-position: 0 0; }
6 | }
7 | }
8 |
9 | .progress {
10 | display: flex;
11 | height: $progress-height;
12 | overflow: hidden; // force rounded corners by cropping it
13 | @include font-size($progress-font-size);
14 | background-color: $progress-bg;
15 | @include border-radius($progress-border-radius);
16 | @include box-shadow($progress-box-shadow);
17 | }
18 |
19 | .progress-bar {
20 | display: flex;
21 | flex-direction: column;
22 | justify-content: center;
23 | color: $progress-bar-color;
24 | text-align: center;
25 | white-space: nowrap;
26 | background-color: $progress-bar-bg;
27 | @include transition($progress-bar-transition);
28 | }
29 |
30 | .progress-bar-striped {
31 | @include gradient-striped();
32 | background-size: $progress-height $progress-height;
33 | }
34 |
35 | @if $enable-transitions {
36 | .progress-bar-animated {
37 | animation: progress-bar-stripes $progress-bar-animation-timing;
38 |
39 | @media (prefers-reduced-motion: reduce) {
40 | animation: none;
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_root.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | // Custom variable values only support SassScript inside `#{}`.
3 | @each $color, $value in $colors {
4 | --#{$color}: #{$value};
5 | }
6 |
7 | @each $color, $value in $theme-colors {
8 | --#{$color}: #{$value};
9 | }
10 |
11 | @each $bp, $value in $grid-breakpoints {
12 | --breakpoint-#{$bp}: #{$value};
13 | }
14 |
15 | // Use `inspect` for lists so that quoted items keep the quotes.
16 | // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
17 | --font-family-sans-serif: #{inspect($font-family-sans-serif)};
18 | --font-family-monospace: #{inspect($font-family-monospace)};
19 | }
20 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_spinners.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Rotating border
3 | //
4 |
5 | @keyframes spinner-border {
6 | to { transform: rotate(360deg); }
7 | }
8 |
9 | .spinner-border {
10 | display: inline-block;
11 | width: $spinner-width;
12 | height: $spinner-height;
13 | vertical-align: text-bottom;
14 | border: $spinner-border-width solid currentColor;
15 | border-right-color: transparent;
16 | // stylelint-disable-next-line property-blacklist
17 | border-radius: 50%;
18 | animation: spinner-border .75s linear infinite;
19 | }
20 |
21 | .spinner-border-sm {
22 | width: $spinner-width-sm;
23 | height: $spinner-height-sm;
24 | border-width: $spinner-border-width-sm;
25 | }
26 |
27 | //
28 | // Growing circle
29 | //
30 |
31 | @keyframes spinner-grow {
32 | 0% {
33 | transform: scale(0);
34 | }
35 | 50% {
36 | opacity: 1;
37 | }
38 | }
39 |
40 | .spinner-grow {
41 | display: inline-block;
42 | width: $spinner-width;
43 | height: $spinner-height;
44 | vertical-align: text-bottom;
45 | background-color: currentColor;
46 | // stylelint-disable-next-line property-blacklist
47 | border-radius: 50%;
48 | opacity: 0;
49 | animation: spinner-grow .75s linear infinite;
50 | }
51 |
52 | .spinner-grow-sm {
53 | width: $spinner-width-sm;
54 | height: $spinner-height-sm;
55 | }
56 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_tables.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Basic Bootstrap table
3 | //
4 |
5 | .table {
6 | width: 100%;
7 | margin-bottom: $spacer;
8 | color: $table-color;
9 | background-color: $table-bg; // Reset for nesting within parents with `background-color`.
10 |
11 | th,
12 | td {
13 | padding: $table-cell-padding;
14 | vertical-align: top;
15 | border-top: $table-border-width solid $table-border-color;
16 | }
17 |
18 | thead th {
19 | vertical-align: bottom;
20 | border-bottom: (2 * $table-border-width) solid $table-border-color;
21 | }
22 |
23 | tbody + tbody {
24 | border-top: (2 * $table-border-width) solid $table-border-color;
25 | }
26 | }
27 |
28 |
29 | //
30 | // Condensed table w/ half padding
31 | //
32 |
33 | .table-sm {
34 | th,
35 | td {
36 | padding: $table-cell-padding-sm;
37 | }
38 | }
39 |
40 |
41 | // Border versions
42 | //
43 | // Add or remove borders all around the table and between all the columns.
44 |
45 | .table-bordered {
46 | border: $table-border-width solid $table-border-color;
47 |
48 | th,
49 | td {
50 | border: $table-border-width solid $table-border-color;
51 | }
52 |
53 | thead {
54 | th,
55 | td {
56 | border-bottom-width: 2 * $table-border-width;
57 | }
58 | }
59 | }
60 |
61 | .table-borderless {
62 | th,
63 | td,
64 | thead th,
65 | tbody + tbody {
66 | border: 0;
67 | }
68 | }
69 |
70 | // Zebra-striping
71 | //
72 | // Default zebra-stripe styles (alternating gray and transparent backgrounds)
73 |
74 | .table-striped {
75 | tbody tr:nth-of-type(#{$table-striped-order}) {
76 | background-color: $table-accent-bg;
77 | }
78 | }
79 |
80 |
81 | // Hover effect
82 | //
83 | // Placed here since it has to come after the potential zebra striping
84 |
85 | .table-hover {
86 | tbody tr {
87 | @include hover {
88 | color: $table-hover-color;
89 | background-color: $table-hover-bg;
90 | }
91 | }
92 | }
93 |
94 |
95 | // Table backgrounds
96 | //
97 | // Exact selectors below required to override `.table-striped` and prevent
98 | // inheritance to nested tables.
99 |
100 | @each $color, $value in $theme-colors {
101 | @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
102 | }
103 |
104 | @include table-row-variant(active, $table-active-bg);
105 |
106 |
107 | // Dark styles
108 | //
109 | // Same table markup, but inverted color scheme: dark background and light text.
110 |
111 | // stylelint-disable-next-line no-duplicate-selectors
112 | .table {
113 | .thead-dark {
114 | th {
115 | color: $table-dark-color;
116 | background-color: $table-dark-bg;
117 | border-color: $table-dark-border-color;
118 | }
119 | }
120 |
121 | .thead-light {
122 | th {
123 | color: $table-head-color;
124 | background-color: $table-head-bg;
125 | border-color: $table-border-color;
126 | }
127 | }
128 | }
129 |
130 | .table-dark {
131 | color: $table-dark-color;
132 | background-color: $table-dark-bg;
133 |
134 | th,
135 | td,
136 | thead th {
137 | border-color: $table-dark-border-color;
138 | }
139 |
140 | &.table-bordered {
141 | border: 0;
142 | }
143 |
144 | &.table-striped {
145 | tbody tr:nth-of-type(odd) {
146 | background-color: $table-dark-accent-bg;
147 | }
148 | }
149 |
150 | &.table-hover {
151 | tbody tr {
152 | @include hover {
153 | color: $table-dark-hover-color;
154 | background-color: $table-dark-hover-bg;
155 | }
156 | }
157 | }
158 | }
159 |
160 |
161 | // Responsive tables
162 | //
163 | // Generate series of `.table-responsive-*` classes for configuring the screen
164 | // size of where your table will overflow.
165 |
166 | .table-responsive {
167 | @each $breakpoint in map-keys($grid-breakpoints) {
168 | $next: breakpoint-next($breakpoint, $grid-breakpoints);
169 | $infix: breakpoint-infix($next, $grid-breakpoints);
170 |
171 | &#{$infix} {
172 | @include media-breakpoint-down($breakpoint) {
173 | display: block;
174 | width: 100%;
175 | overflow-x: auto;
176 | -webkit-overflow-scrolling: touch;
177 |
178 | // Prevent double border on horizontal scroll due to use of `display: block;`
179 | > .table-bordered {
180 | border: 0;
181 | }
182 | }
183 | }
184 | }
185 | }
186 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_toasts.scss:
--------------------------------------------------------------------------------
1 | .toast {
2 | max-width: $toast-max-width;
3 | overflow: hidden; // cheap rounded corners on nested items
4 | @include font-size($toast-font-size);
5 | color: $toast-color;
6 | background-color: $toast-background-color;
7 | background-clip: padding-box;
8 | border: $toast-border-width solid $toast-border-color;
9 | box-shadow: $toast-box-shadow;
10 | backdrop-filter: blur(10px);
11 | opacity: 0;
12 | @include border-radius($toast-border-radius);
13 |
14 | &:not(:last-child) {
15 | margin-bottom: $toast-padding-x;
16 | }
17 |
18 | &.showing {
19 | opacity: 1;
20 | }
21 |
22 | &.show {
23 | display: block;
24 | opacity: 1;
25 | }
26 |
27 | &.hide {
28 | display: none;
29 | }
30 | }
31 |
32 | .toast-header {
33 | display: flex;
34 | align-items: center;
35 | padding: $toast-padding-y $toast-padding-x;
36 | color: $toast-header-color;
37 | background-color: $toast-header-background-color;
38 | background-clip: padding-box;
39 | border-bottom: $toast-border-width solid $toast-header-border-color;
40 | }
41 |
42 | .toast-body {
43 | padding: $toast-padding-x; // apply to both vertical and horizontal
44 | }
45 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_tooltip.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | .tooltip {
3 | position: absolute;
4 | z-index: $zindex-tooltip;
5 | display: block;
6 | margin: $tooltip-margin;
7 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
8 | // So reset our font and text properties to avoid inheriting weird values.
9 | @include reset-text();
10 | @include font-size($tooltip-font-size);
11 | // Allow breaking very long words so they don't overflow the tooltip's bounds
12 | word-wrap: break-word;
13 | opacity: 0;
14 |
15 | &.show { opacity: $tooltip-opacity; }
16 |
17 | .arrow {
18 | position: absolute;
19 | display: block;
20 | width: $tooltip-arrow-width;
21 | height: $tooltip-arrow-height;
22 |
23 | &::before {
24 | position: absolute;
25 | content: "";
26 | border-color: transparent;
27 | border-style: solid;
28 | }
29 | }
30 | }
31 |
32 | .bs-tooltip-top {
33 | padding: $tooltip-arrow-height 0;
34 |
35 | .arrow {
36 | bottom: 0;
37 |
38 | &::before {
39 | top: 0;
40 | border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
41 | border-top-color: $tooltip-arrow-color;
42 | }
43 | }
44 | }
45 |
46 | .bs-tooltip-right {
47 | padding: 0 $tooltip-arrow-height;
48 |
49 | .arrow {
50 | left: 0;
51 | width: $tooltip-arrow-height;
52 | height: $tooltip-arrow-width;
53 |
54 | &::before {
55 | right: 0;
56 | border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
57 | border-right-color: $tooltip-arrow-color;
58 | }
59 | }
60 | }
61 |
62 | .bs-tooltip-bottom {
63 | padding: $tooltip-arrow-height 0;
64 |
65 | .arrow {
66 | top: 0;
67 |
68 | &::before {
69 | bottom: 0;
70 | border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
71 | border-bottom-color: $tooltip-arrow-color;
72 | }
73 | }
74 | }
75 |
76 | .bs-tooltip-left {
77 | padding: 0 $tooltip-arrow-height;
78 |
79 | .arrow {
80 | right: 0;
81 | width: $tooltip-arrow-height;
82 | height: $tooltip-arrow-width;
83 |
84 | &::before {
85 | left: 0;
86 | border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
87 | border-left-color: $tooltip-arrow-color;
88 | }
89 | }
90 | }
91 |
92 | .bs-tooltip-auto {
93 | &[x-placement^="top"] {
94 | @extend .bs-tooltip-top;
95 | }
96 | &[x-placement^="right"] {
97 | @extend .bs-tooltip-right;
98 | }
99 | &[x-placement^="bottom"] {
100 | @extend .bs-tooltip-bottom;
101 | }
102 | &[x-placement^="left"] {
103 | @extend .bs-tooltip-left;
104 | }
105 | }
106 |
107 | // Wrapper for the tooltip content
108 | .tooltip-inner {
109 | max-width: $tooltip-max-width;
110 | padding: $tooltip-padding-y $tooltip-padding-x;
111 | color: $tooltip-color;
112 | text-align: center;
113 | background-color: $tooltip-bg;
114 | @include border-radius($tooltip-border-radius);
115 | }
116 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_transitions.scss:
--------------------------------------------------------------------------------
1 | .fade {
2 | @include transition($transition-fade);
3 |
4 | &:not(.show) {
5 | opacity: 0;
6 | }
7 | }
8 |
9 | .collapse {
10 | &:not(.show) {
11 | display: none;
12 | }
13 | }
14 |
15 | .collapsing {
16 | position: relative;
17 | height: 0;
18 | overflow: hidden;
19 | @include transition($transition-collapse);
20 | }
21 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_type.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important, selector-list-comma-newline-after
2 |
3 | //
4 | // Headings
5 | //
6 |
7 | h1, h2, h3, h4, h5, h6,
8 | .h1, .h2, .h3, .h4, .h5, .h6 {
9 | margin-bottom: $headings-margin-bottom;
10 | font-family: $headings-font-family;
11 | font-weight: $headings-font-weight;
12 | line-height: $headings-line-height;
13 | color: $headings-color;
14 | }
15 |
16 | h1, .h1 { @include font-size($h1-font-size); }
17 | h2, .h2 { @include font-size($h2-font-size); }
18 | h3, .h3 { @include font-size($h3-font-size); }
19 | h4, .h4 { @include font-size($h4-font-size); }
20 | h5, .h5 { @include font-size($h5-font-size); }
21 | h6, .h6 { @include font-size($h6-font-size); }
22 |
23 | .lead {
24 | @include font-size($lead-font-size);
25 | font-weight: $lead-font-weight;
26 | }
27 |
28 | // Type display classes
29 | .display-1 {
30 | @include font-size($display1-size);
31 | font-weight: $display1-weight;
32 | line-height: $display-line-height;
33 | }
34 | .display-2 {
35 | @include font-size($display2-size);
36 | font-weight: $display2-weight;
37 | line-height: $display-line-height;
38 | }
39 | .display-3 {
40 | @include font-size($display3-size);
41 | font-weight: $display3-weight;
42 | line-height: $display-line-height;
43 | }
44 | .display-4 {
45 | @include font-size($display4-size);
46 | font-weight: $display4-weight;
47 | line-height: $display-line-height;
48 | }
49 |
50 |
51 | //
52 | // Horizontal rules
53 | //
54 |
55 | hr {
56 | margin-top: $hr-margin-y;
57 | margin-bottom: $hr-margin-y;
58 | border: 0;
59 | border-top: $hr-border-width solid $hr-border-color;
60 | }
61 |
62 |
63 | //
64 | // Emphasis
65 | //
66 |
67 | small,
68 | .small {
69 | @include font-size($small-font-size);
70 | font-weight: $font-weight-normal;
71 | }
72 |
73 | mark,
74 | .mark {
75 | padding: $mark-padding;
76 | background-color: $mark-bg;
77 | }
78 |
79 |
80 | //
81 | // Lists
82 | //
83 |
84 | .list-unstyled {
85 | @include list-unstyled;
86 | }
87 |
88 | // Inline turns list items into inline-block
89 | .list-inline {
90 | @include list-unstyled;
91 | }
92 | .list-inline-item {
93 | display: inline-block;
94 |
95 | &:not(:last-child) {
96 | margin-right: $list-inline-padding;
97 | }
98 | }
99 |
100 |
101 | //
102 | // Misc
103 | //
104 |
105 | // Builds on `abbr`
106 | .initialism {
107 | @include font-size(90%);
108 | text-transform: uppercase;
109 | }
110 |
111 | // Blockquotes
112 | .blockquote {
113 | margin-bottom: $spacer;
114 | @include font-size($blockquote-font-size);
115 | }
116 |
117 | .blockquote-footer {
118 | display: block;
119 | @include font-size($blockquote-small-font-size);
120 | color: $blockquote-small-color;
121 |
122 | &::before {
123 | content: "\2014\00A0"; // em dash, nbsp
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/_utilities.scss:
--------------------------------------------------------------------------------
1 | @import "utilities/align";
2 | @import "utilities/background";
3 | @import "utilities/borders";
4 | @import "utilities/clearfix";
5 | @import "utilities/display";
6 | @import "utilities/embed";
7 | @import "utilities/flex";
8 | @import "utilities/float";
9 | @import "utilities/overflow";
10 | @import "utilities/position";
11 | @import "utilities/screenreaders";
12 | @import "utilities/shadows";
13 | @import "utilities/sizing";
14 | @import "utilities/stretched-link";
15 | @import "utilities/spacing";
16 | @import "utilities/text";
17 | @import "utilities/visibility";
18 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/bootstrap-grid.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
3 | * Copyright 2011-2019 The Bootstrap Authors
4 | * Copyright 2011-2019 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | */
7 |
8 | html {
9 | box-sizing: border-box;
10 | -ms-overflow-style: scrollbar;
11 | }
12 |
13 | *,
14 | *::before,
15 | *::after {
16 | box-sizing: inherit;
17 | }
18 |
19 | @import "functions";
20 | @import "variables";
21 |
22 | @import "mixins/breakpoints";
23 | @import "mixins/grid-framework";
24 | @import "mixins/grid";
25 |
26 | @import "grid";
27 | @import "utilities/display";
28 | @import "utilities/flex";
29 | @import "utilities/spacing";
30 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/bootstrap-reboot.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
3 | * Copyright 2011-2019 The Bootstrap Authors
4 | * Copyright 2011-2019 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
7 | */
8 |
9 | @import "functions";
10 | @import "variables";
11 | @import "mixins";
12 | @import "reboot";
13 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/bootstrap.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap v4.3.1 (https://getbootstrap.com/)
3 | * Copyright 2011-2019 The Bootstrap Authors
4 | * Copyright 2011-2019 Twitter, Inc.
5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6 | */
7 |
8 | @import "functions";
9 | @import "variables";
10 | @import "mixins";
11 | @import "root";
12 | @import "reboot";
13 | @import "type";
14 | @import "images";
15 | @import "code";
16 | @import "grid";
17 | @import "tables";
18 | @import "forms";
19 | @import "buttons";
20 | @import "transitions";
21 | @import "dropdown";
22 | @import "button-group";
23 | @import "input-group";
24 | @import "custom-forms";
25 | @import "nav";
26 | @import "navbar";
27 | @import "card";
28 | @import "breadcrumb";
29 | @import "pagination";
30 | @import "badge";
31 | @import "jumbotron";
32 | @import "alert";
33 | @import "progress";
34 | @import "media";
35 | @import "list-group";
36 | @import "close";
37 | @import "toasts";
38 | @import "modal";
39 | @import "tooltip";
40 | @import "popover";
41 | @import "carousel";
42 | @import "spinners";
43 | @import "utilities";
44 | @import "print";
45 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_alert.scss:
--------------------------------------------------------------------------------
1 | @mixin alert-variant($background, $border, $color) {
2 | color: $color;
3 | @include gradient-bg($background);
4 | border-color: $border;
5 |
6 | hr {
7 | border-top-color: darken($border, 5%);
8 | }
9 |
10 | .alert-link {
11 | color: darken($color, 10%);
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_background-variant.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Contextual backgrounds
4 |
5 | @mixin bg-variant($parent, $color) {
6 | #{$parent} {
7 | background-color: $color !important;
8 | }
9 | a#{$parent},
10 | button#{$parent} {
11 | @include hover-focus {
12 | background-color: darken($color, 10%) !important;
13 | }
14 | }
15 | }
16 |
17 | @mixin bg-gradient-variant($parent, $color) {
18 | #{$parent} {
19 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_badge.scss:
--------------------------------------------------------------------------------
1 | @mixin badge-variant($bg) {
2 | color: color-yiq($bg);
3 | background-color: $bg;
4 |
5 | @at-root a#{&} {
6 | @include hover-focus {
7 | color: color-yiq($bg);
8 | background-color: darken($bg, 10%);
9 | }
10 |
11 | &:focus,
12 | &.focus {
13 | outline: 0;
14 | box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_border-radius.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable property-blacklist
2 | // Single side border-radius
3 |
4 | @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
5 | @if $enable-rounded {
6 | border-radius: $radius;
7 | }
8 | @else if $fallback-border-radius != false {
9 | border-radius: $fallback-border-radius;
10 | }
11 | }
12 |
13 | @mixin border-top-radius($radius) {
14 | @if $enable-rounded {
15 | border-top-left-radius: $radius;
16 | border-top-right-radius: $radius;
17 | }
18 | }
19 |
20 | @mixin border-right-radius($radius) {
21 | @if $enable-rounded {
22 | border-top-right-radius: $radius;
23 | border-bottom-right-radius: $radius;
24 | }
25 | }
26 |
27 | @mixin border-bottom-radius($radius) {
28 | @if $enable-rounded {
29 | border-bottom-right-radius: $radius;
30 | border-bottom-left-radius: $radius;
31 | }
32 | }
33 |
34 | @mixin border-left-radius($radius) {
35 | @if $enable-rounded {
36 | border-top-left-radius: $radius;
37 | border-bottom-left-radius: $radius;
38 | }
39 | }
40 |
41 | @mixin border-top-left-radius($radius) {
42 | @if $enable-rounded {
43 | border-top-left-radius: $radius;
44 | }
45 | }
46 |
47 | @mixin border-top-right-radius($radius) {
48 | @if $enable-rounded {
49 | border-top-right-radius: $radius;
50 | }
51 | }
52 |
53 | @mixin border-bottom-right-radius($radius) {
54 | @if $enable-rounded {
55 | border-bottom-right-radius: $radius;
56 | }
57 | }
58 |
59 | @mixin border-bottom-left-radius($radius) {
60 | @if $enable-rounded {
61 | border-bottom-left-radius: $radius;
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_box-shadow.scss:
--------------------------------------------------------------------------------
1 | @mixin box-shadow($shadow...) {
2 | @if $enable-shadows {
3 | $result: ();
4 |
5 | @if (length($shadow) == 1) {
6 | // We can pass `@include box-shadow(none);`
7 | $result: $shadow;
8 | } @else {
9 | // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
10 | @for $i from 1 through length($shadow) {
11 | @if nth($shadow, $i) != "none" {
12 | $result: append($result, nth($shadow, $i), "comma");
13 | }
14 | }
15 | }
16 | @if (length($result) > 0) {
17 | box-shadow: $result;
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_breakpoints.scss:
--------------------------------------------------------------------------------
1 | // Breakpoint viewport sizes and media queries.
2 | //
3 | // Breakpoints are defined as a map of (name: minimum width), order from small to large:
4 | //
5 | // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
6 | //
7 | // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
8 |
9 | // Name of the next breakpoint, or null for the last breakpoint.
10 | //
11 | // >> breakpoint-next(sm)
12 | // md
13 | // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
14 | // md
15 | // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
16 | // md
17 | @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
18 | $n: index($breakpoint-names, $name);
19 | @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
20 | }
21 |
22 | // Minimum breakpoint width. Null for the smallest (first) breakpoint.
23 | //
24 | // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
25 | // 576px
26 | @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
27 | $min: map-get($breakpoints, $name);
28 | @return if($min != 0, $min, null);
29 | }
30 |
31 | // Maximum breakpoint width. Null for the largest (last) breakpoint.
32 | // The maximum value is calculated as the minimum of the next one less 0.02px
33 | // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
34 | // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
35 | // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
36 | // See https://bugs.webkit.org/show_bug.cgi?id=178261
37 | //
38 | // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
39 | // 767.98px
40 | @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
41 | $next: breakpoint-next($name, $breakpoints);
42 | @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
43 | }
44 |
45 | // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
46 | // Useful for making responsive utilities.
47 | //
48 | // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
49 | // "" (Returns a blank string)
50 | // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
51 | // "-sm"
52 | @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
53 | @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
54 | }
55 |
56 | // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
57 | // Makes the @content apply to the given breakpoint and wider.
58 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
59 | $min: breakpoint-min($name, $breakpoints);
60 | @if $min {
61 | @media (min-width: $min) {
62 | @content;
63 | }
64 | } @else {
65 | @content;
66 | }
67 | }
68 |
69 | // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
70 | // Makes the @content apply to the given breakpoint and narrower.
71 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
72 | $max: breakpoint-max($name, $breakpoints);
73 | @if $max {
74 | @media (max-width: $max) {
75 | @content;
76 | }
77 | } @else {
78 | @content;
79 | }
80 | }
81 |
82 | // Media that spans multiple breakpoint widths.
83 | // Makes the @content apply between the min and max breakpoints
84 | @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
85 | $min: breakpoint-min($lower, $breakpoints);
86 | $max: breakpoint-max($upper, $breakpoints);
87 |
88 | @if $min != null and $max != null {
89 | @media (min-width: $min) and (max-width: $max) {
90 | @content;
91 | }
92 | } @else if $max == null {
93 | @include media-breakpoint-up($lower, $breakpoints) {
94 | @content;
95 | }
96 | } @else if $min == null {
97 | @include media-breakpoint-down($upper, $breakpoints) {
98 | @content;
99 | }
100 | }
101 | }
102 |
103 | // Media between the breakpoint's minimum and maximum widths.
104 | // No minimum for the smallest breakpoint, and no maximum for the largest one.
105 | // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
106 | @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
107 | $min: breakpoint-min($name, $breakpoints);
108 | $max: breakpoint-max($name, $breakpoints);
109 |
110 | @if $min != null and $max != null {
111 | @media (min-width: $min) and (max-width: $max) {
112 | @content;
113 | }
114 | } @else if $max == null {
115 | @include media-breakpoint-up($name, $breakpoints) {
116 | @content;
117 | }
118 | } @else if $min == null {
119 | @include media-breakpoint-down($name, $breakpoints) {
120 | @content;
121 | }
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_buttons.scss:
--------------------------------------------------------------------------------
1 | // Button variants
2 | //
3 | // Easily pump out default styles, as well as :hover, :focus, :active,
4 | // and disabled options for all buttons
5 |
6 | @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
7 | color: color-yiq($background);
8 | @include gradient-bg($background);
9 | border-color: $border;
10 | @include box-shadow($btn-box-shadow);
11 |
12 | @include hover {
13 | color: color-yiq($hover-background);
14 | @include gradient-bg($hover-background);
15 | border-color: $hover-border;
16 | }
17 |
18 | &:focus,
19 | &.focus {
20 | // Avoid using mixin so we can pass custom focus shadow properly
21 | @if $enable-shadows {
22 | box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
23 | } @else {
24 | box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
25 | }
26 | }
27 |
28 | // Disabled comes first so active can properly restyle
29 | &.disabled,
30 | &:disabled {
31 | color: color-yiq($background);
32 | background-color: $background;
33 | border-color: $border;
34 | // Remove CSS gradients if they're enabled
35 | @if $enable-gradients {
36 | background-image: none;
37 | }
38 | }
39 |
40 | &:not(:disabled):not(.disabled):active,
41 | &:not(:disabled):not(.disabled).active,
42 | .show > &.dropdown-toggle {
43 | color: color-yiq($active-background);
44 | background-color: $active-background;
45 | @if $enable-gradients {
46 | background-image: none; // Remove the gradient for the pressed/active state
47 | }
48 | border-color: $active-border;
49 |
50 | &:focus {
51 | // Avoid using mixin so we can pass custom focus shadow properly
52 | @if $enable-shadows and $btn-active-box-shadow != none {
53 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
54 | } @else {
55 | box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
56 | }
57 | }
58 | }
59 | }
60 |
61 | @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
62 | color: $color;
63 | border-color: $color;
64 |
65 | @include hover {
66 | color: $color-hover;
67 | background-color: $active-background;
68 | border-color: $active-border;
69 | }
70 |
71 | &:focus,
72 | &.focus {
73 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
74 | }
75 |
76 | &.disabled,
77 | &:disabled {
78 | color: $color;
79 | background-color: transparent;
80 | }
81 |
82 | &:not(:disabled):not(.disabled):active,
83 | &:not(:disabled):not(.disabled).active,
84 | .show > &.dropdown-toggle {
85 | color: color-yiq($active-background);
86 | background-color: $active-background;
87 | border-color: $active-border;
88 |
89 | &:focus {
90 | // Avoid using mixin so we can pass custom focus shadow properly
91 | @if $enable-shadows and $btn-active-box-shadow != none {
92 | box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
93 | } @else {
94 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
95 | }
96 | }
97 | }
98 | }
99 |
100 | // Button sizes
101 | @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
102 | padding: $padding-y $padding-x;
103 | @include font-size($font-size);
104 | line-height: $line-height;
105 | // Manually declare to provide an override to the browser default
106 | @include border-radius($border-radius, 0);
107 | }
108 |
--------------------------------------------------------------------------------
/assets/scss/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 | margin-left: $caret-spacing;
33 | vertical-align: $caret-vertical-align;
34 | content: "";
35 | @if $direction == down {
36 | @include caret-down;
37 | } @else if $direction == up {
38 | @include caret-up;
39 | } @else if $direction == right {
40 | @include caret-right;
41 | }
42 | }
43 |
44 | @if $direction == left {
45 | &::after {
46 | display: none;
47 | }
48 |
49 | &::before {
50 | display: inline-block;
51 | margin-right: $caret-spacing;
52 | vertical-align: $caret-vertical-align;
53 | content: "";
54 | @include caret-left;
55 | }
56 | }
57 |
58 | &:empty::after {
59 | margin-left: 0;
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_clearfix.scss:
--------------------------------------------------------------------------------
1 | @mixin clearfix() {
2 | &::after {
3 | display: block;
4 | clear: both;
5 | content: "";
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_deprecate.scss:
--------------------------------------------------------------------------------
1 | // Deprecate mixin
2 | //
3 | // This mixin can be used to deprecate mixins or functions.
4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) {
8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_float.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | @mixin float-left {
4 | float: left !important;
5 | @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
6 | }
7 | @mixin float-right {
8 | float: right !important;
9 | @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
10 | }
11 | @mixin float-none {
12 | float: none !important;
13 | @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
14 | }
15 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_forms.scss:
--------------------------------------------------------------------------------
1 | // Form control focus state
2 | //
3 | // Generate a customized focus state and for any input with the specified color,
4 | // which defaults to the `$input-focus-border-color` variable.
5 | //
6 | // We highly encourage you to not customize the default value, but instead use
7 | // this to tweak colors on an as-needed basis. This aesthetic change is based on
8 | // WebKit's default styles, but applicable to a wider range of browsers. Its
9 | // usability and accessibility should be taken into account with any change.
10 | //
11 | // Example usage: change the default blue border and shadow to white for better
12 | // contrast against a dark gray background.
13 | @mixin form-control-focus() {
14 | &:focus {
15 | color: $input-focus-color;
16 | background-color: $input-focus-bg;
17 | border-color: $input-focus-border-color;
18 | outline: 0;
19 | // Avoid using mixin so we can pass custom focus shadow properly
20 | @if $enable-shadows {
21 | box-shadow: $input-box-shadow, $input-focus-box-shadow;
22 | } @else {
23 | box-shadow: $input-focus-box-shadow;
24 | }
25 | }
26 | }
27 |
28 |
29 | @mixin form-validation-state($state, $color, $icon) {
30 | .#{$state}-feedback {
31 | display: none;
32 | width: 100%;
33 | margin-top: $form-feedback-margin-top;
34 | @include font-size($form-feedback-font-size);
35 | color: $color;
36 | }
37 |
38 | .#{$state}-tooltip {
39 | position: absolute;
40 | top: 100%;
41 | z-index: 5;
42 | display: none;
43 | max-width: 100%; // Contain to parent when possible
44 | padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
45 | margin-top: .1rem;
46 | @include font-size($form-feedback-tooltip-font-size);
47 | line-height: $form-feedback-tooltip-line-height;
48 | color: color-yiq($color);
49 | background-color: rgba($color, $form-feedback-tooltip-opacity);
50 | @include border-radius($form-feedback-tooltip-border-radius);
51 | }
52 |
53 | .form-control {
54 | .was-validated &:#{$state},
55 | &.is-#{$state} {
56 | border-color: $color;
57 |
58 | @if $enable-validation-icons {
59 | padding-right: $input-height-inner;
60 | background-image: $icon;
61 | background-repeat: no-repeat;
62 | background-position: center right $input-height-inner-quarter;
63 | background-size: $input-height-inner-half $input-height-inner-half;
64 | }
65 |
66 | &:focus {
67 | border-color: $color;
68 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
69 | }
70 |
71 | ~ .#{$state}-feedback,
72 | ~ .#{$state}-tooltip {
73 | display: block;
74 | }
75 | }
76 | }
77 |
78 | // stylelint-disable-next-line selector-no-qualifying-type
79 | textarea.form-control {
80 | .was-validated &:#{$state},
81 | &.is-#{$state} {
82 | @if $enable-validation-icons {
83 | padding-right: $input-height-inner;
84 | background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
85 | }
86 | }
87 | }
88 |
89 | .custom-select {
90 | .was-validated &:#{$state},
91 | &.is-#{$state} {
92 | border-color: $color;
93 |
94 | @if $enable-validation-icons {
95 | padding-right: $custom-select-feedback-icon-padding-right;
96 | background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
97 | }
98 |
99 | &:focus {
100 | border-color: $color;
101 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
102 | }
103 |
104 | ~ .#{$state}-feedback,
105 | ~ .#{$state}-tooltip {
106 | display: block;
107 | }
108 | }
109 | }
110 |
111 |
112 | .form-control-file {
113 | .was-validated &:#{$state},
114 | &.is-#{$state} {
115 | ~ .#{$state}-feedback,
116 | ~ .#{$state}-tooltip {
117 | display: block;
118 | }
119 | }
120 | }
121 |
122 | .form-check-input {
123 | .was-validated &:#{$state},
124 | &.is-#{$state} {
125 | ~ .form-check-label {
126 | color: $color;
127 | }
128 |
129 | ~ .#{$state}-feedback,
130 | ~ .#{$state}-tooltip {
131 | display: block;
132 | }
133 | }
134 | }
135 |
136 | .custom-control-input {
137 | .was-validated &:#{$state},
138 | &.is-#{$state} {
139 | ~ .custom-control-label {
140 | color: $color;
141 |
142 | &::before {
143 | border-color: $color;
144 | }
145 | }
146 |
147 | ~ .#{$state}-feedback,
148 | ~ .#{$state}-tooltip {
149 | display: block;
150 | }
151 |
152 | &:checked {
153 | ~ .custom-control-label::before {
154 | border-color: lighten($color, 10%);
155 | @include gradient-bg(lighten($color, 10%));
156 | }
157 | }
158 |
159 | &:focus {
160 | ~ .custom-control-label::before {
161 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
162 | }
163 |
164 | &:not(:checked) ~ .custom-control-label::before {
165 | border-color: $color;
166 | }
167 | }
168 | }
169 | }
170 |
171 | // custom file
172 | .custom-file-input {
173 | .was-validated &:#{$state},
174 | &.is-#{$state} {
175 | ~ .custom-file-label {
176 | border-color: $color;
177 | }
178 |
179 | ~ .#{$state}-feedback,
180 | ~ .#{$state}-tooltip {
181 | display: block;
182 | }
183 |
184 | &:focus {
185 | ~ .custom-file-label {
186 | border-color: $color;
187 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
188 | }
189 | }
190 | }
191 | }
192 | }
193 |
--------------------------------------------------------------------------------
/assets/scss/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 |
--------------------------------------------------------------------------------
/assets/scss/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 | padding-right: $gutter / 2;
12 | padding-left: $gutter / 2;
13 | }
14 |
15 | @each $breakpoint in map-keys($breakpoints) {
16 | $infix: breakpoint-infix($breakpoint, $breakpoints);
17 |
18 | // Allow columns to stretch full width below their breakpoints
19 | @for $i from 1 through $columns {
20 | .col#{$infix}-#{$i} {
21 | @extend %grid-column;
22 | }
23 | }
24 | .col#{$infix},
25 | .col#{$infix}-auto {
26 | @extend %grid-column;
27 | }
28 |
29 | @include media-breakpoint-up($breakpoint, $breakpoints) {
30 | // Provide basic `.col-{bp}` classes for equal-width flexbox columns
31 | .col#{$infix} {
32 | flex-basis: 0;
33 | flex-grow: 1;
34 | max-width: 100%;
35 | }
36 | .col#{$infix}-auto {
37 | flex: 0 0 auto;
38 | width: auto;
39 | max-width: 100%; // Reset earlier grid tiers
40 | }
41 |
42 | @for $i from 1 through $columns {
43 | .col#{$infix}-#{$i} {
44 | @include make-col($i, $columns);
45 | }
46 | }
47 |
48 | .order#{$infix}-first { order: -1; }
49 |
50 | .order#{$infix}-last { order: $columns + 1; }
51 |
52 | @for $i from 0 through $columns {
53 | .order#{$infix}-#{$i} { order: $i; }
54 | }
55 |
56 | // `$columns - 1` because offsetting by the width of an entire row isn't possible
57 | @for $i from 0 through ($columns - 1) {
58 | @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
59 | .offset#{$infix}-#{$i} {
60 | @include make-col-offset($i, $columns);
61 | }
62 | }
63 | }
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_grid.scss:
--------------------------------------------------------------------------------
1 | /// Grid system
2 | //
3 | // Generate semantic grid columns with these mixins.
4 |
5 | @mixin make-container($gutter: $grid-gutter-width) {
6 | width: 100%;
7 | padding-right: $gutter / 2;
8 | padding-left: $gutter / 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($gutter: $grid-gutter-width) {
24 | display: flex;
25 | flex-wrap: wrap;
26 | margin-right: -$gutter / 2;
27 | margin-left: -$gutter / 2;
28 | }
29 |
30 | @mixin make-col-ready($gutter: $grid-gutter-width) {
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 | padding-right: $gutter / 2;
37 | padding-left: $gutter / 2;
38 | }
39 |
40 | @mixin make-col($size, $columns: $grid-columns) {
41 | flex: 0 0 percentage($size / $columns);
42 | // Add a `max-width` to ensure content within each column does not blow out
43 | // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
44 | // do not appear to require this.
45 | max-width: percentage($size / $columns);
46 | }
47 |
48 | @mixin make-col-offset($size, $columns: $grid-columns) {
49 | $num: $size / $columns;
50 | margin-left: if($num == 0, 0, percentage($num));
51 | }
52 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_hover.scss:
--------------------------------------------------------------------------------
1 | // Hover mixin and `$enable-hover-media-query` are deprecated.
2 | //
3 | // Originally added during our alphas and maintained during betas, this mixin was
4 | // designed to prevent `:hover` stickiness on iOS-an issue where hover styles
5 | // would persist after initial touch.
6 | //
7 | // For backward compatibility, we've kept these mixins and updated them to
8 | // always return their regular pseudo-classes instead of a shimmed media query.
9 | //
10 | // Issue: https://github.com/twbs/bootstrap/issues/25195
11 |
12 | @mixin hover {
13 | &:hover { @content; }
14 | }
15 |
16 | @mixin hover-focus {
17 | &:hover,
18 | &:focus {
19 | @content;
20 | }
21 | }
22 |
23 | @mixin plain-hover-focus {
24 | &,
25 | &:hover,
26 | &:focus {
27 | @content;
28 | }
29 | }
30 |
31 | @mixin hover-focus-active {
32 | &:hover,
33 | &:focus,
34 | &:active {
35 | @content;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_image.scss:
--------------------------------------------------------------------------------
1 | // Image Mixins
2 | // - Responsive image
3 | // - Retina image
4 |
5 |
6 | // Responsive image
7 | //
8 | // Keep images from scaling beyond the width of their parents.
9 |
10 | @mixin img-fluid {
11 | // Part 1: Set a maximum relative to the parent
12 | max-width: 100%;
13 | // Part 2: Override the height to auto, otherwise images will be stretched
14 | // when setting a width and height attribute on the img element.
15 | height: auto;
16 | }
17 |
18 |
19 | // Retina image
20 | //
21 | // Short retina mixin for setting background-image and -size.
22 |
23 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
24 | background-image: url($file-1x);
25 |
26 | // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
27 | // but doesn't convert dppx=>dpi.
28 | // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
29 | // Compatibility info: https://caniuse.com/#feat=css-media-resolution
30 | @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
31 | only screen and (min-resolution: 2dppx) { // Standardized
32 | background-image: url($file-2x);
33 | background-size: $width-1x $height-1x;
34 | }
35 | @include deprecate("`img-retina()`", "v4.3.0", "v5");
36 | }
37 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_list-group.scss:
--------------------------------------------------------------------------------
1 | // List Groups
2 |
3 | @mixin list-group-item-variant($state, $background, $color) {
4 | .list-group-item-#{$state} {
5 | color: $color;
6 | background-color: $background;
7 |
8 | &.list-group-item-action {
9 | @include hover-focus {
10 | color: $color;
11 | background-color: darken($background, 5%);
12 | }
13 |
14 | &.active {
15 | color: $white;
16 | background-color: $color;
17 | border-color: $color;
18 | }
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_lists.scss:
--------------------------------------------------------------------------------
1 | // Lists
2 |
3 | // Unstyled keeps list items block level, just removes default browser padding and list-style
4 | @mixin list-unstyled {
5 | padding-left: 0;
6 | list-style: none;
7 | }
8 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_nav-divider.scss:
--------------------------------------------------------------------------------
1 | // Horizontal dividers
2 | //
3 | // Dividers (basically an hr) within dropdowns and nav lists
4 |
5 | @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
6 | height: 0;
7 | margin: $margin-y 0;
8 | overflow: hidden;
9 | border-top: 1px solid $color;
10 | }
11 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_pagination.scss:
--------------------------------------------------------------------------------
1 | // Pagination
2 |
3 | @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
4 | .page-link {
5 | padding: $padding-y $padding-x;
6 | @include font-size($font-size);
7 | line-height: $line-height;
8 | }
9 |
10 | .page-item {
11 | &:first-child {
12 | .page-link {
13 | @include border-left-radius($border-radius);
14 | }
15 | }
16 | &:last-child {
17 | .page-link {
18 | @include border-right-radius($border-radius);
19 | }
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_reset-text.scss:
--------------------------------------------------------------------------------
1 | @mixin reset-text {
2 | font-family: $font-family-base;
3 | // We deliberately do NOT reset font-size or word-wrap.
4 | font-style: normal;
5 | font-weight: $font-weight-normal;
6 | line-height: $line-height-base;
7 | text-align: left; // Fallback for where `start` is not supported
8 | text-align: start;
9 | text-decoration: none;
10 | text-shadow: none;
11 | text-transform: none;
12 | letter-spacing: normal;
13 | word-break: normal;
14 | word-spacing: normal;
15 | white-space: normal;
16 | line-break: auto;
17 | }
18 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_resize.scss:
--------------------------------------------------------------------------------
1 | // Resize anything
2 |
3 | @mixin resizable($direction) {
4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
5 | resize: $direction; // Options: horizontal, vertical, both
6 | }
7 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_screen-reader.scss:
--------------------------------------------------------------------------------
1 | // Only display content to screen readers
2 | //
3 | // See: https://a11yproject.com/posts/how-to-hide-content/
4 | // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
5 |
6 | @mixin sr-only {
7 | position: absolute;
8 | width: 1px;
9 | height: 1px;
10 | padding: 0;
11 | overflow: hidden;
12 | clip: rect(0, 0, 0, 0);
13 | white-space: nowrap;
14 | border: 0;
15 | }
16 |
17 | // Use in conjunction with .sr-only to only display content when it's focused.
18 | //
19 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
20 | //
21 | // Credit: HTML5 Boilerplate
22 |
23 | @mixin sr-only-focusable {
24 | &:active,
25 | &:focus {
26 | position: static;
27 | width: auto;
28 | height: auto;
29 | overflow: visible;
30 | clip: auto;
31 | white-space: normal;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_size.scss:
--------------------------------------------------------------------------------
1 | // Sizing shortcuts
2 |
3 | @mixin size($width, $height: $width) {
4 | width: $width;
5 | height: $height;
6 | @include deprecate("`size()`", "v4.3.0", "v5");
7 | }
8 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_table-row.scss:
--------------------------------------------------------------------------------
1 | // Tables
2 |
3 | @mixin table-row-variant($state, $background, $border: null) {
4 | // Exact selectors below required to override `.table-striped` and prevent
5 | // inheritance to nested tables.
6 | .table-#{$state} {
7 | &,
8 | > th,
9 | > td {
10 | background-color: $background;
11 | }
12 |
13 | @if $border != null {
14 | th,
15 | td,
16 | thead th,
17 | tbody + tbody {
18 | border-color: $border;
19 | }
20 | }
21 | }
22 |
23 | // Hover states for `.table-hover`
24 | // Note: this is not available for cells or rows within `thead` or `tfoot`.
25 | .table-hover {
26 | $hover-background: darken($background, 5%);
27 |
28 | .table-#{$state} {
29 | @include hover {
30 | background-color: $hover-background;
31 |
32 | > td,
33 | > th {
34 | background-color: $hover-background;
35 | }
36 | }
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_text-emphasis.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Typography
4 |
5 | @mixin text-emphasis-variant($parent, $color) {
6 | #{$parent} {
7 | color: $color !important;
8 | }
9 | @if $emphasized-link-hover-darken-percentage != 0 {
10 | a#{$parent} {
11 | @include hover-focus {
12 | color: darken($color, $emphasized-link-hover-darken-percentage) !important;
13 | }
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_text-hide.scss:
--------------------------------------------------------------------------------
1 | // CSS image replacement
2 | @mixin text-hide($ignore-warning: false) {
3 | // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
4 | font: 0/0 a;
5 | color: transparent;
6 | text-shadow: none;
7 | background-color: transparent;
8 | border: 0;
9 |
10 | @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning);
11 | }
12 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_text-truncate.scss:
--------------------------------------------------------------------------------
1 | // Text truncate
2 | // Requires inline-block or block for proper styling
3 |
4 | @mixin text-truncate() {
5 | overflow: hidden;
6 | text-overflow: ellipsis;
7 | white-space: nowrap;
8 | }
9 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_transition.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable property-blacklist
2 | @mixin transition($transition...) {
3 | @if $enable-transitions {
4 | @if length($transition) == 0 {
5 | transition: $transition-base;
6 | } @else {
7 | transition: $transition;
8 | }
9 | }
10 |
11 | @if $enable-prefers-reduced-motion-media-query {
12 | @media (prefers-reduced-motion: reduce) {
13 | transition: none;
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/mixins/_visibility.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Visibility
4 |
5 | @mixin invisible($visibility) {
6 | visibility: $visibility !important;
7 | @include deprecate("`invisible()`", "v4.3.0", "v5");
8 | }
9 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_align.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | .align-baseline { vertical-align: baseline !important; } // Browser default
4 | .align-top { vertical-align: top !important; }
5 | .align-middle { vertical-align: middle !important; }
6 | .align-bottom { vertical-align: bottom !important; }
7 | .align-text-bottom { vertical-align: text-bottom !important; }
8 | .align-text-top { vertical-align: text-top !important; }
9 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_background.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | @each $color, $value in $theme-colors {
4 | @include bg-variant(".bg-#{$color}", $value);
5 | }
6 |
7 | @if $enable-gradients {
8 | @each $color, $value in $theme-colors {
9 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
10 | }
11 | }
12 |
13 | .bg-white {
14 | background-color: $white !important;
15 | }
16 |
17 | .bg-transparent {
18 | background-color: transparent !important;
19 | }
20 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_borders.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable property-blacklist, 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-sm {
34 | border-radius: $border-radius-sm !important;
35 | }
36 |
37 | .rounded {
38 | border-radius: $border-radius !important;
39 | }
40 |
41 | .rounded-top {
42 | border-top-left-radius: $border-radius !important;
43 | border-top-right-radius: $border-radius !important;
44 | }
45 |
46 | .rounded-right {
47 | border-top-right-radius: $border-radius !important;
48 | border-bottom-right-radius: $border-radius !important;
49 | }
50 |
51 | .rounded-bottom {
52 | border-bottom-right-radius: $border-radius !important;
53 | border-bottom-left-radius: $border-radius !important;
54 | }
55 |
56 | .rounded-left {
57 | border-top-left-radius: $border-radius !important;
58 | border-bottom-left-radius: $border-radius !important;
59 | }
60 |
61 | .rounded-lg {
62 | border-radius: $border-radius-lg !important;
63 | }
64 |
65 | .rounded-circle {
66 | border-radius: 50% !important;
67 | }
68 |
69 | .rounded-pill {
70 | border-radius: $rounded-pill !important;
71 | }
72 |
73 | .rounded-0 {
74 | border-radius: 0 !important;
75 | }
76 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_clearfix.scss:
--------------------------------------------------------------------------------
1 | .clearfix {
2 | @include clearfix();
3 | }
4 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_display.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Utilities for common `display` values
5 | //
6 |
7 | @each $breakpoint in map-keys($grid-breakpoints) {
8 | @include media-breakpoint-up($breakpoint) {
9 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
10 |
11 | @each $value in $displays {
12 | .d#{$infix}-#{$value} { display: $value !important; }
13 | }
14 | }
15 | }
16 |
17 |
18 | //
19 | // Utilities for toggling `display` in print
20 | //
21 |
22 | @media print {
23 | @each $value in $displays {
24 | .d-print-#{$value} { display: $value !important; }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_embed.scss:
--------------------------------------------------------------------------------
1 | // Credit: Nicolas Gallagher and SUIT CSS.
2 |
3 | .embed-responsive {
4 | position: relative;
5 | display: block;
6 | width: 100%;
7 | padding: 0;
8 | overflow: hidden;
9 |
10 | &::before {
11 | display: block;
12 | content: "";
13 | }
14 |
15 | .embed-responsive-item,
16 | iframe,
17 | embed,
18 | object,
19 | video {
20 | position: absolute;
21 | top: 0;
22 | bottom: 0;
23 | left: 0;
24 | width: 100%;
25 | height: 100%;
26 | border: 0;
27 | }
28 | }
29 |
30 | @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
31 | $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
32 | $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
33 |
34 | .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
35 | &::before {
36 | padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_flex.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Flex variation
4 | //
5 | // Custom styles for additional flex alignment options.
6 |
7 | @each $breakpoint in map-keys($grid-breakpoints) {
8 | @include media-breakpoint-up($breakpoint) {
9 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
10 |
11 | .flex#{$infix}-row { flex-direction: row !important; }
12 | .flex#{$infix}-column { flex-direction: column !important; }
13 | .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
14 | .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
15 |
16 | .flex#{$infix}-wrap { flex-wrap: wrap !important; }
17 | .flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
18 | .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
19 | .flex#{$infix}-fill { flex: 1 1 auto !important; }
20 | .flex#{$infix}-grow-0 { flex-grow: 0 !important; }
21 | .flex#{$infix}-grow-1 { flex-grow: 1 !important; }
22 | .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; }
23 | .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; }
24 |
25 | .justify-content#{$infix}-start { justify-content: flex-start !important; }
26 | .justify-content#{$infix}-end { justify-content: flex-end !important; }
27 | .justify-content#{$infix}-center { justify-content: center !important; }
28 | .justify-content#{$infix}-between { justify-content: space-between !important; }
29 | .justify-content#{$infix}-around { justify-content: space-around !important; }
30 |
31 | .align-items#{$infix}-start { align-items: flex-start !important; }
32 | .align-items#{$infix}-end { align-items: flex-end !important; }
33 | .align-items#{$infix}-center { align-items: center !important; }
34 | .align-items#{$infix}-baseline { align-items: baseline !important; }
35 | .align-items#{$infix}-stretch { align-items: stretch !important; }
36 |
37 | .align-content#{$infix}-start { align-content: flex-start !important; }
38 | .align-content#{$infix}-end { align-content: flex-end !important; }
39 | .align-content#{$infix}-center { align-content: center !important; }
40 | .align-content#{$infix}-between { align-content: space-between !important; }
41 | .align-content#{$infix}-around { align-content: space-around !important; }
42 | .align-content#{$infix}-stretch { align-content: stretch !important; }
43 |
44 | .align-self#{$infix}-auto { align-self: auto !important; }
45 | .align-self#{$infix}-start { align-self: flex-start !important; }
46 | .align-self#{$infix}-end { align-self: flex-end !important; }
47 | .align-self#{$infix}-center { align-self: center !important; }
48 | .align-self#{$infix}-baseline { align-self: baseline !important; }
49 | .align-self#{$infix}-stretch { align-self: stretch !important; }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_float.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | @each $breakpoint in map-keys($grid-breakpoints) {
4 | @include media-breakpoint-up($breakpoint) {
5 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
6 |
7 | .float#{$infix}-left { float: left !important; }
8 | .float#{$infix}-right { float: right !important; }
9 | .float#{$infix}-none { float: none !important; }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_overflow.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | @each $value in $overflows {
4 | .overflow-#{$value} { overflow: $value !important; }
5 | }
6 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_position.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Common values
4 | @each $position in $positions {
5 | .position-#{$position} { position: $position !important; }
6 | }
7 |
8 | // Shorthand
9 |
10 | .fixed-top {
11 | position: fixed;
12 | top: 0;
13 | right: 0;
14 | left: 0;
15 | z-index: $zindex-fixed;
16 | }
17 |
18 | .fixed-bottom {
19 | position: fixed;
20 | right: 0;
21 | bottom: 0;
22 | left: 0;
23 | z-index: $zindex-fixed;
24 | }
25 |
26 | .sticky-top {
27 | @supports (position: sticky) {
28 | position: sticky;
29 | top: 0;
30 | z-index: $zindex-sticky;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_screenreaders.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Screenreaders
3 | //
4 |
5 | .sr-only {
6 | @include sr-only();
7 | }
8 |
9 | .sr-only-focusable {
10 | @include sr-only-focusable();
11 | }
12 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_shadows.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | .shadow-sm { box-shadow: $box-shadow-sm !important; }
4 | .shadow { box-shadow: $box-shadow !important; }
5 | .shadow-lg { box-shadow: $box-shadow-lg !important; }
6 | .shadow-none { box-shadow: none !important; }
7 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_sizing.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Width and height
4 |
5 | @each $prop, $abbrev in (width: w, height: h) {
6 | @each $size, $length in $sizes {
7 | .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
8 | }
9 | }
10 |
11 | .mw-100 { max-width: 100% !important; }
12 | .mh-100 { max-height: 100% !important; }
13 |
14 | // Viewport additional helpers
15 |
16 | .min-vw-100 { min-width: 100vw !important; }
17 | .min-vh-100 { min-height: 100vh !important; }
18 |
19 | .vw-100 { width: 100vw !important; }
20 | .vh-100 { height: 100vh !important; }
21 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_spacing.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | // Margin and Padding
4 |
5 | @each $breakpoint in map-keys($grid-breakpoints) {
6 | @include media-breakpoint-up($breakpoint) {
7 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
8 |
9 | @each $prop, $abbrev in (margin: m, padding: p) {
10 | @each $size, $length in $spacers {
11 | .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
12 | .#{$abbrev}t#{$infix}-#{$size},
13 | .#{$abbrev}y#{$infix}-#{$size} {
14 | #{$prop}-top: $length !important;
15 | }
16 | .#{$abbrev}r#{$infix}-#{$size},
17 | .#{$abbrev}x#{$infix}-#{$size} {
18 | #{$prop}-right: $length !important;
19 | }
20 | .#{$abbrev}b#{$infix}-#{$size},
21 | .#{$abbrev}y#{$infix}-#{$size} {
22 | #{$prop}-bottom: $length !important;
23 | }
24 | .#{$abbrev}l#{$infix}-#{$size},
25 | .#{$abbrev}x#{$infix}-#{$size} {
26 | #{$prop}-left: $length !important;
27 | }
28 | }
29 | }
30 |
31 | // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
32 | @each $size, $length in $spacers {
33 | @if $size != 0 {
34 | .m#{$infix}-n#{$size} { margin: -$length !important; }
35 | .mt#{$infix}-n#{$size},
36 | .my#{$infix}-n#{$size} {
37 | margin-top: -$length !important;
38 | }
39 | .mr#{$infix}-n#{$size},
40 | .mx#{$infix}-n#{$size} {
41 | margin-right: -$length !important;
42 | }
43 | .mb#{$infix}-n#{$size},
44 | .my#{$infix}-n#{$size} {
45 | margin-bottom: -$length !important;
46 | }
47 | .ml#{$infix}-n#{$size},
48 | .mx#{$infix}-n#{$size} {
49 | margin-left: -$length !important;
50 | }
51 | }
52 | }
53 |
54 | // Some special margin utils
55 | .m#{$infix}-auto { margin: auto !important; }
56 | .mt#{$infix}-auto,
57 | .my#{$infix}-auto {
58 | margin-top: auto !important;
59 | }
60 | .mr#{$infix}-auto,
61 | .mx#{$infix}-auto {
62 | margin-right: auto !important;
63 | }
64 | .mb#{$infix}-auto,
65 | .my#{$infix}-auto {
66 | margin-bottom: auto !important;
67 | }
68 | .ml#{$infix}-auto,
69 | .mx#{$infix}-auto {
70 | margin-left: auto !important;
71 | }
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_stretched-link.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Stretched link
3 | //
4 |
5 | .stretched-link {
6 | &::after {
7 | position: absolute;
8 | top: 0;
9 | right: 0;
10 | bottom: 0;
11 | left: 0;
12 | z-index: 1;
13 | // Just in case `pointer-events: none` is set on a parent
14 | pointer-events: auto;
15 | content: "";
16 | // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color
17 | background-color: rgba(0, 0, 0, 0);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/assets/scss/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 !important; }
8 |
9 | // Alignment
10 |
11 | .text-justify { text-align: justify !important; }
12 | .text-wrap { white-space: normal !important; }
13 | .text-nowrap { white-space: nowrap !important; }
14 | .text-truncate { @include text-truncate; }
15 |
16 | // Responsive alignment
17 |
18 | @each $breakpoint in map-keys($grid-breakpoints) {
19 | @include media-breakpoint-up($breakpoint) {
20 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
21 |
22 | .text#{$infix}-left { text-align: left !important; }
23 | .text#{$infix}-right { text-align: right !important; }
24 | .text#{$infix}-center { text-align: center !important; }
25 | }
26 | }
27 |
28 | // Transformation
29 |
30 | .text-lowercase { text-transform: lowercase !important; }
31 | .text-uppercase { text-transform: uppercase !important; }
32 | .text-capitalize { text-transform: capitalize !important; }
33 |
34 | // Weight and italics
35 |
36 | .font-weight-light { font-weight: $font-weight-light !important; }
37 | .font-weight-lighter { font-weight: $font-weight-lighter !important; }
38 | .font-weight-normal { font-weight: $font-weight-normal !important; }
39 | .font-weight-bold { font-weight: $font-weight-bold !important; }
40 | .font-weight-bolder { font-weight: $font-weight-bolder !important; }
41 | .font-italic { font-style: italic !important; }
42 |
43 | // Contextual colors
44 |
45 | .text-white { color: $white !important; }
46 |
47 | @each $color, $value in $theme-colors {
48 | @include text-emphasis-variant(".text-#{$color}", $value);
49 | }
50 |
51 | .text-body { color: $body-color !important; }
52 | .text-muted { color: $text-muted !important; }
53 |
54 | .text-black-50 { color: rgba($black, .5) !important; }
55 | .text-white-50 { color: rgba($white, .5) !important; }
56 |
57 | // Misc
58 |
59 | .text-hide {
60 | @include text-hide($ignore-warning: true);
61 | }
62 |
63 | .text-decoration-none { text-decoration: none !important; }
64 |
65 | .text-break {
66 | word-break: break-word !important; // IE & < Edge 18
67 | overflow-wrap: break-word !important;
68 | }
69 |
70 | // Reset
71 |
72 | .text-reset { color: inherit !important; }
73 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/bootstrap/utilities/_visibility.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable declaration-no-important
2 |
3 | //
4 | // Visibility utilities
5 | //
6 |
7 | .visible {
8 | visibility: visible !important;
9 | }
10 |
11 | .invisible {
12 | visibility: hidden !important;
13 | }
14 |
--------------------------------------------------------------------------------
/assets/scss/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 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_checkboxes-radio.scss:
--------------------------------------------------------------------------------
1 | .form-check{
2 | margin-top: .5rem;
3 | padding-left: 0;
4 | }
5 |
6 | .form-check .form-check-label{
7 | display: inline-block;
8 | position: relative;
9 | cursor: pointer;
10 | padding-left: 25px;
11 | line-height: 18px;
12 | margin-bottom: 0;
13 | -webkit-transition: color 0.3s linear;
14 | -moz-transition: color 0.3s linear;
15 | -o-transition: color 0.3s linear;
16 | -ms-transition: color 0.3s linear;
17 | transition: color 0.3s linear;
18 | }
19 | .radio .form-check-sign{
20 | padding-left: 28px;
21 | }
22 |
23 | .form-check-radio.form-check-inline .form-check-label {
24 | padding-left: 5px;
25 | margin-right: 10px;
26 | }
27 |
28 | .form-check .form-check-sign::before,
29 | .form-check .form-check-sign::after{
30 | content: " ";
31 | display: inline-block;
32 | position: absolute;
33 | width: 17px;
34 | height: 17px;
35 | left: 0;
36 | cursor: pointer;
37 | border-radius: 3px;
38 | top: 0;
39 | border: 1px solid darken($dark-gray,10%);
40 | -webkit-transition: opacity 0.3s linear;
41 | -moz-transition: opacity 0.3s linear;
42 | -o-transition: opacity 0.3s linear;
43 | -ms-transition: opacity 0.3s linear;
44 | transition: opacity 0.3s linear;
45 | }
46 |
47 | .form-check input[type="checkbox"]:checked + .form-check-sign::before,
48 | .form-check input[type="checkbox"]:checked + .form-check-sign::before{
49 | border: none;
50 | background-color: $primary;
51 | }
52 |
53 | .form-check .form-check-sign::after{
54 | font-family: 'nucleo';
55 | content: "\ea1b";
56 | top: 0px;
57 | text-align: center;
58 | font-size: 14px;
59 | opacity: 0;
60 | color: $white;
61 | font-weight: $font-weight-bold;
62 | border: 0;
63 | background-color: inherit;
64 | }
65 |
66 | .form-check.disabled .form-check-label,
67 | .form-check.disabled .form-check-label {
68 | color: $dark-gray;
69 | opacity: .5;
70 | cursor: not-allowed;
71 | }
72 |
73 | .form-check input[type="checkbox"],
74 | .radio input[type="radio"]{
75 | opacity: 0;
76 | position: absolute;
77 | visibility: hidden;
78 | }
79 | .form-check input[type="checkbox"]:checked + .form-check-sign::after{
80 | opacity: 1;
81 | font-size: 10px;
82 | margin-top: 0;
83 | }
84 |
85 |
86 | .form-check input[type="checkbox"]+ .form-check-sign::after{
87 | opacity: 0;
88 | font-size: 10px;
89 | margin-top: 0;
90 | }
91 |
92 | .form-control input[type="checkbox"]:disabled + .form-check-sign::before,
93 | .checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
94 | cursor: not-allowed;
95 | }
96 |
97 | .form-check input[type="checkbox"]:disabled + .form-check-sign,
98 | .form-check input[type="radio"]:disabled + .form-check-sign{
99 | pointer-events: none;
100 | }
101 |
102 | .form-check-radio .form-check-label{
103 | padding-top: 3px;
104 | }
105 | .form-check-radio .form-check-sign::before,
106 | .form-check-radio .form-check-sign::after{
107 | content: " ";
108 | width: 18px;
109 | height: 18px;
110 | border-radius: 50%;
111 | border: 1px solid darken($dark-gray,10%);
112 | display: inline-block;
113 | position: absolute;
114 | left: 0px;
115 | top: 3px;
116 | padding: 1px;
117 | -webkit-transition: opacity 0.3s linear;
118 | -moz-transition: opacity 0.3s linear;
119 | -o-transition: opacity 0.3s linear;
120 | -ms-transition: opacity 0.3s linear;
121 | transition: opacity 0.3s linear;
122 | }
123 |
124 | .form-check-radio input[type="radio"] + .form-check-sign:after,
125 | .form-check-radio input[type="radio"] {
126 | opacity: 0;
127 | }
128 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after {
129 | width: 6px;
130 | height: 6px;
131 | background-color: $primary;
132 | border-color: $primary;
133 | top: 9px;
134 | left: 6px;
135 | opacity: 1;
136 | }
137 |
138 | .form-check-radio input[type="radio"]:checked + .form-check-sign::before {
139 | border-color: $primary;
140 | }
141 |
142 |
143 | .form-check-radio input[type="radio"]:checked + .form-check-sign::after{
144 | opacity: 1;
145 | }
146 |
147 | .form-check-radio input[type="radio"]:disabled + .form-check-sign {
148 | color: $dark-gray;
149 | }
150 |
151 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
152 | .form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
153 | color: $dark-gray;
154 | }
155 |
--------------------------------------------------------------------------------
/assets/scss/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 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_forms.scss:
--------------------------------------------------------------------------------
1 | /* Form controls */
2 | @include form-control-placeholder(#6c757c, 1);
3 |
4 | .form-control{
5 | border-color: lighten($black,5%);
6 | border-radius: $border-radius-lg;
7 | font-size: $font-size-sm;
8 | @include transition-input-focus-color();
9 |
10 |
11 | &:focus{
12 | border-color: $primary;
13 | background-color: $input-bg;
14 | @include box-shadow(none);
15 |
16 | & + .input-group-append .input-group-text,
17 | & ~ .input-group-append .input-group-text,
18 | & + .input-group-prepend .input-group-text,
19 | & ~ .input-group-prepend .input-group-text{
20 | border: 1px solid $primary;
21 | border-left: none;
22 | background-color: $transparent-bg;
23 | }
24 | }
25 |
26 | .has-success &,
27 | .has-error &,
28 | .has-success &:focus,
29 | .has-error &:focus{
30 | @include box-shadow(none);
31 | }
32 |
33 | .has-danger &,
34 | .has-success &{
35 | &.form-control-success,
36 | &.form-control-danger{
37 | background-image: none;
38 | }
39 | }
40 |
41 | & + .form-control-feedback{
42 | border-radius: $border-radius-lg;
43 | margin-top: -7px;
44 | position: absolute;
45 | right: 10px;
46 | top: 50%;
47 | vertical-align: middle;
48 | }
49 |
50 | .open &{
51 | border-radius: $border-radius-lg $border-radius-lg 0 0;
52 | border-bottom-color: $transparent-bg;
53 | }
54 |
55 | & + .input-group-append .input-group-text,
56 | & + .input-group-prepend .input-group-text{
57 | background-color: $white;
58 | }
59 |
60 | }
61 |
62 | .has-success .input-group-append .input-group-text,
63 | .has-success .input-group-prepend .input-group-text,
64 | .has-success .form-control{
65 | border-color: lighten($black,5%);
66 | }
67 |
68 | .has-success .form-control:focus,
69 | .has-success.input-group-focus .input-group-append .input-group-text,
70 | .has-success.input-group-focus .input-group-prepend .input-group-text{
71 | border-color: darken($success, 10%);
72 | }
73 |
74 | .has-danger .form-control,
75 | .has-danger .input-group-append .input-group-text,
76 | .has-danger .input-group-prepend .input-group-text,
77 | .has-danger.input-group-focus .input-group-prepend .input-group-text,
78 | .has-danger.input-group-focus .input-group-append .input-group-text{
79 | border-color: lighten($danger-states,5%);
80 | color: $danger-states;
81 | background-color: rgba(222,222,222, .1);
82 |
83 | &:focus{
84 | background-color: $transparent-bg;
85 | }
86 | }
87 |
88 | .has-success,
89 | .has-danger{
90 | &:after{
91 | font-family: 'nucleo';
92 | content: "\ea1b";
93 | display: inline-block;
94 | position: absolute;
95 | right: 20px;
96 | top: 13px;
97 | color: $success;
98 | font-size: 11px;
99 | }
100 |
101 | &.form-control-lg{
102 | &:after{
103 | font-size: 13px;
104 | top: 24px;
105 | }
106 | }
107 |
108 | &.has-label{
109 | &:after{
110 | top: 37px;
111 | }
112 | }
113 |
114 |
115 | &.form-check:after{
116 | display: none !important;
117 | }
118 |
119 | &.form-check .form-check-label{
120 | color: $success;
121 | }
122 | }
123 |
124 | .has-danger{
125 | &:after{
126 | content: "\ea48";
127 | color: $danger-states;
128 | }
129 |
130 | &.form-check .form-check-label{
131 | color: $danger-states;
132 | }
133 | }
134 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_functions.scss:
--------------------------------------------------------------------------------
1 | // Retrieve color Sass maps
2 |
3 | @function section-color($key: "primary") {
4 | @return map-get($section-colors, $key);
5 | }
6 |
7 | // Lines colors
8 |
9 | @function shapes-primary-color($key: "step-1-gradient-bg") {
10 | @return map-get($shapes-primary-colors, $key);
11 | }
12 |
13 | @function shapes-default-color($key: "step-1-gradient-bg") {
14 | @return map-get($shapes-default-colors, $key);
15 | }
16 |
17 | @function lines-light-color($key: "step-1-gradient-bg") {
18 | @return map-get($shapes-light-colors, $key);
19 | }
20 |
21 | @function shapes-dark-color($key: "step-1-gradient-bg") {
22 | @return map-get($shapes-dark-colors, $key);
23 | }
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_images.scss:
--------------------------------------------------------------------------------
1 | img{
2 | max-width: 100%;
3 | border-radius: $border-radius-sm;
4 | }
5 | .img-raised{
6 | box-shadow: $box-shadow-raised;
7 | }
8 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_misc.scss:
--------------------------------------------------------------------------------
1 |
2 | /* Animations */
3 | .nav-pills .nav-link,
4 | .navbar,
5 | .nav-tabs .nav-link,
6 | .sidebar .nav a,
7 | .sidebar .nav a i,
8 | .sidebar .nav p,
9 | .navbar-collapse .navbar-nav .nav-link,
10 | .animation-transition-general,
11 | .tag,
12 | .tag [data-role="remove"],
13 | .animation-transition-general{
14 | @include transitions($general-transition-time, $transition-ease);
15 | }
16 |
17 | //transition for dropdown caret
18 | .bootstrap-switch-label:before,
19 | .caret{
20 | @include transitions($fast-transition-time, $transition-ease);
21 | }
22 |
23 | .dropdown-toggle[aria-expanded="true"]:after,
24 | a[data-toggle="collapse"][aria-expanded="true"] .caret,
25 | .card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i,
26 | .card-collapse .card a[data-toggle="collapse"].expanded i{
27 | @include rotate-180();
28 | }
29 |
30 | .caret{
31 | width: 0;
32 | height: 0;
33 | vertical-align: middle;
34 | border-top: 4px dashed;
35 | border-right: 4px solid transparent;
36 | border-left: 4px solid transparent;
37 | margin-top: -5px;
38 | position: absolute;
39 | top: 30px;
40 | margin-left: 5px;
41 | }
42 |
43 | .pull-left{
44 | float: left;
45 | }
46 | .pull-right{
47 | float: right;
48 | }
49 |
50 |
51 | // card user profile page
52 |
53 | .card {
54 | form {
55 | label + .form-control {
56 | margin-bottom: 20px;
57 | }
58 | }
59 | }
60 |
61 | .card {
62 | .map-title {
63 | color: $white;
64 | }
65 |
66 | &.card-chart {
67 | .gmnoprint,
68 | .gm-style-cc {
69 | display: none !important;
70 | }
71 | }
72 | }
73 |
74 | // documentation
75 |
76 | .bd-docs {
77 |
78 | h1,h2,h3,h4,h5,h6,p,ul li,ol li{
79 | color:#2c2c2c;
80 | }
81 |
82 |
83 | .bd-content>table>thead>tr>th {
84 | color: $black;
85 |
86 | }
87 |
88 | .blockquote, .blockquote p, .card p{
89 | color: rgba($white,0.8);
90 | }
91 | .bd-example {
92 | background: linear-gradient(#1e1e2f,#1e1e24);
93 |
94 | }
95 |
96 | .navbar {
97 | border-top: none;
98 |
99 | .navbar-nav .nav-link {
100 | color: rgba(255,255,255,.8) !important;
101 | }
102 | }
103 |
104 | .bd-example {
105 |
106 | .btn{
107 | margin: 4px 0;
108 | }
109 | .btn .badge {
110 | display: inline-block;
111 | }
112 |
113 | .tim-icons{
114 | color: $white;
115 | }
116 |
117 | .popover .popover-header {
118 | color: hsla(0,0%,71%,.6);
119 | }
120 |
121 |
122 | .popover-body {
123 | p {
124 | color: $gray-900;
125 | }
126 | }
127 |
128 | &.tooltip-demo p{
129 | color: rgba($white,.8);
130 | }
131 | }
132 |
133 | .card.card-body,
134 | .card .card-body {
135 | color: hsla(0,0%,100%,.8);
136 | }
137 |
138 | label,
139 | .form-check {
140 | color: hsla(0,0%,100%,.8);
141 | }
142 |
143 | .form-check + .btn {
144 | margin-top: 20px;
145 | }
146 |
147 | .bd-example,
148 | table {
149 | thead th {
150 | color: hsla(0,0%,100%,.8);
151 | }
152 |
153 | h1, h2, h3, h4, h5, h6,
154 | .h1, .h2, .h3, .h4, .h5, .h6 {
155 | color: hsla(0,0%,100%,.8);
156 | }
157 |
158 | .datepicker{
159 | thead th, table thead th,.tim-icons{
160 | color: $primary;
161 | }
162 |
163 | }
164 |
165 | .picker-switch .tim-icons{
166 | color: $primary;
167 | }
168 | }
169 |
170 | .footer {
171 | .container-fluid > nav {
172 | display: inline-block;
173 | }
174 | }
175 | }
176 | .modal.show .modal-dialog {
177 | -webkit-transform: translate(0,30%);
178 | transform: translate(0,30%);
179 | }
180 |
181 | code {
182 | color: $pink;
183 | }
184 |
185 | @media screen and (max-width: 991px){
186 | .profile-photo .profile-photo-small{
187 | margin-left: -2px;
188 | }
189 |
190 | .button-dropdown{
191 | display: none;
192 | }
193 |
194 | #searchModal .modal-dialog{
195 | margin: 20px;
196 | }
197 |
198 | #minimizeSidebar{
199 | display: none;
200 | }
201 |
202 | }
203 |
204 |
205 | @media screen and (max-width: 768px){
206 |
207 | .landing-page .section-story-overview .image-container:nth-child(2){
208 | margin-left: 0;
209 | margin-bottom: 30px;
210 | }
211 |
212 | }
213 |
214 | @media screen and (max-width: 576px){
215 | .page-header{
216 | .container h6.category-absolute{
217 | width: 90%;
218 | }
219 | }
220 |
221 | .form-horizontal .col-form-label, .form-horizontal .label-on-right{
222 | text-align: inherit;
223 | padding-top: 0;
224 | code{
225 | padding: 0 10px;
226 | }
227 | }
228 |
229 | }
230 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_mixins.scss:
--------------------------------------------------------------------------------
1 | @import "mixins/alert.scss";
2 | @import "mixins/badges.scss";
3 | @import "mixins/background-variant.scss";
4 | @import "mixins/buttons.scss";
5 | @import "mixins/forms.scss";
6 | @import "mixins/icon.scss";
7 | @import "mixins/modals.scss";
8 | @import "mixins/popovers.scss";
9 | @import "mixins/page-header.scss";
10 | @import "mixins/vendor-prefixes.scss";
11 | @import "mixins/opacity.scss";
12 | @import "mixins/modals.scss";
13 | @import "mixins/inputs.scss";
14 | @import "mixins/dropdown.scss";
15 | @import "mixins/wizard.scss";
16 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_modal.scss:
--------------------------------------------------------------------------------
1 | // Modals
2 | // Design element Dialogs
3 | // --------------------------------------------------
4 | .modal-content {
5 | border: 0;
6 |
7 | // Modal header
8 | // Top section of the modal w/ title and dismiss
9 |
10 | .modal-header {
11 | border-bottom: none;
12 |
13 | & button {
14 | position: absolute;
15 | right: 27px;
16 | top: 24px;
17 | outline: 0;
18 | padding: 1rem;
19 | margin: -1rem -1rem -1rem auto;
20 | }
21 | .title{
22 | color: $black;
23 | margin-top: 5px;
24 | margin-bottom: 0;
25 | }
26 |
27 | .modal-title{
28 | color: $black;
29 | }
30 |
31 | i.tim-icons {
32 | font-size: 16px;
33 | }
34 | }
35 |
36 |
37 | // Modal body
38 | // Where all modal content resides (sibling of .modal-header and .modal-footer)
39 | .modal-body {
40 | line-height: 1.9;
41 |
42 | p{
43 | color: $black;
44 | }
45 | }
46 | // Footer (for actions)
47 | .modal-footer {
48 | border-top: 0;
49 | -webkit-justify-content: space-between; /* Safari 6.1+ */
50 | justify-content: space-between;
51 |
52 | button {
53 | margin: 0;
54 | padding-left: 16px;
55 | padding-right: 16px;
56 | width: auto;
57 |
58 | &.pull-left {
59 | padding-left: 5px;
60 | padding-right: 5px;
61 | position: relative;
62 | left: -5px;
63 | }
64 | }
65 |
66 | }
67 | .modal-body + .modal-footer {
68 | padding-top: 0;
69 | }
70 | }
71 | .modal-backdrop {
72 | background: rgba(0,0,0,0.3);
73 | }
74 |
75 | .modal{
76 |
77 | &.modal-default{
78 | @include modal-colors($white, $black);
79 | }
80 |
81 | &.modal-primary{
82 | @include modal-colors($primary, $white);
83 | }
84 |
85 | &.modal-danger{
86 | @include modal-colors($danger, $white);
87 | }
88 |
89 | &.modal-warning{
90 | @include modal-colors($warning, $white);
91 | }
92 |
93 | &.modal-success{
94 | @include modal-colors($success, $white);
95 | }
96 |
97 | &.modal-info{
98 | @include modal-colors($info, $white);
99 | }
100 |
101 | .modal-header .close{
102 | color: $danger;
103 | text-shadow: none;
104 |
105 | &:hover,
106 | &:focus{
107 | opacity: 1;
108 | }
109 | }
110 |
111 | &.modal-black{
112 | .modal-content{
113 | background: linear-gradient(to bottom, $black 0%, $black-states 100%);
114 | color: rgba($white, 0.8);
115 | .modal-header{
116 | .modal-title, .title{
117 | color: rgba($white, 0.9);
118 | }
119 | }
120 | .modal-body{
121 | p{
122 | color: rgba($white, 0.8);
123 | }
124 | }
125 | }
126 | h1, h2, h3, h4, h5, h6, p{
127 | color: $white;
128 | }
129 | }
130 | }
131 |
132 | .modal-search{
133 | .modal-dialog{
134 | margin: 20px auto;
135 | max-width: 650px;
136 | input{
137 | border: none;
138 | font-size: 17px;
139 | font-weight: 100;
140 | }
141 | span{
142 | font-size: 35px;
143 | color: $search-gray;
144 | }
145 | }
146 | .modal-content{
147 | .modal-header{
148 | padding: 24px;
149 | }
150 | }
151 |
152 | .modal-header .close{
153 | color: $dark-background;
154 | top: 30px !important;
155 | }
156 |
157 | .modal-footer{
158 | border-top: 2px solid #f9f9f9;
159 | margin: 0px 25px 20px;
160 | }
161 | }
162 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_rtl.scss:
--------------------------------------------------------------------------------
1 | .rtl {
2 | .sidebar,
3 | .bootstrap-navbar{
4 | right: 0;
5 | left: auto;
6 | margin-right: 20px;
7 | margin-left: 0;
8 |
9 | .nav{
10 | i{
11 | float: right;
12 | margin-left: 15px;
13 | margin-right: 0;
14 | }
15 |
16 | p{
17 | margin-right: 45px;
18 | text-align: right;
19 | }
20 |
21 | .caret{
22 | left: 11px;
23 | right: auto;
24 | }
25 | }
26 |
27 | .logo{
28 | a.logo-mini{
29 | float: right;
30 | margin-right: 20px;
31 | margin-left: 10px;
32 | }
33 |
34 | .simple-text{
35 | text-align: right;
36 | }
37 | }
38 |
39 | .sidebar-wrapper .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon,
40 | .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon{
41 | float: right;
42 | margin-left: 15px;
43 | margin-right: 0;
44 | }
45 |
46 | .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
47 | .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal{
48 | text-align: right;
49 | }
50 |
51 | &:before{
52 | right: 30px;
53 | left: auto;
54 | }
55 | }
56 |
57 | .main-panel .content{
58 | padding: 80px 280px 30px 30px;
59 | }
60 |
61 | .footer{
62 | padding: 24px 300px 24px 0;
63 | }
64 |
65 | .dropdown-toggle:after{
66 | margin-right: .255em;
67 | margin-left: 0;
68 | }
69 |
70 | .dropdown-menu.dropdown-menu-right.dropdown-navbar{
71 | right: -220px !important;
72 | left: auto;
73 |
74 | &:before{
75 | right: auto;
76 | left: 35px;
77 | }
78 | }
79 |
80 | .notification{
81 | left: 40px;
82 | right: auto;
83 | }
84 |
85 | .dropdown-menu{
86 | right: auto;
87 | left: 0;
88 | }
89 |
90 |
91 | .minimize-sidebar{
92 | float: right;
93 | }
94 |
95 | .alert{
96 | left: 0;
97 | margin-left: 0;
98 | margin-right: 0;
99 | button.close{
100 | left: 10px !important;
101 | right: auto !important;
102 | }
103 |
104 | span[data-notify="icon"]{
105 | right: 15px;
106 | left: auto;
107 | }
108 |
109 |
110 |
111 | &.alert-with-icon{
112 | padding-right: 65px;
113 | padding-left: 15px;
114 | }
115 |
116 | &.alert-with-icon i[data-notify="icon"]{
117 | right: 15px;
118 | left: auto;
119 | }
120 | }
121 |
122 | .search-bar{
123 | margin-left: 0;
124 | }
125 |
126 | .modal-search .modal-header .close{
127 | margin-right: auto;
128 | left: 10px;
129 | }
130 |
131 |
132 | @media (min-width: 991px){
133 | &.sidebar-mini .main-panel .content {
134 | padding-right: 130px;
135 | padding-left: 50px;
136 | }
137 |
138 | &.sidebar-mini footer{
139 | padding-right: 130px;
140 | padding-left: 50px;
141 | }
142 |
143 | .navbar-minimize button{
144 | margin-right: -5px;
145 | }
146 | }
147 |
148 |
149 |
150 | @media screen and (max-width: 991px){
151 |
152 | .sidebar{
153 | margin-right: 0;
154 | }
155 | .main-panel .content{
156 | padding-right: 50px;
157 | }
158 |
159 | #bodyClick{
160 | right: 260px;
161 | left: auto;
162 | }
163 |
164 | .footer{
165 | padding-right: 15px;
166 | }
167 | }
168 |
169 | .navbar {
170 | .navbar-nav {
171 | padding-right: 0;
172 | a.nav-link {
173 | text-align: right;
174 | p{
175 | margin-right: 7px;
176 | }
177 | }
178 |
179 | .btn {
180 | margin-right: 0;
181 | padding: 0;
182 | i{
183 | margin-left: 4px;
184 | margin-right: 5px;
185 | }
186 | }
187 |
188 | .search-bar span{
189 | margin-right: 10px;
190 | }
191 | }
192 | }
193 |
194 | .ps__rail-y {
195 | right: auto !important;
196 | left: 0;
197 | }
198 |
199 | .main-panel {
200 | position: fixed;
201 | height: 100%;
202 | overflow-y: scroll;
203 | overflow-x: hidden;
204 | }
205 | }
206 |
207 |
208 | @media screen and (max-width: 768px){
209 |
210 | .rtl .main-panel .content{
211 | padding-left: 15px;
212 | padding-right: 15px;
213 | }
214 |
215 | }
216 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_tables.scss:
--------------------------------------------------------------------------------
1 | .table{
2 | > tbody > tr > td {
3 | color: rgba(255, 255, 255, 0.7) !important;
4 |
5 | .photo {
6 | height: 30px;
7 | width: 30px;
8 | border-radius: 50%;
9 | overflow: hidden;
10 | margin: 0 auto;
11 |
12 | img {
13 | width: 100%;
14 | }
15 | }
16 | }
17 |
18 | > tbody > tr.table-success > td{
19 | background-color: darken($success,10%);
20 | }
21 |
22 | > tbody > tr.table-info > td{
23 | background-color: $info;
24 | }
25 |
26 | > tbody > tr.table-primary > td{
27 | background-color: $primary;
28 | }
29 |
30 | > tbody > tr.table-warning > td{
31 | background-color: $warning;
32 | }
33 | > tbody > tr.table-danger > td{
34 | background-color: $danger;
35 | }
36 |
37 | .img-wrapper{
38 | width: 40px;
39 | height: 40px;
40 | border-radius: 50%;
41 | overflow: hidden;
42 | margin: 0 auto;
43 | }
44 |
45 | .img-row{
46 | max-width: 60px;
47 | width: 60px;
48 | }
49 |
50 | .form-check{
51 | margin: 0;
52 | margin-top: 5px;
53 |
54 | & label .form-check-sign::before,
55 | & label .form-check-sign::after{
56 | top: -17px;
57 | left: 4px;
58 | }
59 | }
60 |
61 | .btn{
62 | margin: 0;
63 | }
64 |
65 | small,.small{
66 | font-weight: 300;
67 | }
68 |
69 | .card-tasks .card-body &{
70 | margin-bottom: 0;
71 |
72 | > thead > tr > th,
73 | > tbody > tr > th,
74 | > tfoot > tr > th,
75 | > thead > tr > td,
76 | > tbody > tr > td,
77 | > tfoot > tr > td{
78 | padding-top: 5px;
79 | padding-bottom: 5px;
80 | }
81 | }
82 |
83 | > thead > tr > th{
84 | border-bottom-width: 1px;
85 | font-size: 12px;
86 | text-transform: uppercase;
87 | font-weight: $font-weight-extra-bold;
88 | border: 0;
89 | color: rgba($white, 0.7);
90 | }
91 |
92 | .radio,
93 | .checkbox{
94 | margin-top: 0;
95 | margin-bottom: 0;
96 | padding: 0;
97 | width: 15px;
98 |
99 | .icons{
100 | position: relative;
101 | }
102 |
103 | label{
104 | &:after,
105 | &:before{
106 | top: -17px;
107 | left: -3px;
108 | }
109 | }
110 | }
111 | > thead > tr > th,
112 | > tbody > tr > th,
113 | > tfoot > tr > th,
114 | > thead > tr > td,
115 | > tbody > tr > td,
116 | > tfoot > tr > td{
117 | border-color: rgba(255, 255, 255, 0.1);
118 | padding: 12px 7px;
119 | vertical-align: middle;
120 | }
121 |
122 | &.table-shopping tbody tr:last-child td{
123 | border: none;
124 | }
125 |
126 | .th-description{
127 | max-width: 150px;
128 | }
129 | .td-price{
130 | font-size: 26px;
131 | font-weight: $font-weight-light;
132 | margin-top: 5px;
133 | position: relative;
134 | top: 4px;
135 | text-align: right;
136 | }
137 | .td-total{
138 | font-weight: $font-weight-bold;
139 | font-size: $h5-font-size;
140 | padding-top: 20px;
141 | text-align: right;
142 | }
143 |
144 | .td-actions .btn{
145 | margin: 0px;
146 | }
147 |
148 | > tbody > tr{
149 | position: relative;
150 | }
151 |
152 | > tfoot > tr {
153 | color: hsla(0,0%,100%,.7);
154 | text-transform: uppercase;
155 | }
156 | }
157 |
158 | .table-responsive{
159 | overflow: scroll;
160 | padding-bottom: 10px;
161 | }
162 |
163 | #tables .table-responsive{
164 | margin-bottom: 30px;
165 | }
166 |
167 | table.tablesorter thead tr .header{
168 | background-image: url("../img/bg.gif");
169 | background-repeat: no-repeat;
170 | background-position: center right;
171 | cursor: pointer;
172 | }
173 |
174 | table.tablesorter thead tr .headerSortUp {
175 | background-image: url("../img/asc.gif");
176 | }
177 | table.tablesorter thead tr .headerSortDown {
178 | background-image: url("../img/desc.gif");
179 | }
180 |
181 | // datatables
182 |
183 | .dataTables_wrapper {
184 | .table-striped tbody tr:nth-of-type(odd) {
185 | background-color: rgba(0,0,0,.05);
186 | }
187 |
188 | .form-control-sm {
189 | font-size: 10px;
190 | }
191 | }
192 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_type.scss:
--------------------------------------------------------------------------------
1 | body {
2 | -moz-osx-font-smoothing: grayscale;
3 | -webkit-font-smoothing: antialiased;
4 | }
5 |
6 | h1, h2, h3, h4, h5, h6,
7 | .h1, .h2, .h3, .h4, .h5, .h6 {
8 | line-height: $headings-line-height;
9 |
10 | }
11 | p{
12 | font-weight: $font-weight-light;
13 | }
14 |
15 | button,
16 | input,
17 | optgroup,
18 | select,
19 | textarea{
20 | font-family: $font-family-base;
21 | }
22 | .card{
23 | h1,h2,h3,h4,h5,h6,p{
24 | color: $opacity-8;
25 | }
26 | }
27 | h1,h2,h3,h4,h5,h6{
28 | font-weight: $font-weight-normal;
29 | color: $opacity-8;
30 | }
31 |
32 | a{
33 | color: $primary-states;
34 | font-weight: $font-weight-light;
35 | &:hover,
36 | &:focus{
37 | color: $primary;
38 | }
39 | }
40 | h1, .h1 {
41 | line-height: 1.05;
42 | margin-bottom: $margin-base-vertical * 2;
43 |
44 | small{
45 | font-weight: $font-weight-bold;
46 | text-transform: uppercase;
47 | opacity: .8;
48 | }
49 |
50 | }
51 | h2, .h2{
52 | margin-bottom: $margin-base-vertical * 2;
53 | line-height: 1.2;
54 |
55 | }
56 | h3, .h3{
57 | margin-bottom: $margin-base-vertical * 2;
58 | line-height: 1.4em;
59 | }
60 | h4, .h4{
61 | line-height: 1.45em;
62 | margin-bottom: $margin-base-vertical;
63 |
64 | & + .category,
65 | &.title + .category{
66 | margin-top: -10px;
67 | }
68 | }
69 | h5, .h5 {
70 | line-height: 1.4em;
71 | margin-bottom: 15px;
72 | }
73 | h6, .h6{
74 | text-transform: uppercase;
75 | font-weight: $font-weight-bold;
76 | }
77 | p{
78 | color: $opacity-8;
79 | margin-bottom: 5px;
80 |
81 | &.description{
82 | font-size: 1.14em;
83 | }
84 | }
85 |
86 |
87 | .title{
88 | font-weight: $font-weight-bold;
89 | &.title-up{
90 | text-transform: uppercase;
91 |
92 | a{
93 | color: $black;
94 | text-decoration: none;
95 | }
96 | }
97 | & + .category{
98 | margin-top: -10px;
99 | }
100 | }
101 |
102 | .description,
103 | .card-description,
104 | .footer-big p,
105 | .card .footer .stats{
106 | color: $dark-gray;
107 | font-weight: $font-weight-light;
108 | }
109 | .category,
110 | .card-category{
111 | text-transform: capitalize;
112 | font-weight: $font-weight-normal;
113 | color: rgba($white, 0.6);
114 | font-size: $font-size-sm;
115 | }
116 |
117 | .card-category{
118 | font-size: $font-size-sm;
119 | }
120 |
121 | .blockquote{
122 | border-left: none;
123 | border: 1px solid $default;
124 | padding: 20px;
125 | font-size: $blockquote-font-size;
126 | line-height: 1.8;
127 |
128 | small{
129 | color: $default;
130 | font-size: $font-size-sm;
131 | text-transform: uppercase;
132 | }
133 |
134 | &.blockquote-primary{
135 | border-color: $primary;
136 | color: $primary;
137 |
138 | small{
139 | color: $primary;
140 | }
141 | }
142 |
143 | &.blockquote-danger{
144 | border-color: $danger;
145 | color: $danger;
146 |
147 | small{
148 | color: $danger;
149 | }
150 | }
151 |
152 | &.blockquote-white{
153 | border-color: $opacity-8;
154 | color: $white;
155 |
156 | small{
157 | color: $opacity-8;
158 | }
159 | }
160 | }
161 |
162 | ul li, ol li{
163 | color: $white;
164 | }
165 |
166 | pre{
167 | color: $opacity-8;
168 | }
169 |
170 | hr{
171 | border-top: 1px solid rgba(0,0,0,0.1);
172 | margin-top: $spacer;
173 | margin-bottom: $spacer;
174 | }
175 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/_utilities.scss:
--------------------------------------------------------------------------------
1 | @import "utilities/backgrounds.scss";
2 | @import "utilities/floating.scss";
3 | @import "utilities/helper.scss";
4 | @import "utilities/position.scss";
5 | @import "utilities/sizing.scss";
6 | @import "utilities/spacing.scss";
7 | @import "utilities/shadows.scss";
8 | @import "utilities/text.scss";
9 | @import "utilities/transform.scss";
10 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/cards/_card-chart.scss:
--------------------------------------------------------------------------------
1 | .card-chart {
2 | overflow: hidden;
3 | .card-header{
4 | .card-title{
5 | i{
6 | font-size: 16px;
7 | margin-right: 5px;
8 | margin-bottom: 3px;
9 | }
10 | }
11 | .card-category{
12 | margin-bottom: 5px;
13 | }
14 | }
15 | .card-body{
16 | padding-left: 5px;
17 | padding-right: 5px;
18 | .tab-space{
19 | padding: 0;
20 | }
21 | }
22 | .table{
23 | margin-bottom: 0;
24 |
25 | td{
26 | border-top: none;
27 | border-bottom: 1px solid rgba($white,0.1);
28 | }
29 | }
30 |
31 | .card-progress {
32 | margin-top: 30px;
33 | padding: 0 10px;
34 | }
35 |
36 | .chart-area {
37 | height: 220px;
38 | width: 100%;
39 | }
40 | .card-footer {
41 | margin-top: 15px;
42 |
43 | .stats{
44 | color: $dark-gray;
45 | }
46 | }
47 |
48 | .dropdown{
49 | position: absolute;
50 | right: 20px;
51 | top: 20px;
52 |
53 | .btn{
54 | margin: 0;
55 | }
56 | }
57 |
58 | &.card-chart-pie{
59 | .chart-area{
60 | padding: 10px 0 25px;
61 | height: auto;
62 | }
63 |
64 | .card-title{
65 | margin-bottom: 10px;
66 | i{
67 | font-size: 1rem;
68 | }
69 | }
70 |
71 | }
72 |
73 | }
74 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/cards/_card-map.scss:
--------------------------------------------------------------------------------
1 | .map {
2 | height: 500px;
3 | }
4 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/cards/_card-plain.scss:
--------------------------------------------------------------------------------
1 | .card-plain {
2 | background: transparent;
3 | box-shadow: none;
4 |
5 | .card-header,
6 | .card-footer {
7 | margin-left: 0;
8 | margin-right: 0;
9 | background-color: transparent;
10 | }
11 |
12 | &:not(.card-subcategories).card-body {
13 | padding-left: 0;
14 | padding-right: 0;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/cards/_card-task.scss:
--------------------------------------------------------------------------------
1 | .card-tasks {
2 | height: 473px;
3 |
4 | .table-full-width {
5 | max-height: 410px;
6 | position: relative;
7 | }
8 |
9 | .card-header {
10 | .title {
11 | margin-right: 20px;
12 | font-weight: $font-weight-normal;
13 | }
14 |
15 | .dropdown {
16 | float: right;
17 | color: darken($white, 20%);
18 | }
19 | }
20 |
21 | .card-body {
22 | i {
23 | color: $dark-gray;
24 | font-size: 1.4em;
25 | &:hover {
26 | color: $white;
27 | }
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/assets/scss/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 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/_alert.scss:
--------------------------------------------------------------------------------
1 | @mixin alert-variant($background, $border, $color) {
2 | color: color-yiq($background);
3 | // @include gradient-bg($background);
4 | background-color: lighten($background, 5%);
5 | border-color: $border;
6 |
7 | hr {
8 | border-top-color: darken($border, 5%);
9 | }
10 |
11 | .alert-link {
12 | color: darken($color, 10%);
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/_background-variant.scss:
--------------------------------------------------------------------------------
1 | // Contextual backgrounds
2 | @mixin bg-variant($parent, $color) {
3 | #{$parent} {
4 | background-color: $color !important;
5 | }
6 | a#{$parent},
7 | button#{$parent} {
8 | @include hover-focus {
9 | background-color: darken($color, 10%) !important;
10 | }
11 | }
12 | }
13 |
14 | @mixin bg-gradient-variant($parent, $color) {
15 | #{$parent} {
16 | background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/_badges.scss:
--------------------------------------------------------------------------------
1 | @mixin badge-variant($bg) {
2 | color: color-yiq($bg);
3 | background-color: $bg;
4 |
5 | &[href] {
6 | @include hover-focus {
7 | color: color-yiq($bg);
8 | text-decoration: none;
9 | background-color: darken($bg, 3%);
10 | }
11 | }
12 | .tagsinput-remove-link{
13 | color: $white;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/_dropdown.scss:
--------------------------------------------------------------------------------
1 | @mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {
2 | background-color: $brand-color;
3 |
4 | &:before{
5 | color: $brand-color;
6 | }
7 |
8 | .dropdown-header:not([href]):not([tabindex]){
9 | color: $dropdown-header-color;
10 | }
11 |
12 | .dropdown-item{
13 | color: $dropdown-color;
14 |
15 | &:hover,
16 | &:focus{
17 | background-color: $background-color;
18 | }
19 | }
20 |
21 | .dropdown-divider{
22 | background-color: $background-color;
23 | }
24 |
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/_forms.scss:
--------------------------------------------------------------------------------
1 | @mixin form-control-focus() {
2 | &:focus {
3 | color: $input-focus-color;
4 | background-color: $input-focus-bg;
5 | border-color: $input-focus-border-color;
6 | outline: 0;
7 | // Avoid using mixin so we can pass custom focus shadow properly
8 | @if $enable-shadows {
9 | box-shadow: $input-box-shadow, $input-focus-box-shadow;
10 | } @else {
11 | box-shadow: $input-focus-box-shadow;
12 | }
13 | }
14 | }
15 |
16 |
17 | @mixin form-validation-state($state, $color) {
18 | .#{$state}-feedback {
19 | display: none;
20 | width: 100%;
21 | margin-top: $form-feedback-margin-top;
22 | font-size: $form-feedback-font-size;
23 | color: $color;
24 | }
25 |
26 | .#{$state}-tooltip {
27 | position: absolute;
28 | top: 100%;
29 | z-index: 5;
30 | display: none;
31 | max-width: 100%; // Contain to parent when possible
32 | padding: .5rem;
33 | margin-top: .1rem;
34 | font-size: .875rem;
35 | line-height: 1;
36 | color: $white;
37 | background-color: rgba($color, .8);
38 | border-radius: .2rem;
39 | }
40 |
41 | .form-control,
42 | .custom-select {
43 | .was-validated &:#{$state},
44 | &.is-#{$state} {
45 | border-color: $color;
46 |
47 | &:focus {
48 | border-color: $color;
49 | //box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);
50 | }
51 |
52 | ~ .#{$state}-feedback,
53 | ~ .#{$state}-tooltip {
54 | display: block;
55 | }
56 | }
57 | }
58 |
59 | .form-check-input {
60 | .was-validated &:#{$state},
61 | &.is-#{$state} {
62 | ~ .form-check-label {
63 | color: $color;
64 | }
65 |
66 | ~ .#{$state}-feedback,
67 | ~ .#{$state}-tooltip {
68 | display: block;
69 | }
70 | }
71 | }
72 |
73 | .custom-control-input {
74 | .was-validated &:#{$state},
75 | &.is-#{$state} {
76 | ~ .custom-control-label {
77 | color: $color;
78 |
79 | &::before {
80 | background-color: lighten($color, 25%);
81 | border-color: lighten($color, 25%);
82 | }
83 | }
84 |
85 | ~ .#{$state}-feedback,
86 | ~ .#{$state}-tooltip {
87 | display: block;
88 | }
89 |
90 | &:checked {
91 | ~ .custom-control-label::before {
92 | @include gradient-bg(lighten($color, 10%));
93 | border-color: lighten($color, 25%);
94 | }
95 | }
96 |
97 | &:focus {
98 | ~ .custom-control-label::before {
99 | box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
100 | }
101 | }
102 | }
103 | }
104 |
105 | // custom file
106 | .custom-file-input {
107 | .was-validated &:#{$state},
108 | &.is-#{$state} {
109 | ~ .custom-file-label {
110 | border-color: $color;
111 |
112 | &::before { border-color: inherit; }
113 | }
114 |
115 | ~ .#{$state}-feedback,
116 | ~ .#{$state}-tooltip {
117 | display: block;
118 | }
119 |
120 | &:focus {
121 | ~ .custom-file-label {
122 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
123 | }
124 | }
125 | }
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/_icon.scss:
--------------------------------------------------------------------------------
1 | @mixin icon-shape-variant($color) {
2 | color: saturate(darken($color, 10%), 10);
3 | background-color: transparentize(lighten($color, 10%), .5);
4 | }
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/_modals.scss:
--------------------------------------------------------------------------------
1 | @mixin modal-colors($bg-color, $color) {
2 | .modal-content{
3 | background-color: $bg-color;
4 | color: $color;
5 | }
6 |
7 | .modal-body p{
8 | color: rgba($white, 0.8);
9 | }
10 |
11 | //inputs
12 | @include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2);
13 |
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/_page-header.scss:
--------------------------------------------------------------------------------
1 | @mixin linear-gradient($color1, $color2){
2 | background: $color1; /* For browsers that do not support gradients */
3 | background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
4 | background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
5 | background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
6 | background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
7 | }
8 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/_popovers.scss:
--------------------------------------------------------------------------------
1 | @mixin popover-variant($background) {
2 | background-color: $background;
3 |
4 | .popover-header {
5 | background-color: $background;
6 | color: color-yiq($background);
7 | opacity: .6;
8 | }
9 |
10 | .popover-body {
11 | color: color-yiq($background);
12 | }
13 |
14 | .popover-header{
15 | border-color: rgba(color-yiq($background), .2);
16 | }
17 |
18 | &.bs-popover-top {
19 | .arrow::after {
20 | border-top-color: $background;
21 | }
22 | }
23 |
24 | &.bs-popover-right {
25 | .arrow::after {
26 | border-right-color: $background;
27 | }
28 | }
29 |
30 | &.bs-popover-bottom {
31 | .arrow::after {
32 | border-bottom-color: $background;
33 | }
34 | }
35 |
36 | &.bs-popover-left {
37 | .arrow::after {
38 | border-left-color: $background;
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/_wizard.scss:
--------------------------------------------------------------------------------
1 | @mixin set-wizard-color($color) {
2 | .progress-with-circle .progress-bar{
3 | background: $color;
4 | }
5 |
6 | .nav-pills .nav-item .nav-link{
7 | color: $color;
8 |
9 | &.checked, &.active{
10 | background: $color;
11 | color: white;
12 | }
13 | &:hover{
14 | background: $white;
15 | }
16 | }
17 |
18 | .nav-pills .nav-item .nav-link.active,
19 | .nav-pills .nav-item .nav-link.checked:focus,
20 | .nav-pills .nav-item .nav-link.checked:hover,
21 | .nav-pills .nav-item .nav-link.active:focus,
22 | .nav-pills .nav-item .nav-link.active:hover{
23 | background: $color;
24 | }
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/mixins/opacity.scss:
--------------------------------------------------------------------------------
1 | // Opacity
2 |
3 | @mixin opacity($opacity) {
4 | opacity: $opacity;
5 | // IE8 filter
6 | $opacity-ie: ($opacity * 100);
7 | filter: #{alpha(opacity=$opacity-ie)};
8 | }
9 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/utilities/_backgrounds.scss:
--------------------------------------------------------------------------------
1 | @each $color, $value in $colors {
2 | @include bg-variant(".bg-#{$color}", $value);
3 | }
4 |
5 | @each $color, $value in $theme-colors {
6 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
7 | }
8 |
9 | @each $color, $value in $colors {
10 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
11 | }
12 |
13 |
14 | // Sections
15 |
16 | section {
17 | //background-color: section-color("primary");
18 | }
19 |
20 | @each $color, $value in $section-colors {
21 | @include bg-variant(".section-#{$color}", $value);
22 | }
23 |
24 | @each $color, $value in $theme-colors {
25 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
26 | }
27 |
28 |
29 | // Shape (svg) fill colors
30 | @each $color, $value in $theme-colors {
31 | .fill-#{$color} {
32 | fill: $value;
33 | }
34 |
35 | .stroke-#{$color} {
36 | stroke: $value;
37 | }
38 | }
39 |
40 | .fill-opacity-8 {
41 | fill-opacity: .8;
42 | }
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/utilities/_floating.scss:
--------------------------------------------------------------------------------
1 | .floating {
2 | animation: floating 3s ease infinite;
3 | will-change: transform;
4 |
5 | &:hover {
6 | animation-play-state: paused;
7 | }
8 | }
9 |
10 | .floating-lg {
11 | animation: floating-lg 3s ease infinite;
12 | }
13 |
14 | .floating-sm {
15 | animation: floating-sm 3s ease infinite;
16 | }
17 |
18 | // Keyframes
19 |
20 | @keyframes floating-lg {
21 | 0% {
22 | transform: translateY(0px)
23 | }
24 | 50% {
25 | transform: translateY(15px)
26 | }
27 | 100% {
28 | transform: translateY(0px)
29 | }
30 | }
31 |
32 | @keyframes floating {
33 | 0% {
34 | transform: translateY(0px)
35 | }
36 | 50% {
37 | transform: translateY(10px)
38 | }
39 | 100% {
40 | transform: translateY(0px)
41 | }
42 | }
43 |
44 | @keyframes floating-sm {
45 | 0% {
46 | transform: translateY(0px)
47 | }
48 | 50% {
49 | transform: translateY(5px)
50 | }
51 | 100% {
52 | transform: translateY(0px)
53 | }
54 | }
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/utilities/_helper.scss:
--------------------------------------------------------------------------------
1 | // Image
2 |
3 | .img-center {
4 | display: block;
5 | margin-left: auto;
6 | margin-right: auto;
7 | }
8 |
9 | // Clearfix
10 |
11 | .floatfix {
12 | &:before,
13 | &:after {
14 | content: '';
15 | display: table;
16 | }
17 | &:after {
18 | clear: both;
19 | }
20 | }
21 |
22 | // Overflows
23 |
24 | .overflow-visible {
25 | overflow: visible !important;
26 | }
27 | .overflow-hidden {
28 | overflow: hidden !important;
29 | }
30 |
31 | // Opacity classes
32 |
33 | .opacity-1 {
34 | opacity: .1 !important;
35 | }
36 | .opacity-2 {
37 | opacity: .2 !important;
38 | }
39 | .opacity-3 {
40 | opacity: .3 !important;
41 | }
42 | .opacity-4 {
43 | opacity: .4 !important;
44 | }
45 | .opacity-5 {
46 | opacity: .5 !important;
47 | }
48 | .opacity-6 {
49 | opacity: .6 !important;
50 | }
51 | .opacity-7 {
52 | opacity: .7 !important;
53 | }
54 | .opacity-8 {
55 | opacity: .8 !important;
56 | }
57 | .opacity-8 {
58 | opacity: .9 !important;
59 | }
60 | .opacity-10 {
61 | opacity: 1 !important;
62 | }
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/utilities/_position.scss:
--------------------------------------------------------------------------------
1 | @each $size, $value in $spacers {
2 | .top-#{$size} {
3 | top: $value;
4 | }
5 | .right-#{$size} {
6 | right: $value;
7 | }
8 | .bottom-#{$size} {
9 | bottom: $value;
10 | }
11 | .left-#{$size} {
12 | left: $value;
13 | }
14 | }
15 |
16 | .center {
17 | left: 50%;
18 | transform: translateX(-50%);
19 | }
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/utilities/_shadows.scss:
--------------------------------------------------------------------------------
1 | [class*="shadow"] {
2 | @if $enable-transitions {
3 | transition: $transition-base;
4 | }
5 | }
6 |
7 | .shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; }
8 | .shadow--hover:hover { box-shadow: $box-shadow !important; }
9 | .shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; }
10 | .shadow-none--hover:hover { box-shadow: none !important; }
11 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/utilities/_sizing.scss:
--------------------------------------------------------------------------------
1 | // Height values in vh
2 |
3 | .h-100vh {
4 | height: 100vh !important;
5 | }
6 |
--------------------------------------------------------------------------------
/assets/scss/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 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/utilities/_text.scss:
--------------------------------------------------------------------------------
1 | // Weight and italics
2 |
3 | .font-weight-300 { font-weight: 300 !important; }
4 | .font-weight-400 { font-weight: 400 !important; }
5 | .font-weight-500 { font-weight: 500 !important; }
6 | .font-weight-600 { font-weight: 600 !important; }
7 | .font-weight-700 { font-weight: 700 !important; }
8 | .font-weight-800 { font-weight: 800 !important; }
9 | .font-weight-900 { font-weight: 900 !important; }
10 |
11 |
12 | // Text decorations
13 |
14 | .text-underline { text-decoration: underline; }
15 | .text-through { text-decoration: line-through; }
16 |
17 |
18 | // Line heights
19 |
20 | .lh-100 { line-height: 1; }
21 | .lh-110 { line-height: 1.1; }
22 | .lh-120 { line-height: 1.2; }
23 | .lh-130 { line-height: 1.3; }
24 | .lh-140 { line-height: 1.4; }
25 | .lh-150 { line-height: 1.5; }
26 | .lh-160 { line-height: 1.6; }
27 | .lh-170 { line-height: 1.7; }
28 | .lh-180 { line-height: 1.8; }
29 |
30 | //Contextual colors
31 |
32 | .text-muted { color: $text-muted !important; }
33 |
34 |
35 |
36 | // Letter spacings
37 |
38 | .ls-1 { letter-spacing: .0625rem; }
39 | .ls-15 { letter-spacing: .09375rem; }
40 | .ls-2 { letter-spacing: 0.125rem; }
41 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/utilities/_transform.scss:
--------------------------------------------------------------------------------
1 | @include media-breakpoint-up(lg) {
2 | .transform-perspective-right {
3 | transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);
4 | }
5 | .transform-perspective-left{
6 | transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg)
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/vendor/_plugin-animate-bootstrap-notify.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | // This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | @charset "UTF-8";
34 |
35 | /*!
36 | Animate.css - http://daneden.me/animate
37 | Licensed under the MIT license - http://opensource.org/licenses/MIT
38 |
39 | Copyright (c) 2015 Daniel Eden
40 | */
41 |
42 | .animated {
43 | -webkit-animation-duration: 1s;
44 | animation-duration: 1s;
45 | -webkit-animation-fill-mode: both;
46 | animation-fill-mode: both;
47 | }
48 |
49 | .animated.infinite {
50 | -webkit-animation-iteration-count: infinite;
51 | animation-iteration-count: infinite;
52 | }
53 |
54 | .animated.hinge {
55 | -webkit-animation-duration: 2s;
56 | animation-duration: 2s;
57 | }
58 |
59 | .animated.bounceIn,
60 | .animated.bounceOut {
61 | -webkit-animation-duration: .75s;
62 | animation-duration: .75s;
63 | }
64 |
65 | .animated.flipOutX,
66 | .animated.flipOutY {
67 | -webkit-animation-duration: .75s;
68 | animation-duration: .75s;
69 | }
70 |
71 | @-webkit-keyframes shake {
72 | from, to {
73 | -webkit-transform: translate3d(0, 0, 0);
74 | transform: translate3d(0, 0, 0);
75 | }
76 |
77 | 10%, 30%, 50%, 70%, 90% {
78 | -webkit-transform: translate3d(-10px, 0, 0);
79 | transform: translate3d(-10px, 0, 0);
80 | }
81 |
82 | 20%, 40%, 60%, 80% {
83 | -webkit-transform: translate3d(10px, 0, 0);
84 | transform: translate3d(10px, 0, 0);
85 | }
86 | }
87 |
88 | @keyframes shake {
89 | from, to {
90 | -webkit-transform: translate3d(0, 0, 0);
91 | transform: translate3d(0, 0, 0);
92 | }
93 |
94 | 10%, 30%, 50%, 70%, 90% {
95 | -webkit-transform: translate3d(-10px, 0, 0);
96 | transform: translate3d(-10px, 0, 0);
97 | }
98 |
99 | 20%, 40%, 60%, 80% {
100 | -webkit-transform: translate3d(10px, 0, 0);
101 | transform: translate3d(10px, 0, 0);
102 | }
103 | }
104 |
105 | .shake {
106 | -webkit-animation-name: shake;
107 | animation-name: shake;
108 | }
109 |
110 |
111 |
112 | @-webkit-keyframes fadeInDown {
113 | from {
114 | opacity: 0;
115 | -webkit-transform: translate3d(0, -100%, 0);
116 | transform: translate3d(0, -100%, 0);
117 | }
118 |
119 | to {
120 | opacity: 1;
121 | -webkit-transform: none;
122 | transform: none;
123 | }
124 | }
125 |
126 | @keyframes fadeInDown {
127 | from {
128 | opacity: 0;
129 | -webkit-transform: translate3d(0, -100%, 0);
130 | transform: translate3d(0, -100%, 0);
131 | }
132 |
133 | to {
134 | opacity: 1;
135 | -webkit-transform: none;
136 | transform: none;
137 | }
138 | }
139 |
140 | .fadeInDown {
141 | -webkit-animation-name: fadeInDown;
142 | animation-name: fadeInDown;
143 | }
144 |
145 |
146 | @-webkit-keyframes fadeOut {
147 | from {
148 | opacity: 1;
149 | }
150 |
151 | to {
152 | opacity: 0;
153 | }
154 | }
155 |
156 | @keyframes fadeOut {
157 | from {
158 | opacity: 1;
159 | }
160 |
161 | to {
162 | opacity: 0;
163 | }
164 | }
165 |
166 | .fadeOut {
167 | -webkit-animation-name: fadeOut;
168 | animation-name: fadeOut;
169 | }
170 |
171 | @-webkit-keyframes fadeOutDown {
172 | from {
173 | opacity: 1;
174 | }
175 |
176 | to {
177 | opacity: 0;
178 | -webkit-transform: translate3d(0, 100%, 0);
179 | transform: translate3d(0, 100%, 0);
180 | }
181 | }
182 |
183 | @keyframes fadeOutDown {
184 | from {
185 | opacity: 1;
186 | }
187 |
188 | to {
189 | opacity: 0;
190 | -webkit-transform: translate3d(0, 100%, 0);
191 | transform: translate3d(0, 100%, 0);
192 | }
193 | }
194 |
195 | .fadeOutDown {
196 | -webkit-animation-name: fadeOutDown;
197 | animation-name: fadeOutDown;
198 | }
199 |
200 | @-webkit-keyframes fadeOutUp {
201 | from {
202 | opacity: 1;
203 | }
204 |
205 | to {
206 | opacity: 0;
207 | -webkit-transform: translate3d(0, -100%, 0);
208 | transform: translate3d(0, -100%, 0);
209 | }
210 | }
211 |
212 | @keyframes fadeOutUp {
213 | from {
214 | opacity: 1;
215 | }
216 |
217 | to {
218 | opacity: 0;
219 | -webkit-transform: translate3d(0, -100%, 0);
220 | transform: translate3d(0, -100%, 0);
221 | }
222 | }
223 |
224 | .fadeOutUp {
225 | -webkit-animation-name: fadeOutUp;
226 | animation-name: fadeOutUp;
227 | }
228 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/custom/vendor/_plugin-perfect-scrollbar.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Container style
3 | */
4 | .ps {
5 | overflow: hidden !important;
6 | overflow-anchor: none;
7 | -ms-overflow-style: none;
8 | touch-action: auto;
9 | -ms-touch-action: auto;
10 | }
11 |
12 | /*
13 | * Scrollbar rail styles
14 | */
15 | .ps__rail-x {
16 | display: none;
17 | opacity: 0;
18 | transition: background-color .2s linear, opacity .2s linear;
19 | -webkit-transition: background-color .2s linear, opacity .2s linear;
20 | height: 15px;
21 | /* there must be 'bottom' or 'top' for ps__rail-x */
22 | bottom: 0px;
23 | /* please don't change 'position' */
24 | position: absolute;
25 | }
26 |
27 | .ps__rail-y {
28 | display: none;
29 | opacity: 0;
30 | transition: background-color .2s linear, opacity .2s linear;
31 | -webkit-transition: background-color .2s linear, opacity .2s linear;
32 | width: 15px;
33 | /* there must be 'right' or 'left' for ps__rail-y */
34 | right: 0;
35 | /* please don't change 'position' */
36 | position: absolute;
37 | }
38 |
39 | .ps--active-x > .ps__rail-x,
40 | .ps--active-y > .ps__rail-y {
41 | display: block;
42 | background-color: transparent;
43 | }
44 |
45 | .ps:hover > .ps__rail-x,
46 | .ps:hover > .ps__rail-y,
47 | .ps--focus > .ps__rail-x,
48 | .ps--focus > .ps__rail-y,
49 | .ps--scrolling-x > .ps__rail-x,
50 | .ps--scrolling-y > .ps__rail-y {
51 | opacity: 0.6;
52 | }
53 |
54 | .ps .ps__rail-x:hover,
55 | .ps .ps__rail-y:hover,
56 | .ps .ps__rail-x:focus,
57 | .ps .ps__rail-y:focus,
58 | .ps .ps__rail-x.ps--clicking,
59 | .ps .ps__rail-y.ps--clicking {
60 | background-color: #eee;
61 | opacity: 0.9;
62 | }
63 |
64 | /*
65 | * Scrollbar thumb styles
66 | */
67 | .ps__thumb-x {
68 | background-color: #aaa;
69 | border-radius: 6px;
70 | transition: background-color .2s linear, height .2s ease-in-out;
71 | -webkit-transition: background-color .2s linear, height .2s ease-in-out;
72 | height: 6px;
73 | /* there must be 'bottom' for ps__thumb-x */
74 | bottom: 2px;
75 | /* please don't change 'position' */
76 | position: absolute;
77 | }
78 |
79 | .ps__thumb-y {
80 | background-color: #aaa;
81 | border-radius: 6px;
82 | transition: background-color .2s linear, width .2s ease-in-out;
83 | -webkit-transition: background-color .2s linear, width .2s ease-in-out;
84 | width: 6px;
85 | /* there must be 'right' for ps__thumb-y */
86 | right: 2px;
87 | /* please don't change 'position' */
88 | position: absolute;
89 | }
90 |
91 | .ps__rail-x:hover > .ps__thumb-x,
92 | .ps__rail-x:focus > .ps__thumb-x,
93 | .ps__rail-x.ps--clicking .ps__thumb-x {
94 | background-color: #999;
95 | height: 11px;
96 | }
97 |
98 | .ps__rail-y:hover > .ps__thumb-y,
99 | .ps__rail-y:focus > .ps__thumb-y,
100 | .ps__rail-y.ps--clicking .ps__thumb-y {
101 | background-color: #999;
102 | width: 11px;
103 | }
104 |
105 | /* MS supports */
106 | @supports (-ms-overflow-style: none) {
107 | .ps {
108 | overflow: auto !important;
109 | }
110 | }
111 |
112 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
113 | .ps {
114 | overflow: auto !important;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/assets/scss/black-dashboard/plugins/_plugin-perfect-scrollbar.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Container style
3 | */
4 | .ps {
5 | overflow: hidden !important;
6 | overflow-anchor: none;
7 | -ms-overflow-style: none;
8 | touch-action: auto;
9 | -ms-touch-action: auto;
10 | }
11 |
12 | /*
13 | * Scrollbar rail styles
14 | */
15 | .ps__rail-x {
16 | display: none;
17 | opacity: 0;
18 | transition: background-color .2s linear, opacity .2s linear;
19 | -webkit-transition: background-color .2s linear, opacity .2s linear;
20 | height: 15px;
21 | /* there must be 'bottom' or 'top' for ps__rail-x */
22 | bottom: 0px;
23 | /* please don't change 'position' */
24 | position: absolute;
25 | }
26 |
27 | .ps__rail-y {
28 | display: none;
29 | opacity: 0;
30 | transition: background-color .2s linear, opacity .2s linear;
31 | -webkit-transition: background-color .2s linear, opacity .2s linear;
32 | width: 15px;
33 | /* there must be 'right' or 'left' for ps__rail-y */
34 | right: 0;
35 | /* please don't change 'position' */
36 | position: absolute;
37 | }
38 |
39 | .ps--active-x > .ps__rail-x,
40 | .ps--active-y > .ps__rail-y {
41 | display: block;
42 | background-color: transparent;
43 | }
44 |
45 | .ps:hover > .ps__rail-x,
46 | .ps:hover > .ps__rail-y,
47 | .ps--focus > .ps__rail-x,
48 | .ps--focus > .ps__rail-y,
49 | .ps--scrolling-x > .ps__rail-x,
50 | .ps--scrolling-y > .ps__rail-y {
51 | opacity: 0.6;
52 | }
53 |
54 | .ps .ps__rail-x:hover,
55 | .ps .ps__rail-y:hover,
56 | .ps .ps__rail-x:focus,
57 | .ps .ps__rail-y:focus,
58 | .ps .ps__rail-x.ps--clicking,
59 | .ps .ps__rail-y.ps--clicking {
60 | background-color: #eee;
61 | opacity: 0.9;
62 | }
63 |
64 | /*
65 | * Scrollbar thumb styles
66 | */
67 | .ps__thumb-x {
68 | background-color: #aaa;
69 | border-radius: 6px;
70 | transition: background-color .2s linear, height .2s ease-in-out;
71 | -webkit-transition: background-color .2s linear, height .2s ease-in-out;
72 | height: 6px;
73 | /* there must be 'bottom' for ps__thumb-x */
74 | bottom: 2px;
75 | /* please don't change 'position' */
76 | position: absolute;
77 | }
78 |
79 | .ps__thumb-y {
80 | background-color: #aaa;
81 | border-radius: 6px;
82 | transition: background-color .2s linear, width .2s ease-in-out;
83 | -webkit-transition: background-color .2s linear, width .2s ease-in-out;
84 | width: 6px;
85 | /* there must be 'right' for ps__thumb-y */
86 | right: 2px;
87 | /* please don't change 'position' */
88 | position: absolute;
89 | }
90 |
91 | .ps__rail-x:hover > .ps__thumb-x,
92 | .ps__rail-x:focus > .ps__thumb-x,
93 | .ps__rail-x.ps--clicking .ps__thumb-x {
94 | background-color: #999;
95 | height: 11px;
96 | }
97 |
98 | .ps__rail-y:hover > .ps__thumb-y,
99 | .ps__rail-y:focus > .ps__thumb-y,
100 | .ps__rail-y.ps--clicking .ps__thumb-y {
101 | background-color: #999;
102 | width: 11px;
103 | }
104 |
105 | /* MS supports */
106 | @supports (-ms-overflow-style: none) {
107 | .ps {
108 | overflow: auto !important;
109 | }
110 | }
111 |
112 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
113 | .ps {
114 | overflow: auto !important;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/genezio.yaml:
--------------------------------------------------------------------------------
1 | name: black-dashboard
2 | region: us-east-1
3 | frontend:
4 | # Specifies the path of your code.
5 | path: .
6 | # Specifies the folder where the build is located.
7 | # This is the folder that will be deployed.
8 | publish: .
9 | # Scripts will run in the specified `path` folder.
10 | yamlVersion: 2
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var path = require('path');
3 | var sass = require('gulp-sass')(require('sass'));
4 | var autoprefixer = require('gulp-autoprefixer');
5 | var sourcemaps = require('gulp-sourcemaps');
6 | var open = require('gulp-open');
7 |
8 | var Paths = {
9 | HERE: './',
10 | DIST: 'dist/',
11 | CSS: './assets/css/',
12 | SCSS_TOOLKIT_SOURCES: './assets/scss/black-dashboard.scss',
13 | SCSS: './assets/scss/**/**'
14 | };
15 |
16 | gulp.task('compile-scss', function() {
17 | return gulp.src(Paths.SCSS_TOOLKIT_SOURCES)
18 | .pipe(sourcemaps.init())
19 | .pipe(sass().on('error', sass.logError))
20 | .pipe(autoprefixer())
21 | .pipe(sourcemaps.write(Paths.HERE))
22 | .pipe(gulp.dest(Paths.CSS));
23 | });
24 |
25 | gulp.task('watch', function() {
26 | gulp.watch(Paths.SCSS, gulp.series('compile-scss'));
27 | });
28 |
29 | gulp.task('open', function() {
30 | gulp.src('examples/dashboard.html')
31 | .pipe(open());
32 | });
33 |
34 | gulp.task('open-app', gulp.parallel('open', 'watch'));
35 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "black-dashboard",
3 | "version": "1.0.0",
4 | "description": "Black Dasboard, a Black Desgin. Coded by Creative Tim",
5 | "main": "index.html",
6 | "directories": {
7 | "example": "root"
8 | },
9 | "scripts": {
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/creativetimofficial/black-dashboard.git"
15 | },
16 | "keywords": [
17 | "black dashboard",
18 | "bootstrap admin",
19 | "bootstrap dashboard",
20 | "black design admin",
21 | "black design",
22 | "creative tim",
23 | "html dashboard",
24 | "html css dashboard",
25 | "web dashboard",
26 | "freebie",
27 | "free bootstrap dashboard",
28 | "css3 dashboard",
29 | "bootstrap admin",
30 | "bootstrap dashboard",
31 | "frontend",
32 | "responsive bootstrap dashboard"
33 | ],
34 | "author": "Creative Tim (https://www.creative-tim.com/)",
35 | "license": "MIT",
36 | "bugs": {
37 | "url": "https://github.com/creativetimofficial/black-dashboard/issues"
38 | },
39 | "devDependencies": {
40 | "gulp": "^4.0.2",
41 | "gulp-autoprefixer": "^7.0.1",
42 | "gulp-clean": "^0.4.0",
43 | "gulp-install": "^1.1.0",
44 | "gulp-open": "^3.0.1",
45 | "gulp-sass": "^5.1.0",
46 | "gulp-sourcemaps": "^2.6.5",
47 | "sass": "^1.49.9"
48 | },
49 | "homepage": "http://demos.creative-tim.com/black-dashboard/examples/dashboard.html?_ga=2.143239282.69692347.1519629130-329288944.1519374311"
50 | }
51 |
--------------------------------------------------------------------------------