`s, which have `min-width: 0;` by default.
+ // So we reset that to ensure fieldsets behave more like a standard block element.
+ // See https://github.com/twbs/bootstrap/issues/59
+ // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+ min-width: 0;
+ // Reset the default outline behavior of fieldsets so they don't affect page layout.
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
+legend {
+ display: block;
+ width: 100%;
+ max-width: 100%; // 1
+ padding: 0;
+ margin-bottom: .5rem;
+ font-size: 1.5rem;
+ line-height: inherit;
+ color: inherit; // 2
+ white-space: normal; // 1
+}
+
+progress {
+ vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+[type="search"] {
+ // This overrides the extra rounded corners on search inputs in iOS so that our
+ // `.form-control` class can properly style them. Note that this cannot simply
+ // be added to `.form-control` as it's not specific enough. For details, see
+ // https://github.com/twbs/bootstrap/issues/11586.
+ outline-offset: -2px; // 2. Correct the outline style in Safari.
+ -webkit-appearance: none;
+}
+
+//
+// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+//
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+ font: inherit; // 2
+ -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
+output {
+ display: inline-block;
+}
+
+summary {
+ display: list-item; // Add the correct display in all browsers
+ cursor: pointer;
+}
+
+template {
+ display: none; // Add the correct display in IE
+}
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
+[hidden] {
+ display: none !important;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_root.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_root.scss
new file mode 100644
index 0000000..ad550df
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_root.scss
@@ -0,0 +1,19 @@
+:root {
+ // Custom variable values only support SassScript inside `#{}`.
+ @each $color, $value in $colors {
+ --#{$color}: #{$value};
+ }
+
+ @each $color, $value in $theme-colors {
+ --#{$color}: #{$value};
+ }
+
+ @each $bp, $value in $grid-breakpoints {
+ --breakpoint-#{$bp}: #{$value};
+ }
+
+ // Use `inspect` for lists so that quoted items keep the quotes.
+ // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+ --font-family-sans-serif: #{inspect($font-family-sans-serif)};
+ --font-family-monospace: #{inspect($font-family-monospace)};
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_tables.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_tables.scss
new file mode 100644
index 0000000..5fa6a86
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_tables.scss
@@ -0,0 +1,187 @@
+//
+// Basic Bootstrap table
+//
+
+.table {
+ width: 100%;
+ margin-bottom: $spacer;
+ background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+
+ th,
+ td {
+ padding: $table-cell-padding;
+ vertical-align: top;
+ border-top: $table-border-width solid $table-border-color;
+ }
+
+ thead th {
+ vertical-align: bottom;
+ border-bottom: (2 * $table-border-width) solid $table-border-color;
+ }
+
+ tbody + tbody {
+ border-top: (2 * $table-border-width) solid $table-border-color;
+ }
+
+ .table {
+ background-color: $body-bg;
+ }
+}
+
+
+//
+// Condensed table w/ half padding
+//
+
+.table-sm {
+ th,
+ td {
+ padding: $table-cell-padding-sm;
+ }
+}
+
+
+// Border versions
+//
+// Add or remove borders all around the table and between all the columns.
+
+.table-bordered {
+ border: $table-border-width solid $table-border-color;
+
+ th,
+ td {
+ border: $table-border-width solid $table-border-color;
+ }
+
+ thead {
+ th,
+ td {
+ border-bottom-width: (2 * $table-border-width);
+ }
+ }
+}
+
+.table-borderless {
+ th,
+ td,
+ thead th,
+ tbody + tbody {
+ border: 0;
+ }
+}
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+ tbody tr:nth-of-type(#{$table-striped-order}) {
+ background-color: $table-accent-bg;
+ }
+}
+
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+ tbody tr {
+ @include hover {
+ background-color: $table-hover-bg;
+ }
+ }
+}
+
+
+// Table backgrounds
+//
+// Exact selectors below required to override `.table-striped` and prevent
+// inheritance to nested tables.
+
+@each $color, $value in $theme-colors {
+ @include table-row-variant($color, theme-color-level($color, -9));
+}
+
+@include table-row-variant(active, $table-active-bg);
+
+
+// Dark styles
+//
+// Same table markup, but inverted color scheme: dark background and light text.
+
+// stylelint-disable-next-line no-duplicate-selectors
+.table {
+ .thead-dark {
+ th {
+ color: $table-dark-color;
+ background-color: $table-dark-bg;
+ border-color: $table-dark-border-color;
+ }
+ }
+
+ .thead-light {
+ th {
+ color: $table-head-color;
+ background-color: $table-head-bg;
+ border-color: $table-border-color;
+ }
+ }
+}
+
+.table-dark {
+ color: $table-dark-color;
+ background-color: $table-dark-bg;
+
+ th,
+ td,
+ thead th {
+ border-color: $table-dark-border-color;
+ }
+
+ &.table-bordered {
+ border: 0;
+ }
+
+ &.table-striped {
+ tbody tr:nth-of-type(odd) {
+ background-color: $table-dark-accent-bg;
+ }
+ }
+
+ &.table-hover {
+ tbody tr {
+ @include hover {
+ background-color: $table-dark-hover-bg;
+ }
+ }
+ }
+}
+
+
+// Responsive tables
+//
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
+
+.table-responsive {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ &#{$infix} {
+ @include media-breakpoint-down($breakpoint) {
+ display: block;
+ width: 100%;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+
+ // Prevent double border on horizontal scroll due to use of `display: block;`
+ > .table-bordered {
+ border: 0;
+ }
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_tooltip.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_tooltip.scss
new file mode 100644
index 0000000..1286ebf
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_tooltip.scss
@@ -0,0 +1,115 @@
+// Base class
+.tooltip {
+ position: absolute;
+ z-index: $zindex-tooltip;
+ display: block;
+ margin: $tooltip-margin;
+ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+ // So reset our font and text properties to avoid inheriting weird values.
+ @include reset-text();
+ font-size: $tooltip-font-size;
+ // Allow breaking very long words so they don't overflow the tooltip's bounds
+ word-wrap: break-word;
+ opacity: 0;
+
+ &.show { opacity: $tooltip-opacity; }
+
+ .arrow {
+ position: absolute;
+ display: block;
+ width: $tooltip-arrow-width;
+ height: $tooltip-arrow-height;
+
+ &::before {
+ position: absolute;
+ content: "";
+ border-color: transparent;
+ border-style: solid;
+ }
+ }
+}
+
+.bs-tooltip-top {
+ padding: $tooltip-arrow-height 0;
+
+ .arrow {
+ bottom: 0;
+
+ &::before {
+ top: 0;
+ border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+ border-top-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-right {
+ padding: 0 $tooltip-arrow-height;
+
+ .arrow {
+ left: 0;
+ width: $tooltip-arrow-height;
+ height: $tooltip-arrow-width;
+
+ &::before {
+ right: 0;
+ border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+ border-right-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-bottom {
+ padding: $tooltip-arrow-height 0;
+
+ .arrow {
+ top: 0;
+
+ &::before {
+ bottom: 0;
+ border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+ border-bottom-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-left {
+ padding: 0 $tooltip-arrow-height;
+
+ .arrow {
+ right: 0;
+ width: $tooltip-arrow-height;
+ height: $tooltip-arrow-width;
+
+ &::before {
+ left: 0;
+ border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+ border-left-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-auto {
+ &[x-placement^="top"] {
+ @extend .bs-tooltip-top;
+ }
+ &[x-placement^="right"] {
+ @extend .bs-tooltip-right;
+ }
+ &[x-placement^="bottom"] {
+ @extend .bs-tooltip-bottom;
+ }
+ &[x-placement^="left"] {
+ @extend .bs-tooltip-left;
+ }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+ max-width: $tooltip-max-width;
+ padding: $tooltip-padding-y $tooltip-padding-x;
+ color: $tooltip-color;
+ text-align: center;
+ background-color: $tooltip-bg;
+ @include border-radius($tooltip-border-radius);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_transitions.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_transitions.scss
new file mode 100644
index 0000000..c8d91e2
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_transitions.scss
@@ -0,0 +1,22 @@
+// stylelint-disable selector-no-qualifying-type
+
+.fade {
+ @include transition($transition-fade);
+
+ &:not(.show) {
+ opacity: 0;
+ }
+}
+
+.collapse {
+ &:not(.show) {
+ display: none;
+ }
+}
+
+.collapsing {
+ position: relative;
+ height: 0;
+ overflow: hidden;
+ @include transition($transition-collapse);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_type.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_type.scss
new file mode 100644
index 0000000..57d610f
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_type.scss
@@ -0,0 +1,125 @@
+// stylelint-disable declaration-no-important, selector-list-comma-newline-after
+
+//
+// Headings
+//
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+ margin-bottom: $headings-margin-bottom;
+ font-family: $headings-font-family;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ color: $headings-color;
+}
+
+h1, .h1 { font-size: $h1-font-size; }
+h2, .h2 { font-size: $h2-font-size; }
+h3, .h3 { font-size: $h3-font-size; }
+h4, .h4 { font-size: $h4-font-size; }
+h5, .h5 { font-size: $h5-font-size; }
+h6, .h6 { font-size: $h6-font-size; }
+
+.lead {
+ font-size: $lead-font-size;
+ font-weight: $lead-font-weight;
+}
+
+// Type display classes
+.display-1 {
+ font-size: $display1-size;
+ font-weight: $display1-weight;
+ line-height: $display-line-height;
+}
+.display-2 {
+ font-size: $display2-size;
+ font-weight: $display2-weight;
+ line-height: $display-line-height;
+}
+.display-3 {
+ font-size: $display3-size;
+ font-weight: $display3-weight;
+ line-height: $display-line-height;
+}
+.display-4 {
+ font-size: $display4-size;
+ font-weight: $display4-weight;
+ line-height: $display-line-height;
+}
+
+
+//
+// Horizontal rules
+//
+
+hr {
+ margin-top: $hr-margin-y;
+ margin-bottom: $hr-margin-y;
+ border: 0;
+ border-top: $hr-border-width solid $hr-border-color;
+}
+
+
+//
+// Emphasis
+//
+
+small,
+.small {
+ font-size: $small-font-size;
+ font-weight: $font-weight-normal;
+}
+
+mark,
+.mark {
+ padding: $mark-padding;
+ background-color: $mark-bg;
+}
+
+
+//
+// Lists
+//
+
+.list-unstyled {
+ @include list-unstyled;
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+ @include list-unstyled;
+}
+.list-inline-item {
+ display: inline-block;
+
+ &:not(:last-child) {
+ margin-right: $list-inline-padding;
+ }
+}
+
+
+//
+// Misc
+//
+
+// Builds on `abbr`
+.initialism {
+ font-size: 90%;
+ text-transform: uppercase;
+}
+
+// Blockquotes
+.blockquote {
+ margin-bottom: $spacer;
+ font-size: $blockquote-font-size;
+}
+
+.blockquote-footer {
+ display: block;
+ font-size: 80%; // back to default font-size
+ color: $blockquote-small-color;
+
+ &::before {
+ content: "\2014 \00A0"; // em dash, nbsp
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_utilities.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_utilities.scss
new file mode 100644
index 0000000..6c7a7cd
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_utilities.scss
@@ -0,0 +1,15 @@
+@import "utilities/align";
+@import "utilities/background";
+@import "utilities/borders";
+@import "utilities/clearfix";
+@import "utilities/display";
+@import "utilities/embed";
+@import "utilities/flex";
+@import "utilities/float";
+@import "utilities/position";
+@import "utilities/screenreaders";
+@import "utilities/shadows";
+@import "utilities/sizing";
+@import "utilities/spacing";
+@import "utilities/text";
+@import "utilities/visibility";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_variables.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_variables.scss
new file mode 100644
index 0000000..5cf118f
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/_variables.scss
@@ -0,0 +1,952 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+
+//
+// Color system
+//
+
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$grays: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$grays: map-merge(
+ (
+ "100": $gray-100,
+ "200": $gray-200,
+ "300": $gray-300,
+ "400": $gray-400,
+ "500": $gray-500,
+ "600": $gray-600,
+ "700": $gray-700,
+ "800": $gray-800,
+ "900": $gray-900
+ ),
+ $grays
+);
+
+
+$blue: #007bff !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #28a745 !default;
+$teal: #20c997 !default;
+$cyan: #17a2b8 !default;
+
+$colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$colors: map-merge(
+ (
+ "blue": $blue,
+ "indigo": $indigo,
+ "purple": $purple,
+ "pink": $pink,
+ "red": $red,
+ "orange": $orange,
+ "yellow": $yellow,
+ "green": $green,
+ "teal": $teal,
+ "cyan": $cyan,
+ "white": $white,
+ "gray": $gray-600,
+ "gray-dark": $gray-800
+ ),
+ $colors
+);
+
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-800 !default;
+
+$theme-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+ (
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "light": $light,
+ "dark": $dark
+ ),
+ $theme-colors
+);
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark: $gray-900 !default;
+$yiq-text-light: $white !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes: true !default;
+$enable-print-styles: true !default;
+
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$spacers: map-merge(
+ (
+ 0: 0,
+ 1: ($spacer * .25),
+ 2: ($spacer * .5),
+ 3: $spacer,
+ 4: ($spacer * 1.5),
+ 5: ($spacer * 3)
+ ),
+ $spacers
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$sizes: map-merge(
+ (
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%,
+ auto: auto
+ ),
+ $sizes
+);
+
+// Body
+//
+// Settings for the `` element.
+
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color: theme-color("primary") !default;
+$link-decoration: none !default;
+$link-hover-color: darken($link-color, 15%) !default;
+$link-hover-decoration: underline !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px
+) !default;
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints);
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px
+) !default;
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg: 1.5 !default;
+$line-height-sm: 1.5 !default;
+
+$border-width: 1px !default;
+$border-color: $gray-300 !default;
+
+$border-radius: .25rem !default;
+$border-radius-lg: .3rem !default;
+$border-radius-sm: .2rem !default;
+
+$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
+
+$component-active-color: $white !default;
+$component-active-bg: theme-color("primary") !default;
+
+$caret-width: .3em !default;
+
+$transition-base: all .2s ease-in-out !default;
+$transition-fade: opacity .15s linear !default;
+$transition-collapse: height .35s ease !default;
+
+
+// Fonts
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+// stylelint-enable value-keyword-case
+
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg: ($font-size-base * 1.25) !default;
+$font-size-sm: ($font-size-base * .875) !default;
+
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+
+$font-weight-base: $font-weight-normal !default;
+$line-height-base: 1.5 !default;
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+
+$headings-margin-bottom: ($spacer / 2) !default;
+$headings-font-family: inherit !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: inherit !default;
+
+$display1-size: 6rem !default;
+$display2-size: 5.5rem !default;
+$display3-size: 4.5rem !default;
+$display4-size: 3.5rem !default;
+
+$display1-weight: 300 !default;
+$display2-weight: 300 !default;
+$display3-weight: 300 !default;
+$display4-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+
+$lead-font-size: ($font-size-base * 1.25) !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: 80% !default;
+
+$text-muted: $gray-600 !default;
+
+$blockquote-small-color: $gray-600 !default;
+$blockquote-font-size: ($font-size-base * 1.25) !default;
+
+$hr-border-color: rgba($black, .1) !default;
+$hr-border-width: $border-width !default;
+
+$mark-padding: .2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;
+$nested-kbd-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: .5rem !default;
+
+$mark-bg: #fcf8e3 !default;
+
+$hr-margin-y: $spacer !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding: .75rem !default;
+$table-cell-padding-sm: .3rem !default;
+
+$table-bg: transparent !default;
+$table-accent-bg: rgba($black, .05) !default;
+$table-hover-bg: rgba($black, .075) !default;
+$table-active-bg: $table-hover-bg !default;
+
+$table-border-width: $border-width !default;
+$table-border-color: $gray-300 !default;
+
+$table-head-bg: $gray-200 !default;
+$table-head-color: $gray-700 !default;
+
+$table-dark-bg: $gray-900 !default;
+$table-dark-accent-bg: rgba($white, .05) !default;
+$table-dark-hover-bg: rgba($white, .075) !default;
+$table-dark-border-color: lighten($gray-900, 7.5%) !default;
+$table-dark-color: $body-bg !default;
+
+$table-striped-order: odd !default;
+
+$table-caption-color: $text-muted !default;
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y: .375rem !default;
+$input-btn-padding-x: .75rem !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: .2rem !default;
+$input-btn-focus-color: rgba($component-active-bg, .25) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm: .25rem !default;
+$input-btn-padding-x-sm: .5rem !default;
+$input-btn-line-height-sm: $line-height-sm !default;
+
+$input-btn-padding-y-lg: .5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-line-height-lg: $line-height-lg !default;
+
+$input-btn-border-width: $border-width !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-line-height: $input-btn-line-height !default;
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-line-height-sm: $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-line-height-lg: $input-btn-line-height-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: .65 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
+
+$btn-link-disabled-color: $gray-600 !default;
+
+$btn-block-spacing-y: .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+
+$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+
+// Forms
+
+$label-margin-bottom: .5rem !default;
+
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-line-height-sm: $input-btn-line-height-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-line-height-lg: $input-btn-line-height-lg !default;
+
+$input-bg: $white !default;
+$input-disabled-bg: $gray-200 !default;
+
+$input-color: $gray-700 !default;
+$input-border-color: $gray-400 !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-lg: $border-radius-lg !default;
+$input-border-radius-sm: $border-radius-sm !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: lighten($component-active-bg, 25%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: $gray-600 !default;
+$input-plaintext-color: $body-color !default;
+
+$input-height-border: $input-border-width * 2 !default;
+
+$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
+$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
+
+$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
+$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+
+$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
+$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+
+$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-text-margin-top: .25rem !default;
+
+$form-check-input-gutter: 1.25rem !default;
+$form-check-input-margin-y: .3rem !default;
+$form-check-input-margin-x: .25rem !default;
+
+$form-check-inline-margin-x: .75rem !default;
+$form-check-inline-input-margin-x: .3125rem !default;
+
+$form-group-margin-bottom: 1rem !default;
+
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: $gray-200 !default;
+$input-group-addon-border-color: $input-border-color !default;
+
+$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$custom-control-gutter: 1.5rem !default;
+$custom-control-spacer-x: 1rem !default;
+
+$custom-control-indicator-size: 1rem !default;
+$custom-control-indicator-bg: $gray-300 !default;
+$custom-control-indicator-bg-size: 50% 50% !default;
+$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
+
+$custom-control-indicator-disabled-bg: $gray-200 !default;
+$custom-control-label-disabled-color: $gray-600 !default;
+
+$custom-control-indicator-checked-color: $component-active-color !default;
+$custom-control-indicator-checked-bg: $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
+$custom-control-indicator-checked-box-shadow: none !default;
+
+$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+
+$custom-control-indicator-active-color: $component-active-color !default;
+$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
+$custom-control-indicator-active-box-shadow: none !default;
+
+$custom-checkbox-indicator-border-radius: $border-radius !default;
+$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
+$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
+
+$custom-radio-indicator-border-radius: 50% !default;
+$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$custom-select-padding-y: .375rem !default;
+$custom-select-padding-x: .75rem !default;
+$custom-select-height: $input-height !default;
+$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-line-height: $input-btn-line-height !default;
+$custom-select-color: $input-color !default;
+$custom-select-disabled-color: $gray-600 !default;
+$custom-select-bg: $input-bg !default;
+$custom-select-disabled-bg: $gray-200 !default;
+$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
+$custom-select-indicator-color: $gray-800 !default;
+$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-select-border-width: $input-btn-border-width !default;
+$custom-select-border-color: $input-border-color !default;
+$custom-select-border-radius: $border-radius !default;
+$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;
+
+$custom-select-focus-border-color: $input-focus-border-color !default;
+$custom-select-focus-width: $input-btn-focus-width !default;
+$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default;
+
+$custom-select-font-size-sm: 75% !default;
+$custom-select-height-sm: $input-height-sm !default;
+
+$custom-select-font-size-lg: 125% !default;
+$custom-select-height-lg: $input-height-lg !default;
+
+$custom-range-track-width: 100% !default;
+$custom-range-track-height: .5rem !default;
+$custom-range-track-cursor: pointer !default;
+$custom-range-track-bg: $gray-300 !default;
+$custom-range-track-border-radius: 1rem !default;
+$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
+
+$custom-range-thumb-width: 1rem !default;
+$custom-range-thumb-height: $custom-range-thumb-width !default;
+$custom-range-thumb-bg: $component-active-bg !default;
+$custom-range-thumb-border: 0 !default;
+$custom-range-thumb-border-radius: 1rem !default;
+$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
+$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+$custom-range-thumb-focus-box-shadow-width: $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge
+$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
+
+$custom-file-height: $input-height !default;
+$custom-file-height-inner: $input-height-inner !default;
+$custom-file-focus-border-color: $input-focus-border-color !default;
+$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$custom-file-disabled-bg: $input-disabled-bg !default;
+
+$custom-file-padding-y: $input-btn-padding-y !default;
+$custom-file-padding-x: $input-btn-padding-x !default;
+$custom-file-line-height: $input-btn-line-height !default;
+$custom-file-color: $input-color !default;
+$custom-file-bg: $input-bg !default;
+$custom-file-border-width: $input-btn-border-width !default;
+$custom-file-border-color: $input-border-color !default;
+$custom-file-border-radius: $input-border-radius !default;
+$custom-file-box-shadow: $input-box-shadow !default;
+$custom-file-button-color: $custom-file-color !default;
+$custom-file-button-bg: $input-group-addon-bg !default;
+$custom-file-text: (
+ en: "Browse"
+) !default;
+
+
+// Form validation
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $small-font-size !default;
+$form-feedback-valid-color: theme-color("success") !default;
+$form-feedback-invalid-color: theme-color("danger") !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-y: .5rem !default;
+$dropdown-spacer: .125rem !default;
+$dropdown-bg: $white !default;
+$dropdown-border-color: rgba($black, .15) !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-divider-bg: $gray-200 !default;
+$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
+
+$dropdown-link-color: $gray-900 !default;
+$dropdown-link-hover-color: darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg: $gray-100 !default;
+
+$dropdown-link-active-color: $component-active-color !default;
+$dropdown-link-active-bg: $component-active-bg !default;
+
+$dropdown-link-disabled-color: $gray-600 !default;
+
+$dropdown-item-padding-y: .25rem !default;
+$dropdown-item-padding-x: 1.5rem !default;
+
+$dropdown-header-color: $gray-600 !default;
+
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-modal-backdrop: 1040 !default;
+$zindex-modal: 1050 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+
+// Navs
+
+$nav-link-padding-y: .5rem !default;
+$nav-link-padding-x: 1rem !default;
+$nav-link-disabled-color: $gray-600 !default;
+
+$nav-tabs-border-color: $gray-300 !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-border-radius: $border-radius !default;
+$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: $gray-700 !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius: $border-radius !default;
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
+
+$nav-divider-color: $gray-200 !default;
+$nav-divider-margin-y: ($spacer / 2) !default;
+
+// Navbar
+
+$navbar-padding-y: ($spacer / 2) !default;
+$navbar-padding-x: $spacer !default;
+
+$navbar-nav-link-padding-x: .5rem !default;
+
+$navbar-brand-font-size: $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+
+$navbar-toggler-padding-y: .25rem !default;
+$navbar-toggler-padding-x: .75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+
+$navbar-dark-color: rgba($white, .5) !default;
+$navbar-dark-hover-color: rgba($white, .75) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-disabled-color: rgba($white, .25) !default;
+$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-dark-toggler-border-color: rgba($white, .1) !default;
+
+$navbar-light-color: rgba($black, .5) !default;
+$navbar-light-hover-color: rgba($black, .7) !default;
+$navbar-light-active-color: rgba($black, .9) !default;
+$navbar-light-disabled-color: rgba($black, .3) !default;
+$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-light-toggler-border-color: rgba($black, .1) !default;
+
+// Pagination
+
+$pagination-padding-y: .5rem !default;
+$pagination-padding-x: .75rem !default;
+$pagination-padding-y-sm: .25rem !default;
+$pagination-padding-x-sm: .5rem !default;
+$pagination-padding-y-lg: .75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+$pagination-line-height: 1.25 !default;
+
+$pagination-color: $link-color !default;
+$pagination-bg: $white !default;
+$pagination-border-width: $border-width !default;
+$pagination-border-color: $gray-300 !default;
+
+$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-200 !default;
+$pagination-hover-border-color: $gray-300 !default;
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $pagination-active-bg !default;
+
+$pagination-disabled-color: $gray-600 !default;
+$pagination-disabled-bg: $white !default;
+$pagination-disabled-border-color: $gray-300 !default;
+
+
+// Jumbotron
+
+$jumbotron-padding: 2rem !default;
+$jumbotron-bg: $gray-200 !default;
+
+
+// Cards
+
+$card-spacer-y: .75rem !default;
+$card-spacer-x: 1.25rem !default;
+$card-border-width: $border-width !default;
+$card-border-radius: $border-radius !default;
+$card-border-color: rgba($black, .125) !default;
+$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-bg: rgba($black, .03) !default;
+$card-bg: $white !default;
+
+$card-img-overlay-padding: 1.25rem !default;
+
+$card-group-margin: ($grid-gutter-width / 2) !default;
+$card-deck-margin: $card-group-margin !default;
+
+$card-columns-count: 3 !default;
+$card-columns-gap: 1.25rem !default;
+$card-columns-margin: $card-spacer-y !default;
+
+
+// Tooltips
+
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $white !default;
+$tooltip-bg: $black !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity: .9 !default;
+$tooltip-padding-y: .25rem !default;
+$tooltip-padding-x: .5rem !default;
+$tooltip-margin: 0 !default;
+
+$tooltip-arrow-width: .8rem !default;
+$tooltip-arrow-height: .4rem !default;
+$tooltip-arrow-color: $tooltip-bg !default;
+
+
+// Popovers
+
+$popover-font-size: $font-size-sm !default;
+$popover-bg: $white !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: rgba($black, .2) !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
+
+$popover-header-bg: darken($popover-bg, 3%) !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: .5rem !default;
+$popover-header-padding-x: .75rem !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $popover-header-padding-y !default;
+$popover-body-padding-x: $popover-header-padding-x !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: .5rem !default;
+$popover-arrow-color: $popover-bg !default;
+
+$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
+
+
+// Badges
+
+$badge-font-size: 75% !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-padding-y: .25em !default;
+$badge-padding-x: .4em !default;
+$badge-border-radius: $border-radius !default;
+
+$badge-pill-padding-x: .6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius: 10rem !default;
+
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding: 1rem !default;
+
+$modal-dialog-margin: .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-bg: $white !default;
+$modal-content-border-color: rgba($black, .2) !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
+$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: .5 !default;
+$modal-header-border-color: $gray-200 !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+$modal-header-padding: 1rem !default;
+
+$modal-lg: 800px !default;
+$modal-md: 500px !default;
+$modal-sm: 300px !default;
+
+$modal-transition: transform .3s ease-out !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y: .75rem !default;
+$alert-padding-x: 1.25rem !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: $border-radius !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: $border-width !default;
+
+$alert-bg-level: -10 !default;
+$alert-border-level: -9 !default;
+$alert-color-level: 6 !default;
+
+
+// Progress bars
+
+$progress-height: 1rem !default;
+$progress-font-size: ($font-size-base * .75) !default;
+$progress-bg: $gray-200 !default;
+$progress-border-radius: $border-radius !default;
+$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: theme-color("primary") !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width .6s ease !default;
+
+// List group
+
+$list-group-bg: $white !default;
+$list-group-border-color: rgba($black, .125) !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-item-padding-y: .75rem !default;
+$list-group-item-padding-x: 1.25rem !default;
+
+$list-group-hover-bg: $gray-100 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: $gray-700 !default;
+$list-group-action-hover-color: $list-group-action-color !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: $gray-200 !default;
+
+
+// Image thumbnails
+
+$thumbnail-padding: .25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $gray-300 !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
+
+
+// Figures
+
+$figure-caption-font-size: 90% !default;
+$figure-caption-color: $gray-600 !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-y: .75rem !default;
+$breadcrumb-padding-x: 1rem !default;
+$breadcrumb-item-padding: .5rem !default;
+
+$breadcrumb-margin-bottom: 1rem !default;
+
+$breadcrumb-bg: $gray-200 !default;
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-active-color: $gray-600 !default;
+$breadcrumb-divider: quote("/") !default;
+
+$breadcrumb-border-radius: $border-radius !default;
+
+
+// Carousel
+
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-active-bg: $white !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+
+$carousel-control-icon-width: 20px !default;
+
+$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+
+
+// Close
+
+$close-font-size: $font-size-base * 1.5 !default;
+$close-font-weight: $font-weight-bold !default;
+$close-color: $black !default;
+$close-text-shadow: 0 1px 0 $white !default;
+
+// Code
+
+$code-font-size: 87.5% !default;
+$code-color: $pink !default;
+
+$kbd-padding-y: .2rem !default;
+$kbd-padding-x: .4rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: $white !default;
+$kbd-bg: $gray-900 !default;
+
+$pre-color: $gray-900 !default;
+$pre-scrollable-max-height: 340px !default;
+
+
+// Printing
+$print-page-size: a3 !default;
+$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_alert.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_alert.scss
new file mode 100644
index 0000000..db5a7eb
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_alert.scss
@@ -0,0 +1,13 @@
+@mixin alert-variant($background, $border, $color) {
+ color: $color;
+ @include gradient-bg($background);
+ border-color: $border;
+
+ hr {
+ border-top-color: darken($border, 5%);
+ }
+
+ .alert-link {
+ color: darken($color, 10%);
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_background-variant.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_background-variant.scss
new file mode 100644
index 0000000..494439d
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_background-variant.scss
@@ -0,0 +1,21 @@
+// stylelint-disable declaration-no-important
+
+// Contextual backgrounds
+
+@mixin bg-variant($parent, $color) {
+ #{$parent} {
+ background-color: $color !important;
+ }
+ a#{$parent},
+ button#{$parent} {
+ @include hover-focus {
+ background-color: darken($color, 10%) !important;
+ }
+ }
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+ #{$parent} {
+ background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_badge.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_badge.scss
new file mode 100644
index 0000000..eeca0b4
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_badge.scss
@@ -0,0 +1,12 @@
+@mixin badge-variant($bg) {
+ color: color-yiq($bg);
+ background-color: $bg;
+
+ &[href] {
+ @include hover-focus {
+ color: color-yiq($bg);
+ text-decoration: none;
+ background-color: darken($bg, 10%);
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_border-radius.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_border-radius.scss
new file mode 100644
index 0000000..2024feb
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_border-radius.scss
@@ -0,0 +1,35 @@
+// Single side border-radius
+
+@mixin border-radius($radius: $border-radius) {
+ @if $enable-rounded {
+ border-radius: $radius;
+ }
+}
+
+@mixin border-top-radius($radius) {
+ @if $enable-rounded {
+ border-top-left-radius: $radius;
+ border-top-right-radius: $radius;
+ }
+}
+
+@mixin border-right-radius($radius) {
+ @if $enable-rounded {
+ border-top-right-radius: $radius;
+ border-bottom-right-radius: $radius;
+ }
+}
+
+@mixin border-bottom-radius($radius) {
+ @if $enable-rounded {
+ border-bottom-right-radius: $radius;
+ border-bottom-left-radius: $radius;
+ }
+}
+
+@mixin border-left-radius($radius) {
+ @if $enable-rounded {
+ border-top-left-radius: $radius;
+ border-bottom-left-radius: $radius;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_box-shadow.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_box-shadow.scss
new file mode 100644
index 0000000..b2410e5
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_box-shadow.scss
@@ -0,0 +1,5 @@
+@mixin box-shadow($shadow...) {
+ @if $enable-shadows {
+ box-shadow: $shadow;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_breakpoints.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_breakpoints.scss
new file mode 100644
index 0000000..59f25a2
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_breakpoints.scss
@@ -0,0 +1,123 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+// >> breakpoint-next(sm)
+// md
+// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// md
+// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+// md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+ $n: index($breakpoint-names, $name);
+ @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// 576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+ $min: map-get($breakpoints, $name);
+ @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// 767.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+ $next: breakpoint-next($name, $breakpoints);
+ @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//
+// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// "" (Returns a blank string)
+// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+ @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+ $min: breakpoint-min($name, $breakpoints);
+ @if $min {
+ @media (min-width: $min) {
+ @content;
+ }
+ } @else {
+ @content;
+ }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+ $max: breakpoint-max($name, $breakpoints);
+ @if $max {
+ @media (max-width: $max) {
+ @content;
+ }
+ } @else {
+ @content;
+ }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+ $min: breakpoint-min($lower, $breakpoints);
+ $max: breakpoint-max($upper, $breakpoints);
+
+ @if $min != null and $max != null {
+ @media (min-width: $min) and (max-width: $max) {
+ @content;
+ }
+ } @else if $max == null {
+ @include media-breakpoint-up($lower, $breakpoints) {
+ @content;
+ }
+ } @else if $min == null {
+ @include media-breakpoint-down($upper, $breakpoints) {
+ @content;
+ }
+ }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+ $min: breakpoint-min($name, $breakpoints);
+ $max: breakpoint-max($name, $breakpoints);
+
+ @if $min != null and $max != null {
+ @media (min-width: $min) and (max-width: $max) {
+ @content;
+ }
+ } @else if $max == null {
+ @include media-breakpoint-up($name, $breakpoints) {
+ @content;
+ }
+ } @else if $min == null {
+ @include media-breakpoint-down($name, $breakpoints) {
+ @content;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_buttons.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_buttons.scss
new file mode 100644
index 0000000..06ad677
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_buttons.scss
@@ -0,0 +1,109 @@
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@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%)) {
+ color: color-yiq($background);
+ @include gradient-bg($background);
+ border-color: $border;
+ @include box-shadow($btn-box-shadow);
+
+ @include hover {
+ color: color-yiq($hover-background);
+ @include gradient-bg($hover-background);
+ border-color: $hover-border;
+ }
+
+ &:focus,
+ &.focus {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+ } @else {
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+ }
+ }
+
+ // Disabled comes first so active can properly restyle
+ &.disabled,
+ &:disabled {
+ color: color-yiq($background);
+ background-color: $background;
+ border-color: $border;
+ }
+
+ &:not(:disabled):not(.disabled):active,
+ &:not(:disabled):not(.disabled).active,
+ .show > &.dropdown-toggle {
+ color: color-yiq($active-background);
+ background-color: $active-background;
+ @if $enable-gradients {
+ background-image: none; // Remove the gradient for the pressed/active state
+ }
+ border-color: $active-border;
+
+ &:focus {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+ } @else {
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+ }
+ }
+ }
+}
+
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+ color: $color;
+ background-color: transparent;
+ background-image: none;
+ border-color: $color;
+
+ &:hover {
+ color: $color-hover;
+ background-color: $active-background;
+ border-color: $active-border;
+ }
+
+ &:focus,
+ &.focus {
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+ }
+
+ &.disabled,
+ &:disabled {
+ color: $color;
+ background-color: transparent;
+ }
+
+ &:not(:disabled):not(.disabled):active,
+ &:not(:disabled):not(.disabled).active,
+ .show > &.dropdown-toggle {
+ color: color-yiq($active-background);
+ background-color: $active-background;
+ border-color: $active-border;
+
+ &:focus {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows and $btn-active-box-shadow != none {
+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+ } @else {
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+ }
+ }
+ }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+ padding: $padding-y $padding-x;
+ font-size: $font-size;
+ line-height: $line-height;
+ // Manually declare to provide an override to the browser default
+ @if $enable-rounded {
+ border-radius: $border-radius;
+ } @else {
+ border-radius: 0;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_caret.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_caret.scss
new file mode 100644
index 0000000..82aea42
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_caret.scss
@@ -0,0 +1,66 @@
+@mixin caret-down {
+ border-top: $caret-width solid;
+ border-right: $caret-width solid transparent;
+ border-bottom: 0;
+ border-left: $caret-width solid transparent;
+}
+
+@mixin caret-up {
+ border-top: 0;
+ border-right: $caret-width solid transparent;
+ border-bottom: $caret-width solid;
+ border-left: $caret-width solid transparent;
+}
+
+@mixin caret-right {
+ border-top: $caret-width solid transparent;
+ border-right: 0;
+ border-bottom: $caret-width solid transparent;
+ border-left: $caret-width solid;
+}
+
+@mixin caret-left {
+ border-top: $caret-width solid transparent;
+ border-right: $caret-width solid;
+ border-bottom: $caret-width solid transparent;
+}
+
+@mixin caret($direction: down) {
+ @if $enable-caret {
+ &::after {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-left: $caret-width * .85;
+ vertical-align: $caret-width * .85;
+ content: "";
+ @if $direction == down {
+ @include caret-down;
+ } @else if $direction == up {
+ @include caret-up;
+ } @else if $direction == right {
+ @include caret-right;
+ }
+ }
+
+ @if $direction == left {
+ &::after {
+ display: none;
+ }
+
+ &::before {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-right: $caret-width * .85;
+ vertical-align: $caret-width * .85;
+ content: "";
+ @include caret-left;
+ }
+ }
+
+ &:empty::after {
+ margin-left: 0;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_clearfix.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_clearfix.scss
new file mode 100644
index 0000000..11a977b
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_clearfix.scss
@@ -0,0 +1,7 @@
+@mixin clearfix() {
+ &::after {
+ display: block;
+ clear: both;
+ content: "";
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_float.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_float.scss
new file mode 100644
index 0000000..48fa8b6
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_float.scss
@@ -0,0 +1,11 @@
+// stylelint-disable declaration-no-important
+
+@mixin float-left {
+ float: left !important;
+}
+@mixin float-right {
+ float: right !important;
+}
+@mixin float-none {
+ float: none !important;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_forms.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_forms.scss
new file mode 100644
index 0000000..3a61878
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_forms.scss
@@ -0,0 +1,147 @@
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `$input-focus-border-color` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin form-control-focus() {
+ &:focus {
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
+ outline: 0;
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: $input-box-shadow, $input-focus-box-shadow;
+ } @else {
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+}
+
+
+@mixin form-validation-state($state, $color) {
+ .#{$state}-feedback {
+ display: none;
+ width: 100%;
+ margin-top: $form-feedback-margin-top;
+ font-size: $form-feedback-font-size;
+ color: $color;
+ }
+
+ .#{$state}-tooltip {
+ position: absolute;
+ top: 100%;
+ z-index: 5;
+ display: none;
+ max-width: 100%; // Contain to parent when possible
+ padding: $tooltip-padding-y $tooltip-padding-x;
+ margin-top: .1rem;
+ font-size: $tooltip-font-size;
+ line-height: $line-height-base;
+ color: color-yiq($color);
+ background-color: rgba($color, $tooltip-opacity);
+ @include border-radius($tooltip-border-radius);
+ }
+
+ .form-control,
+ .custom-select {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ border-color: $color;
+
+ &:focus {
+ border-color: $color;
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ .form-control-file {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ .form-check-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .form-check-label {
+ color: $color;
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ .custom-control-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .custom-control-label {
+ color: $color;
+
+ &::before {
+ background-color: lighten($color, 25%);
+ }
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+
+ &:checked {
+ ~ .custom-control-label::before {
+ @include gradient-bg(lighten($color, 10%));
+ }
+ }
+
+ &:focus {
+ ~ .custom-control-label::before {
+ box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
+ }
+ }
+ }
+ }
+
+ // custom file
+ .custom-file-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .custom-file-label {
+ border-color: $color;
+
+ &::after { border-color: inherit; }
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+
+ &:focus {
+ ~ .custom-file-label {
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ }
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_gradients.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_gradients.scss
new file mode 100644
index 0000000..88c4d64
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_gradients.scss
@@ -0,0 +1,45 @@
+// Gradients
+
+@mixin gradient-bg($color) {
+ @if $enable-gradients {
+ background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
+ } @else {
+ background-color: $color;
+ }
+}
+
+// Horizontal gradient, from left to right
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+ background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
+ background-repeat: repeat-x;
+}
+
+// Vertical gradient, from top to bottom
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+ background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
+ background-repeat: repeat-x;
+}
+
+@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
+ background-image: linear-gradient($deg, $start-color, $end-color);
+ background-repeat: repeat-x;
+}
+@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
+ background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+ background-repeat: no-repeat;
+}
+@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
+ background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+ background-repeat: no-repeat;
+}
+@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
+ background-image: radial-gradient(circle, $inner-color, $outer-color);
+ background-repeat: no-repeat;
+}
+@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
+ background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_grid-framework.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_grid-framework.scss
new file mode 100644
index 0000000..7b37f86
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_grid-framework.scss
@@ -0,0 +1,67 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+ // Common properties for all breakpoints
+ %grid-column {
+ position: relative;
+ width: 100%;
+ min-height: 1px; // Prevent columns from collapsing when empty
+ padding-right: ($gutter / 2);
+ padding-left: ($gutter / 2);
+ }
+
+ @each $breakpoint in map-keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+ // Allow columns to stretch full width below their breakpoints
+ @for $i from 1 through $columns {
+ .col#{$infix}-#{$i} {
+ @extend %grid-column;
+ }
+ }
+ .col#{$infix},
+ .col#{$infix}-auto {
+ @extend %grid-column;
+ }
+
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+ .col#{$infix} {
+ flex-basis: 0;
+ flex-grow: 1;
+ max-width: 100%;
+ }
+ .col#{$infix}-auto {
+ flex: 0 0 auto;
+ width: auto;
+ max-width: none; // Reset earlier grid tiers
+ }
+
+ @for $i from 1 through $columns {
+ .col#{$infix}-#{$i} {
+ @include make-col($i, $columns);
+ }
+ }
+
+ .order#{$infix}-first { order: -1; }
+
+ .order#{$infix}-last { order: $columns + 1; }
+
+ @for $i from 0 through $columns {
+ .order#{$infix}-#{$i} { order: $i; }
+ }
+
+ // `$columns - 1` because offsetting by the width of an entire row isn't possible
+ @for $i from 0 through ($columns - 1) {
+ @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+ .offset#{$infix}-#{$i} {
+ @include make-col-offset($i, $columns);
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_grid.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_grid.scss
new file mode 100644
index 0000000..b75ebcb
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_grid.scss
@@ -0,0 +1,52 @@
+/// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+@mixin make-container() {
+ width: 100%;
+ padding-right: ($grid-gutter-width / 2);
+ padding-left: ($grid-gutter-width / 2);
+ margin-right: auto;
+ margin-left: auto;
+}
+
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+ @each $breakpoint, $container-max-width in $max-widths {
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ max-width: $container-max-width;
+ }
+ }
+}
+
+@mixin make-row() {
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: ($grid-gutter-width / -2);
+ margin-left: ($grid-gutter-width / -2);
+}
+
+@mixin make-col-ready() {
+ position: relative;
+ // Prevent columns from becoming too narrow when at smaller grid tiers by
+ // always setting `width: 100%;`. This works because we use `flex` values
+ // later on to override this initial width.
+ width: 100%;
+ min-height: 1px; // Prevent collapsing
+ padding-right: ($grid-gutter-width / 2);
+ padding-left: ($grid-gutter-width / 2);
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+ flex: 0 0 percentage($size / $columns);
+ // Add a `max-width` to ensure content within each column does not blow out
+ // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+ // do not appear to require this.
+ max-width: percentage($size / $columns);
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+ $num: $size / $columns;
+ margin-left: if($num == 0, 0, percentage($num));
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_hover.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_hover.scss
new file mode 100644
index 0000000..192f847
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_hover.scss
@@ -0,0 +1,37 @@
+// Hover mixin and `$enable-hover-media-query` are deprecated.
+//
+// Originally added during our alphas and maintained during betas, this mixin was
+// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
+// would persist after initial touch.
+//
+// For backward compatibility, we've kept these mixins and updated them to
+// always return their regular pseudo-classes instead of a shimmed media query.
+//
+// Issue: https://github.com/twbs/bootstrap/issues/25195
+
+@mixin hover {
+ &:hover { @content; }
+}
+
+@mixin hover-focus {
+ &:hover,
+ &:focus {
+ @content;
+ }
+}
+
+@mixin plain-hover-focus {
+ &,
+ &:hover,
+ &:focus {
+ @content;
+ }
+}
+
+@mixin hover-focus-active {
+ &:hover,
+ &:focus,
+ &:active {
+ @content;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_image.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_image.scss
new file mode 100644
index 0000000..0544f0d
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_image.scss
@@ -0,0 +1,36 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+@mixin img-fluid {
+ // Part 1: Set a maximum relative to the parent
+ max-width: 100%;
+ // Part 2: Override the height to auto, otherwise images will be stretched
+ // when setting a width and height attribute on the img element.
+ height: auto;
+}
+
+
+// Retina image
+//
+// Short retina mixin for setting background-image and -size.
+
+// stylelint-disable indentation, media-query-list-comma-newline-after
+@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
+ background-image: url($file-1x);
+
+ // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
+ // but doesn't convert dppx=>dpi.
+ // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
+ // Compatibility info: https://caniuse.com/#feat=css-media-resolution
+ @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
+ only screen and (min-resolution: 2dppx) { // Standardized
+ background-image: url($file-2x);
+ background-size: $width-1x $height-1x;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_list-group.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_list-group.scss
new file mode 100644
index 0000000..cd47a4e
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_list-group.scss
@@ -0,0 +1,21 @@
+// List Groups
+
+@mixin list-group-item-variant($state, $background, $color) {
+ .list-group-item-#{$state} {
+ color: $color;
+ background-color: $background;
+
+ &.list-group-item-action {
+ @include hover-focus {
+ color: $color;
+ background-color: darken($background, 5%);
+ }
+
+ &.active {
+ color: $white;
+ background-color: $color;
+ border-color: $color;
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_lists.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_lists.scss
new file mode 100644
index 0000000..2518562
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_lists.scss
@@ -0,0 +1,7 @@
+// Lists
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+@mixin list-unstyled {
+ padding-left: 0;
+ list-style: none;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_nav-divider.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_nav-divider.scss
new file mode 100644
index 0000000..4fb37b6
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_nav-divider.scss
@@ -0,0 +1,10 @@
+// Horizontal dividers
+//
+// Dividers (basically an hr) within dropdowns and nav lists
+
+@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
+ height: 0;
+ margin: $margin-y 0;
+ overflow: hidden;
+ border-top: 1px solid $color;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_pagination.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_pagination.scss
new file mode 100644
index 0000000..ff36eb6
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_pagination.scss
@@ -0,0 +1,22 @@
+// Pagination
+
+@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+ .page-link {
+ padding: $padding-y $padding-x;
+ font-size: $font-size;
+ line-height: $line-height;
+ }
+
+ .page-item {
+ &:first-child {
+ .page-link {
+ @include border-left-radius($border-radius);
+ }
+ }
+ &:last-child {
+ .page-link {
+ @include border-right-radius($border-radius);
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_reset-text.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_reset-text.scss
new file mode 100644
index 0000000..71edb00
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_reset-text.scss
@@ -0,0 +1,17 @@
+@mixin reset-text {
+ font-family: $font-family-base;
+ // We deliberately do NOT reset font-size or word-wrap.
+ font-style: normal;
+ font-weight: $font-weight-normal;
+ line-height: $line-height-base;
+ text-align: left; // Fallback for where `start` is not supported
+ text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: none;
+ letter-spacing: normal;
+ word-break: normal;
+ word-spacing: normal;
+ white-space: normal;
+ line-break: auto;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_resize.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_resize.scss
new file mode 100644
index 0000000..66f233a
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_resize.scss
@@ -0,0 +1,6 @@
+// Resize anything
+
+@mixin resizable($direction) {
+ overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+ resize: $direction; // Options: horizontal, vertical, both
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_screen-reader.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_screen-reader.scss
new file mode 100644
index 0000000..812591b
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_screen-reader.scss
@@ -0,0 +1,33 @@
+// Only display content to screen readers
+//
+// See: https://a11yproject.com/posts/how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+ &:active,
+ &:focus {
+ position: static;
+ width: auto;
+ height: auto;
+ overflow: visible;
+ clip: auto;
+ white-space: normal;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_size.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_size.scss
new file mode 100644
index 0000000..b9dd48e
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_size.scss
@@ -0,0 +1,6 @@
+// Sizing shortcuts
+
+@mixin size($width, $height: $width) {
+ width: $width;
+ height: $height;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_table-row.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_table-row.scss
new file mode 100644
index 0000000..84f1d30
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_table-row.scss
@@ -0,0 +1,30 @@
+// Tables
+
+@mixin table-row-variant($state, $background) {
+ // Exact selectors below required to override `.table-striped` and prevent
+ // inheritance to nested tables.
+ .table-#{$state} {
+ &,
+ > th,
+ > td {
+ background-color: $background;
+ }
+ }
+
+ // Hover states for `.table-hover`
+ // Note: this is not available for cells or rows within `thead` or `tfoot`.
+ .table-hover {
+ $hover-background: darken($background, 5%);
+
+ .table-#{$state} {
+ @include hover {
+ background-color: $hover-background;
+
+ > td,
+ > th {
+ background-color: $hover-background;
+ }
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_text-emphasis.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_text-emphasis.scss
new file mode 100644
index 0000000..58db3e0
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_text-emphasis.scss
@@ -0,0 +1,14 @@
+// stylelint-disable declaration-no-important
+
+// Typography
+
+@mixin text-emphasis-variant($parent, $color) {
+ #{$parent} {
+ color: $color !important;
+ }
+ a#{$parent} {
+ @include hover-focus {
+ color: darken($color, 10%) !important;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_text-hide.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_text-hide.scss
new file mode 100644
index 0000000..9ffab16
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_text-hide.scss
@@ -0,0 +1,13 @@
+// CSS image replacement
+@mixin text-hide($ignore-warning: false) {
+ // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+
+ @if ($ignore-warning != true) {
+ @warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.";
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_text-truncate.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_text-truncate.scss
new file mode 100644
index 0000000..3504bb1
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_text-truncate.scss
@@ -0,0 +1,8 @@
+// Text truncate
+// Requires inline-block or block for proper styling
+
+@mixin text-truncate() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_transition.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_transition.scss
new file mode 100644
index 0000000..f853821
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_transition.scss
@@ -0,0 +1,13 @@
+@mixin transition($transition...) {
+ @if $enable-transitions {
+ @if length($transition) == 0 {
+ transition: $transition-base;
+ } @else {
+ transition: $transition;
+ }
+ }
+
+ @media screen and (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_visibility.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_visibility.scss
new file mode 100644
index 0000000..fe523d0
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/mixins/_visibility.scss
@@ -0,0 +1,7 @@
+// stylelint-disable declaration-no-important
+
+// Visibility
+
+@mixin invisible($visibility) {
+ visibility: $visibility !important;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_align.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_align.scss
new file mode 100644
index 0000000..8b7df9f
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_align.scss
@@ -0,0 +1,8 @@
+// stylelint-disable declaration-no-important
+
+.align-baseline { vertical-align: baseline !important; } // Browser default
+.align-top { vertical-align: top !important; }
+.align-middle { vertical-align: middle !important; }
+.align-bottom { vertical-align: bottom !important; }
+.align-text-bottom { vertical-align: text-bottom !important; }
+.align-text-top { vertical-align: text-top !important; }
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_background.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_background.scss
new file mode 100644
index 0000000..1f18b2f
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_background.scss
@@ -0,0 +1,19 @@
+// stylelint-disable declaration-no-important
+
+@each $color, $value in $theme-colors {
+ @include bg-variant(".bg-#{$color}", $value);
+}
+
+@if $enable-gradients {
+ @each $color, $value in $theme-colors {
+ @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+ }
+}
+
+.bg-white {
+ background-color: $white !important;
+}
+
+.bg-transparent {
+ background-color: transparent !important;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_borders.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_borders.scss
new file mode 100644
index 0000000..b8832ef
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_borders.scss
@@ -0,0 +1,59 @@
+// stylelint-disable declaration-no-important
+
+//
+// Border
+//
+
+.border { border: $border-width solid $border-color !important; }
+.border-top { border-top: $border-width solid $border-color !important; }
+.border-right { border-right: $border-width solid $border-color !important; }
+.border-bottom { border-bottom: $border-width solid $border-color !important; }
+.border-left { border-left: $border-width solid $border-color !important; }
+
+.border-0 { border: 0 !important; }
+.border-top-0 { border-top: 0 !important; }
+.border-right-0 { border-right: 0 !important; }
+.border-bottom-0 { border-bottom: 0 !important; }
+.border-left-0 { border-left: 0 !important; }
+
+@each $color, $value in $theme-colors {
+ .border-#{$color} {
+ border-color: $value !important;
+ }
+}
+
+.border-white {
+ border-color: $white !important;
+}
+
+//
+// Border-radius
+//
+
+.rounded {
+ border-radius: $border-radius !important;
+}
+.rounded-top {
+ border-top-left-radius: $border-radius !important;
+ border-top-right-radius: $border-radius !important;
+}
+.rounded-right {
+ border-top-right-radius: $border-radius !important;
+ border-bottom-right-radius: $border-radius !important;
+}
+.rounded-bottom {
+ border-bottom-right-radius: $border-radius !important;
+ border-bottom-left-radius: $border-radius !important;
+}
+.rounded-left {
+ border-top-left-radius: $border-radius !important;
+ border-bottom-left-radius: $border-radius !important;
+}
+
+.rounded-circle {
+ border-radius: 50% !important;
+}
+
+.rounded-0 {
+ border-radius: 0 !important;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_clearfix.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_clearfix.scss
new file mode 100644
index 0000000..e92522a
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_clearfix.scss
@@ -0,0 +1,3 @@
+.clearfix {
+ @include clearfix();
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_display.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_display.scss
new file mode 100644
index 0000000..20aeeb5
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_display.scss
@@ -0,0 +1,38 @@
+// stylelint-disable declaration-no-important
+
+//
+// Utilities for common `display` values
+//
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .d#{$infix}-none { display: none !important; }
+ .d#{$infix}-inline { display: inline !important; }
+ .d#{$infix}-inline-block { display: inline-block !important; }
+ .d#{$infix}-block { display: block !important; }
+ .d#{$infix}-table { display: table !important; }
+ .d#{$infix}-table-row { display: table-row !important; }
+ .d#{$infix}-table-cell { display: table-cell !important; }
+ .d#{$infix}-flex { display: flex !important; }
+ .d#{$infix}-inline-flex { display: inline-flex !important; }
+ }
+}
+
+
+//
+// Utilities for toggling `display` in print
+//
+
+@media print {
+ .d-print-none { display: none !important; }
+ .d-print-inline { display: inline !important; }
+ .d-print-inline-block { display: inline-block !important; }
+ .d-print-block { display: block !important; }
+ .d-print-table { display: table !important; }
+ .d-print-table-row { display: table-row !important; }
+ .d-print-table-cell { display: table-cell !important; }
+ .d-print-flex { display: flex !important; }
+ .d-print-inline-flex { display: inline-flex !important; }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_embed.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_embed.scss
new file mode 100644
index 0000000..d3362b6
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_embed.scss
@@ -0,0 +1,52 @@
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.embed-responsive {
+ position: relative;
+ display: block;
+ width: 100%;
+ padding: 0;
+ overflow: hidden;
+
+ &::before {
+ display: block;
+ content: "";
+ }
+
+ .embed-responsive-item,
+ iframe,
+ embed,
+ object,
+ video {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ }
+}
+
+.embed-responsive-21by9 {
+ &::before {
+ padding-top: percentage(9 / 21);
+ }
+}
+
+.embed-responsive-16by9 {
+ &::before {
+ padding-top: percentage(9 / 16);
+ }
+}
+
+.embed-responsive-4by3 {
+ &::before {
+ padding-top: percentage(3 / 4);
+ }
+}
+
+.embed-responsive-1by1 {
+ &::before {
+ padding-top: percentage(1 / 1);
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_flex.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_flex.scss
new file mode 100644
index 0000000..3d4266e
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_flex.scss
@@ -0,0 +1,51 @@
+// stylelint-disable declaration-no-important
+
+// Flex variation
+//
+// Custom styles for additional flex alignment options.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .flex#{$infix}-row { flex-direction: row !important; }
+ .flex#{$infix}-column { flex-direction: column !important; }
+ .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
+ .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
+
+ .flex#{$infix}-wrap { flex-wrap: wrap !important; }
+ .flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
+ .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
+ .flex#{$infix}-fill { flex: 1 1 auto !important; }
+ .flex#{$infix}-grow-0 { flex-grow: 0 !important; }
+ .flex#{$infix}-grow-1 { flex-grow: 1 !important; }
+ .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; }
+ .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; }
+
+ .justify-content#{$infix}-start { justify-content: flex-start !important; }
+ .justify-content#{$infix}-end { justify-content: flex-end !important; }
+ .justify-content#{$infix}-center { justify-content: center !important; }
+ .justify-content#{$infix}-between { justify-content: space-between !important; }
+ .justify-content#{$infix}-around { justify-content: space-around !important; }
+
+ .align-items#{$infix}-start { align-items: flex-start !important; }
+ .align-items#{$infix}-end { align-items: flex-end !important; }
+ .align-items#{$infix}-center { align-items: center !important; }
+ .align-items#{$infix}-baseline { align-items: baseline !important; }
+ .align-items#{$infix}-stretch { align-items: stretch !important; }
+
+ .align-content#{$infix}-start { align-content: flex-start !important; }
+ .align-content#{$infix}-end { align-content: flex-end !important; }
+ .align-content#{$infix}-center { align-content: center !important; }
+ .align-content#{$infix}-between { align-content: space-between !important; }
+ .align-content#{$infix}-around { align-content: space-around !important; }
+ .align-content#{$infix}-stretch { align-content: stretch !important; }
+
+ .align-self#{$infix}-auto { align-self: auto !important; }
+ .align-self#{$infix}-start { align-self: flex-start !important; }
+ .align-self#{$infix}-end { align-self: flex-end !important; }
+ .align-self#{$infix}-center { align-self: center !important; }
+ .align-self#{$infix}-baseline { align-self: baseline !important; }
+ .align-self#{$infix}-stretch { align-self: stretch !important; }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_float.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_float.scss
new file mode 100644
index 0000000..01655e9
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_float.scss
@@ -0,0 +1,9 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .float#{$infix}-left { @include float-left; }
+ .float#{$infix}-right { @include float-right; }
+ .float#{$infix}-none { @include float-none; }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_position.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_position.scss
new file mode 100644
index 0000000..9ecdeeb
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_position.scss
@@ -0,0 +1,37 @@
+// stylelint-disable declaration-no-important
+
+// Common values
+
+// Sass list not in variables since it's not intended for customization.
+// stylelint-disable-next-line scss/dollar-variable-default
+$positions: static, relative, absolute, fixed, sticky;
+
+@each $position in $positions {
+ .position-#{$position} { position: $position !important; }
+}
+
+// Shorthand
+
+.fixed-top {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+}
+
+.sticky-top {
+ @supports (position: sticky) {
+ position: sticky;
+ top: 0;
+ z-index: $zindex-sticky;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_screenreaders.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_screenreaders.scss
new file mode 100644
index 0000000..9f26fde
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_screenreaders.scss
@@ -0,0 +1,11 @@
+//
+// Screenreaders
+//
+
+.sr-only {
+ @include sr-only();
+}
+
+.sr-only-focusable {
+ @include sr-only-focusable();
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_shadows.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_shadows.scss
new file mode 100644
index 0000000..f5d03fc
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_shadows.scss
@@ -0,0 +1,6 @@
+// stylelint-disable declaration-no-important
+
+.shadow-sm { box-shadow: $box-shadow-sm !important; }
+.shadow { box-shadow: $box-shadow !important; }
+.shadow-lg { box-shadow: $box-shadow-lg !important; }
+.shadow-none { box-shadow: none !important; }
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_sizing.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_sizing.scss
new file mode 100644
index 0000000..e95a4db
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_sizing.scss
@@ -0,0 +1,12 @@
+// stylelint-disable declaration-no-important
+
+// Width and height
+
+@each $prop, $abbrev in (width: w, height: h) {
+ @each $size, $length in $sizes {
+ .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
+ }
+}
+
+.mw-100 { max-width: 100% !important; }
+.mh-100 { max-height: 100% !important; }
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_spacing.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_spacing.scss
new file mode 100644
index 0000000..b2e2354
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_spacing.scss
@@ -0,0 +1,51 @@
+// stylelint-disable declaration-no-important
+
+// Margin and Padding
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @each $prop, $abbrev in (margin: m, padding: p) {
+ @each $size, $length in $spacers {
+
+ .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
+ .#{$abbrev}t#{$infix}-#{$size},
+ .#{$abbrev}y#{$infix}-#{$size} {
+ #{$prop}-top: $length !important;
+ }
+ .#{$abbrev}r#{$infix}-#{$size},
+ .#{$abbrev}x#{$infix}-#{$size} {
+ #{$prop}-right: $length !important;
+ }
+ .#{$abbrev}b#{$infix}-#{$size},
+ .#{$abbrev}y#{$infix}-#{$size} {
+ #{$prop}-bottom: $length !important;
+ }
+ .#{$abbrev}l#{$infix}-#{$size},
+ .#{$abbrev}x#{$infix}-#{$size} {
+ #{$prop}-left: $length !important;
+ }
+ }
+ }
+
+ // Some special margin utils
+ .m#{$infix}-auto { margin: auto !important; }
+ .mt#{$infix}-auto,
+ .my#{$infix}-auto {
+ margin-top: auto !important;
+ }
+ .mr#{$infix}-auto,
+ .mx#{$infix}-auto {
+ margin-right: auto !important;
+ }
+ .mb#{$infix}-auto,
+ .my#{$infix}-auto {
+ margin-bottom: auto !important;
+ }
+ .ml#{$infix}-auto,
+ .mx#{$infix}-auto {
+ margin-left: auto !important;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_text.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_text.scss
new file mode 100644
index 0000000..9d96c46
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_text.scss
@@ -0,0 +1,58 @@
+// stylelint-disable declaration-no-important
+
+//
+// Text
+//
+
+.text-monospace { font-family: $font-family-monospace; }
+
+// Alignment
+
+.text-justify { text-align: justify !important; }
+.text-nowrap { white-space: nowrap !important; }
+.text-truncate { @include text-truncate; }
+
+// Responsive alignment
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .text#{$infix}-left { text-align: left !important; }
+ .text#{$infix}-right { text-align: right !important; }
+ .text#{$infix}-center { text-align: center !important; }
+ }
+}
+
+// Transformation
+
+.text-lowercase { text-transform: lowercase !important; }
+.text-uppercase { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
+
+// Weight and italics
+
+.font-weight-light { font-weight: $font-weight-light !important; }
+.font-weight-normal { font-weight: $font-weight-normal !important; }
+.font-weight-bold { font-weight: $font-weight-bold !important; }
+.font-italic { font-style: italic !important; }
+
+// Contextual colors
+
+.text-white { color: $white !important; }
+
+@each $color, $value in $theme-colors {
+ @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+.text-body { color: $body-color !important; }
+.text-muted { color: $text-muted !important; }
+
+.text-black-50 { color: rgba($black, .5) !important; }
+.text-white-50 { color: rgba($white, .5) !important; }
+
+// Misc
+
+.text-hide {
+ @include text-hide($ignore-warning: true);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_visibility.scss b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_visibility.scss
new file mode 100644
index 0000000..823406d
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/bootstrap/utilities/_visibility.scss
@@ -0,0 +1,11 @@
+//
+// Visibility utilities
+//
+
+.visible {
+ @include invisible(visible);
+}
+
+.invisible {
+ @include invisible(hidden);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_alert.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_alert.scss
new file mode 100644
index 0000000..aa8ebe7
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_alert.scss
@@ -0,0 +1,6 @@
+//
+// Alert
+//
+
+@import "alerts/alert";
+@import "alerts/alert-dismissible";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_avatar.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_avatar.scss
new file mode 100644
index 0000000..cc02c16
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_avatar.scss
@@ -0,0 +1,6 @@
+//
+// Avatar
+//
+
+@import "avatars/avatar";
+@import "avatars/avatar-group";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_badge.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_badge.scss
new file mode 100644
index 0000000..98f02bb
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_badge.scss
@@ -0,0 +1,7 @@
+//
+// Badge
+//
+
+@import "badges/badge";
+@import "badges/badge-circle";
+@import "badges/badge-dot";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_buttons.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_buttons.scss
new file mode 100644
index 0000000..defba02
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_buttons.scss
@@ -0,0 +1,7 @@
+//
+// Button
+//
+
+@import "buttons/button";
+@import "buttons/button-icon";
+@import "buttons/button-brand";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_card.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_card.scss
new file mode 100644
index 0000000..5c3132c
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_card.scss
@@ -0,0 +1,8 @@
+//
+// Cards
+//
+
+@import "cards/card";
+@import "cards/card-profile";
+@import "cards/card-animations";
+@import "cards/card-stats";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_chart.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_chart.scss
new file mode 100644
index 0000000..3be1601
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_chart.scss
@@ -0,0 +1,5 @@
+//
+// Chart
+//
+
+@import "charts/chart";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_close.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_close.scss
new file mode 100644
index 0000000..294f71a
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_close.scss
@@ -0,0 +1,5 @@
+//
+// Close
+//
+
+@import "close/close"
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_components.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_components.scss
new file mode 100644
index 0000000..9b256ce
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_components.scss
@@ -0,0 +1,31 @@
+//
+// Components
+//
+
+@import "alert";
+@import "avatar";
+@import "badge";
+@import "buttons";
+@import "card";
+@import "chart";
+@import "close";
+@import "content";
+@import "custom-forms";
+@import "dropdown";
+@import "footer";
+@import "forms";
+@import "header";
+@import "icons";
+@import "input-group";
+@import "list-group";
+@import "map";
+@import "mask";
+@import "modal";
+@import "nav";
+@import "navbar";
+@import "pagination";
+@import "popover";
+@import "progress";
+@import "separator";
+@import "tables";
+@import "type";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_content.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_content.scss
new file mode 100644
index 0000000..d0e638b
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_content.scss
@@ -0,0 +1,47 @@
+.main-content {
+ position: relative;
+
+ // Navbar
+ .navbar-top {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ z-index: 1;
+ background-color: transparent;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+
+ // Container
+ .container-fluid {
+ @include media-breakpoint-up(md) {
+ padding-left: ($main-content-padding-x + $grid-gutter-width / 2) !important;
+ padding-right: ($main-content-padding-x + $grid-gutter-width / 2) !important;
+ }
+ }
+}
+
+
+// Offsets the main content depending on the sidebar positioning
+
+.navbar-vertical.navbar-expand {
+
+ @each $breakpoint,
+ $dimension in $grid-breakpoints {
+
+ &-#{$breakpoint} {
+
+ @include media-breakpoint-up(#{$breakpoint}) {
+
+ // Left
+ &.fixed-left + .main-content {
+ margin-left: $navbar-vertical-width;
+ } // Right
+ &.fixed-right + .main-content {
+ margin-right: $navbar-vertical-width;
+ }
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_custom-forms.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_custom-forms.scss
new file mode 100644
index 0000000..69ec60d
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_custom-forms.scss
@@ -0,0 +1,9 @@
+//
+// Custom form
+//
+
+@import "custom-forms/custom-form";
+@import "custom-forms/custom-control";
+@import "custom-forms/custom-checkbox";
+@import "custom-forms/custom-radio";
+@import "custom-forms/custom-toggle";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_dropdown.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_dropdown.scss
new file mode 100644
index 0000000..3504eec
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_dropdown.scss
@@ -0,0 +1,5 @@
+//
+// Dropdown
+//
+
+@import "dropdowns/dropdown";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_footer.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_footer.scss
new file mode 100644
index 0000000..47a03ef
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_footer.scss
@@ -0,0 +1,5 @@
+//
+// Footer
+//
+
+@import "footers/footer";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_forms.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_forms.scss
new file mode 100644
index 0000000..5d1f416
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_forms.scss
@@ -0,0 +1,7 @@
+//
+// Forms
+//
+
+@import "forms/form";
+@import "forms/form-validation";
+@import "forms/input-group";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_functions.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_functions.scss
new file mode 100644
index 0000000..1ed9880
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_functions.scss
@@ -0,0 +1,33 @@
+//
+// Functions
+//
+
+// Bootstrap default functions
+
+@import "../bootstrap/functions";
+
+
+// Retrieve color Sass maps
+
+@function section-color($key: "primary") {
+ @return map-get($section-colors, $key);
+}
+
+
+// Lines colors
+
+@function shapes-primary-color($key: "step-1-gradient-bg") {
+ @return map-get($shapes-primary-colors, $key);
+}
+
+@function shapes-default-color($key: "step-1-gradient-bg") {
+ @return map-get($shapes-default-colors, $key);
+}
+
+@function lines-light-color($key: "step-1-gradient-bg") {
+ @return map-get($shapes-light-colors, $key);
+}
+
+@function shapes-dark-color($key: "step-1-gradient-bg") {
+ @return map-get($shapes-dark-colors, $key);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_header.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_header.scss
new file mode 100644
index 0000000..ad37128
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_header.scss
@@ -0,0 +1,5 @@
+//
+// Header
+//
+
+@import "headers/header";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_icons.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_icons.scss
new file mode 100644
index 0000000..a407e6d
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_icons.scss
@@ -0,0 +1,6 @@
+//
+// Icon
+//
+
+@import "icons/icon";
+@import "icons/icon-shape";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_input-group.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_input-group.scss
new file mode 100644
index 0000000..91d97e5
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_input-group.scss
@@ -0,0 +1,5 @@
+//
+// Input group
+//
+
+@import "forms/input-group";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_list-group.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_list-group.scss
new file mode 100644
index 0000000..fcbc0f6
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_list-group.scss
@@ -0,0 +1,5 @@
+//
+// List group
+//
+
+@import "list-groups/list-group";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_map.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_map.scss
new file mode 100644
index 0000000..63581b4
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_map.scss
@@ -0,0 +1,5 @@
+//
+// Maps
+//
+
+@import "maps/map";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_mask.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_mask.scss
new file mode 100644
index 0000000..1eab5fe
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_mask.scss
@@ -0,0 +1,5 @@
+//
+// Mask
+//
+
+@import "masks/mask";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_mixins.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_mixins.scss
new file mode 100644
index 0000000..bae56dd
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_mixins.scss
@@ -0,0 +1,19 @@
+//
+// Mixins
+//
+
+// Bootstrap default mixins
+
+@import "../bootstrap/mixins";
+
+
+// Custom mixins
+
+@import "mixins/alert";
+@import "mixins/badge";
+@import "mixins/background-variant";
+@import "mixins/buttons";
+@import "mixins/forms";
+@import "mixins/icon";
+@import "mixins/modals";
+@import "mixins/popover";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_modal.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_modal.scss
new file mode 100644
index 0000000..2133607
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_modal.scss
@@ -0,0 +1,5 @@
+//
+// Modal
+//
+
+@import "modals/modal";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_nav.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_nav.scss
new file mode 100644
index 0000000..354789f
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_nav.scss
@@ -0,0 +1,7 @@
+//
+// Nav
+//
+
+
+@import "navs/nav";
+@import "navs/nav-pills";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_navbar.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_navbar.scss
new file mode 100644
index 0000000..264ad14
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_navbar.scss
@@ -0,0 +1,9 @@
+//
+// Navbar
+//
+
+@import "navbars/navbar";
+@import "navbars/navbar-vertical";
+@import "navbars/navbar-search";
+@import "navbars/navbar-dropdown";
+@import "navbars/navbar-collapse";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_pagination.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_pagination.scss
new file mode 100644
index 0000000..f95ad38
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_pagination.scss
@@ -0,0 +1,5 @@
+//
+// Pagination
+//
+
+@import "paginations/pagination";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_popover.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_popover.scss
new file mode 100644
index 0000000..2dca867
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_popover.scss
@@ -0,0 +1,6 @@
+//
+// Popover
+//
+
+
+@import "popovers/popover";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_progress.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_progress.scss
new file mode 100644
index 0000000..ccaac64
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_progress.scss
@@ -0,0 +1,5 @@
+//
+// Progress
+//
+
+@import "progresses/progress";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_reboot.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_reboot.scss
new file mode 100644
index 0000000..4a49a69
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_reboot.scss
@@ -0,0 +1,13 @@
+iframe {
+ border: 0;
+}
+
+figcaption,
+figure,
+main {
+ display: block;
+}
+
+main {
+ overflow: hidden;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_section.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_section.scss
new file mode 100644
index 0000000..db88d40
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_section.scss
@@ -0,0 +1,139 @@
+//
+// Sections
+//
+
+
+// Nucleo icons for presentation purpose
+
+.section-nucleo-icons {
+
+ --icon-size: 5rem;
+ --icon-sm-size: 3.75rem;
+ --gutter: 7rem;
+
+ .icons-container {
+ position: relative;
+ max-width: 100%;
+ height: 360px;
+ margin: 0 auto;
+ z-index: 1;
+
+ i {
+ position: absolute;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background: $white;
+ z-index: 1;
+ transform: translate(-50%, -50%);
+ @include box-shadow($box-shadow);
+ transition: all .2s cubic-bezier(.25,.65,.9,.75);
+
+ &.icon {
+ width: var(--icon-size);
+ height: var(--icon-size);
+ font-size: 1.7em;
+ }
+
+ &.icon-sm {
+ width: var(--icon-sm-size);
+ height: var(--icon-sm-size);
+ font-size: 1.5em;
+ }
+
+ &:nth-child(1) {
+ font-size: 42px;
+ color: theme-color("warning");
+ z-index: 2;
+ }
+ }
+
+ &:not(.on-screen) {
+ i {
+ transform: translate(-50%, -50%);
+ left: 50%;
+ top: 50%;
+
+ &:not(:nth-child(1)) {
+ opacity: 0;
+ }
+ }
+ }
+
+ &.on-screen {
+
+ i {
+ opacity: 1;
+
+ &:nth-child(1) {
+ left: 50%;
+ top: 50%;
+ font-size: 42px;
+ color: theme-color("warning");
+ }
+
+ &:nth-child(2) {
+ left: calc(50% + (var(--gutter) * 1.7));
+ top: 50%;
+ }
+
+ &:nth-child(3) {
+ left: calc(50% + var(--gutter));
+ top: calc(50% + var(--gutter));
+ }
+
+ &:nth-child(4) {
+ left: calc(50% + var(--gutter));
+ top: calc(50% - var(--gutter));
+ }
+
+ &:nth-child(5) {
+ left: calc(50% + (var(--gutter) * 4));
+ top: 50%;
+ }
+
+ &:nth-child(6) {
+ left: calc(50% + (var(--gutter) * 2.7));
+ top: calc(50% + (var(--gutter) * 1.5));
+ }
+
+ &:nth-child(7) {
+ left: calc(50% + (var(--gutter) * 2.7));
+ top: calc(50% - (var(--gutter) * 1.5));
+ }
+
+ &:nth-child(8) {
+ left: calc(50% - (var(--gutter) * 1.7));
+ top: 50%;
+ }
+
+ &:nth-child(9) {
+ left: calc(50% - var(--gutter));
+ top: calc(50% + var(--gutter));
+ }
+
+ &:nth-child(10) {
+ left: calc(50% - var(--gutter));
+ top: calc(50% - var(--gutter));
+ }
+
+ &:nth-child(11) {
+ left: calc(50% - (var(--gutter) * 4));
+ top: 50%;
+ }
+
+ &:nth-child(12) {
+ left: calc(50% - (var(--gutter) * 2.7));
+ top: calc(50% + (var(--gutter) * 1.5));
+ }
+
+ &:nth-child(13) {
+ left: calc(50% - (var(--gutter) * 2.7));
+ top: calc(50% - (var(--gutter) * 1.5));
+ }
+ }
+
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_separator.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_separator.scss
new file mode 100644
index 0000000..2d489db
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_separator.scss
@@ -0,0 +1,5 @@
+//
+// Separator
+//
+
+@import "separators/separator";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_tables.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_tables.scss
new file mode 100644
index 0000000..cd244ef
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_tables.scss
@@ -0,0 +1,5 @@
+//
+// Tables
+//
+
+@import "tables/table";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_type.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_type.scss
new file mode 100644
index 0000000..1988482
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_type.scss
@@ -0,0 +1,8 @@
+//
+// Typography
+//
+
+@import "type/type";
+@import "type/heading";
+@import "type/display";
+@import "type/article";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_utilities.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_utilities.scss
new file mode 100644
index 0000000..f1c9b9f
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_utilities.scss
@@ -0,0 +1,16 @@
+//
+// Utilities
+//
+
+@import "utilities/backgrounds";
+@import "utilities/floating";
+@import "utilities/helper";
+@import "utilities/image";
+@import "utilities/opacity";
+@import "utilities/overflow";
+@import "utilities/position";
+@import "utilities/sizing";
+@import "utilities/spacing";
+@import "utilities/shadows";
+@import "utilities/text";
+@import "utilities/transform";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_variables.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_variables.scss
new file mode 100644
index 0000000..ff7d133
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_variables.scss
@@ -0,0 +1,1009 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//
+// Variables
+//
+
+// Global settings
+
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: true !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-grid-classes: true !default;
+$enable-print-styles: true !default;
+
+
+// Color system
+
+$white: #fff !default;
+$gray-100: #f6f9fc !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #8898aa !default; // Line footer color
+$gray-700: #525f7f !default; // Line p color
+$gray-800: #32325d !default; // Line heading color
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$grays: () !default;
+$grays: map-merge((
+ "100": $gray-100,
+ "200": $gray-200,
+ "300": $gray-300,
+ "400": $gray-400,
+ "500": $gray-500,
+ "600": $gray-600,
+ "700": $gray-700,
+ "800": $gray-800,
+ "900": $gray-900
+), $grays);
+
+$blue: #5e72e4 !default;
+$indigo: #5603ad !default;
+$purple: #8965e0 !default;
+$pink: #f3a4b5 !default;
+$red: #f5365c !default;
+$orange: #fb6340 !default;
+$yellow: #ffd600 !default;
+$green: #2dce89 !default;
+$teal: #11cdef !default;
+$cyan: #2bffc6 !default;
+
+$colors: () !default;
+$colors: map-merge((
+ "blue": $blue,
+ "indigo": $indigo,
+ "purple": $purple,
+ "pink": $pink,
+ "red": $red,
+ "orange": $orange,
+ "yellow": $yellow,
+ "green": $green,
+ "teal": $teal,
+ "cyan": $cyan,
+ "white": $white,
+ "gray": $gray-600,
+ "light": $gray-400,
+ "lighter": $gray-200,
+ "gray-dark": $gray-800
+), $colors);
+
+$default: #172b4d !default;
+$primary: #5e72e4 !default;
+$secondary: #f7fafc !default;
+$success: $green !default;
+$info: $teal !default;
+$warning: $orange !default;
+$danger: $red !default;
+$light: $gray-500 !default;
+$dark: $gray-900 !default;
+$darker: darken($gray-900, 15%) !default;
+
+$facebook: #3b5999 !default;
+$twitter: #1da1f2 !default;
+$google-plus: #dd4b39 !default;
+$instagram: #e4405f !default;
+$pinterest: #bd081c !default;
+$youtube: #cd201f !default;
+$slack: #3aaf85 !default;
+$dribbble: #ea4c89 !default;
+$github: #222222 !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge((
+ "default": $default,
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "white": $white,
+ "neutral": $white,
+ "dark": $dark,
+ "darker": $darker
+), $theme-colors);
+
+$brand-colors: () !default;
+$brand-colors: map-merge((
+ "facebook": $facebook,
+ "twitter": $twitter,
+ "google-plus": $google-plus,
+ "instagram": $instagram,
+ "pinterest": $pinterest,
+ "youtube": $youtube,
+ "slack": $slack,
+ "dribbble": $dribbble,
+ "github": $github
+), $brand-colors);
+
+$shape-colors: () !default;
+$shape-colors: map-merge((
+ "default": #32325d,
+ "primary": #5533ff,
+ "secondary": #24b47e,
+ "neutral": #e9ecef,
+ "blue-gray": #b2cbe1,
+
+), $shape-colors);
+
+$shapes-primary-colors: () !default;
+$shapes-primary-colors: map-merge((
+ "step-1-gradient-bg": #281483,
+ "step-2-gradient-bg": #8f6ed5,
+ "step-3-gradient-bg": #d782d9,
+ "span-1-bg": #53f,
+ "span-2-bg": #4553ff,
+ "span-3-bg": #4f40ff,
+ "span-4-bg": #25ddf5,
+ "span-5-bg": #1fa2ff
+), $shapes-primary-colors);
+
+$shapes-default-colors: () !default;
+$shapes-default-colors: map-merge((
+ "step-1-gradient-bg": #7795f8,
+ "step-2-gradient-bg": #6772e5,
+ "step-3-gradient-bg": #555abf,
+ "span-1-bg": #7795f8,
+ "span-2-bg": #7b9aff,
+ "span-3-bg": #6f8ff8,
+ "span-4-bg": #76eea7,
+ "span-5-bg": #6adaff
+), $shapes-default-colors);
+
+$shapes-light-colors: () !default;
+$shapes-light-colors: map-merge((
+ "step-1-gradient-bg": #b2cbe1,
+ "step-2-gradient-bg": #f6f9fc,
+ "step-3-gradient-bg": #f6f9fc,
+ "span-1-bg": #b4cce1,
+ "span-2-bg": #c5dbef,
+ "span-3-bg": #b9d5ed,
+ "span-4-bg": #74e4a2,
+ "span-5-bg": #008169
+), $shapes-light-colors);
+
+$shapes-dark-colors: () !default;
+$shapes-dark-colors: map-merge((
+ "step-1-gradient-bg": #32325d,
+ "step-2-gradient-bg": #32325d,
+ "step-3-gradient-bg": #32325d,
+ "span-1-bg": #2e2e57,
+ "span-2-bg": #2b2b58,
+ "span-3-bg": #25254d,
+ "span-4-bg": #d782d9,
+ "span-5-bg": #008169
+), $shapes-dark-colors);
+
+
+// Translucent color variations
+$translucent-color-opacity: .6 !default;
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 200 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark: $gray-900 !default;
+$yiq-text-light: $white !default;
+
+// Action colors
+
+$star-rating-color: $gray-400 !default;
+$star-rating-color-active: $yellow !default;
+
+$favorite-color: $yellow !default;
+$like-color: $blue !default;
+$love-color: $red !default;
+
+
+// Body
+
+
+$body-bg: #f8f9fe !default;
+$body-color: $gray-700 !default;
+
+
+
+// Sections
+
+$section-colors: () !default;
+$section-colors: map-merge((
+ "primary": $body-bg,
+ "secondary": $secondary,
+ "light": $gray-400,
+ "dark": $dark,
+ "darker": $darker
+), $section-colors);
+
+// Links
+
+$link-color: $primary !default;
+$link-decoration: none !default;
+$link-hover-color: darken($link-color, 15%) !default;
+$link-hover-decoration: none !default;
+
+// Grid breakpoints
+
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px
+);
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints);
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+
+
+// Spacing
+
+$spacer: 1rem !default;
+$spacers: () !default;
+$spacers: map-merge((
+ -9: -($spacer * 10),
+ -8: -($spacer * 8),
+ -7: -($spacer * 6),
+ -6: -($spacer * 4.5),
+ -5: -($spacer * 3),
+ -4: -($spacer * 1.5),
+ -3: -$spacer,
+ -2: -($spacer * .5),
+ -1: -($spacer * .25),
+ 0: 0,
+ 1: ($spacer * .25),
+ 2: ($spacer * .5),
+ 3: $spacer,
+ 4: ($spacer * 1.5),
+ 5: ($spacer * 3),
+ 6: ($spacer * 4.5),
+ 7: ($spacer * 6),
+ 8: ($spacer * 8),
+ 9: ($spacer * 10)
+), $spacers);
+
+
+// This variable affects the `.h-*` and `.w-*` classes.
+
+$sizes: () !default;
+$sizes: map-merge((
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%
+), $sizes);
+
+// Components
+
+$shape-height-xl: 1.5 !default;
+$shape-height-lg: 1.5 !default;
+$shape-height-sm: 1.5 !default;
+
+$border-width: 1px !default;
+$border-color: $gray-200 !default;
+
+$border-radius: .375rem !default;
+$border-radius-xl: .5rem !default;
+$border-radius-lg: .4375rem !default;
+$border-radius-sm: .25rem !default;
+
+$box-shadow-sm: 0 0 .5rem rgba($gray-600, .075) !default;
+$box-shadow: 0 0 2rem 0 rgba($gray-600, .15) !default;
+$box-shadow-lg: 0 0 3rem rgba($gray-600, .175) !default;
+
+$component-active-color: $white !default;
+$component-active-bg: theme-color("primary") !default;
+$component-active-border-color: theme-color("primary") !default;
+
+$component-hover-color: $gray-300 !default;
+$component-hover-bg: $gray-300 !default;
+$component-hover-border-color: $gray-300 !default;
+
+$caret-width: .3em !default;
+
+$transition-base: all .15s ease !default;
+$transition-fade: opacity .15s linear !default;
+$transition-collapse: height .35s ease !default;
+
+
+// Fonts
+
+$font-family-sans-serif: Open Sans, sans-serif !default;
+$font-family-base: $font-family-sans-serif !default;
+
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-xl: ($font-size-base * 1.5);
+$font-size-lg: ($font-size-base * 1.25);
+$font-size-sm: ($font-size-base * .875);
+$font-size-xs: ($font-size-base * .75);
+
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 600 !default;
+$font-weight-extra-bold: 700 !default;
+
+$font-weight-base: $font-weight-normal !default;
+$line-height-base: 1.5 !default;
+$shape-height-base: 1.5 !default;
+
+
+$h1-font-size: $font-size-base * 1.625 !default;
+$h2-font-size: $font-size-base * 1.25 !default;
+$h3-font-size: $font-size-base * 1.0625 !default;
+$h4-font-size: $font-size-base * .9375 !default;
+$h5-font-size: $font-size-base * .8125 !default;
+$h6-font-size: $font-size-base * .625 !default;
+
+
+$headings-margin-bottom: ($spacer / 2);
+$headings-font-family: inherit !default;
+$headings-font-weight: $font-weight-bold !default;
+$headings-line-height: 1.5 !default;
+$headings-color: $gray-800 !default;
+
+$heading-letter-spacing: .025em !default;
+$heading-font-size: .95rem !default;
+$heading-text-transform: uppercase !default;
+$heading-font-weight: $headings-font-weight !default;
+
+$heading-title-letter-spacing: .025em !default;
+$heading-title-font-size: 1.375rem !default;
+$heading-title-font-weight: $font-weight-bold !default;
+$heading-title-text-transform: uppercase !default;
+
+$heading-section-letter-spacing: .025em !default;
+$heading-section-font-size: 1.375rem !default;
+$heading-section-font-weight: $font-weight-bold !default;
+$heading-section-text-transform: uppercase !default;
+
+$display1-size: 3.3rem !default;
+$display2-size: 2.75rem !default;
+$display3-size: 2.1875rem !default;
+$display4-size: 1.6275rem !default;
+
+$display1-weight: $font-weight-bold !default;
+$display2-weight: $font-weight-bold !default;
+$display3-weight: $font-weight-bold !default;
+$display4-weight: $font-weight-bold !default;
+$display-line-height: $headings-line-height !default;
+
+$paragraph-font-size: 1rem !default;
+$paragraph-font-weight: 300 !default;
+$paragraph-line-height: 1.7 !default;
+
+$lead-font-size: ($paragraph-font-size * 1.25) !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: 80% !default;
+
+$text-muted: $gray-600 !default;
+
+$blockquote-small-color: $gray-600 !default;
+$blockquote-font-size: ($font-size-base * 1.25) !default;
+
+$hr-border-color: rgba($black, .1);
+$hr-border-width: $border-width !default;
+
+$mark-padding: .2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: .5rem !default;
+
+$mark-bg: #fcf8e3 !default;
+
+$hr-margin-y: $spacer * 2 !default;
+
+
+// Icons
+
+$icon-size: 3rem !default;
+$icon-size-xl: 5rem !default;
+$icon-size-lg: 4rem !default;
+$icon-size-sm: 2rem !default;
+
+
+// Tables
+
+$table-cell-padding: 1rem !default;
+$table-cell-padding-sm: .5rem !default;
+
+$table-bg: transparent !default;
+$table-accent-bg: rgba($black, .05) !default;
+$table-hover-bg: $gray-100 !default;
+$table-active-bg: $table-hover-bg !default;
+
+$table-border-width: $border-width !default;
+$table-border-color: $gray-200 !default;
+
+$table-head-bg: $gray-100 !default;
+$table-head-color: $gray-600 !default;
+$table-head-spacer-y: .75rem !default;
+
+$table-head-font-size: .65rem !default;
+$table-head-font-weight: $font-weight-bold !default;
+$table-head-text-transform: uppercase !default;
+$table-head-letter-spacing: 1px !default;
+
+$table-body-font-size: .8125rem !default;
+
+$table-dark-bg: theme-color("default") !default;
+$table-dark-accent-bg: rgba($white, .05) !default;
+$table-dark-hover-bg: rgba($white, .075) !default;
+$table-dark-border-color: lighten(theme-color("default"), 7%) !default;
+$table-dark-color: $body-bg !default;
+
+$table-dark-head-bg: lighten(theme-color("default"), 4%) !default;
+$table-dark-head-color: lighten(theme-color("default"), 35%) !default;
+
+// Buttons + Forms
+
+$input-btn-padding-y: .625rem !default;
+$input-btn-padding-x: .75rem !default;
+$input-btn-line-height: $shape-height-base !default;
+
+$input-btn-focus-width: 0 !default;
+$input-btn-focus-color: rgba($component-active-bg, 1) !default;
+$input-btn-focus-box-shadow: none !default;
+
+$input-btn-padding-y-sm: .25rem !default;
+$input-btn-padding-x-sm: .5rem !default;
+$input-btn-line-height-sm: $shape-height-sm !default;
+
+$input-btn-padding-y-lg: .875rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-line-height-lg: $shape-height-lg !default;
+
+$input-btn-border-width: 1px !default;
+
+$input-btn-font-size-sm: .75rem !default;
+$input-btn-font-size: .875rem !default;
+$input-btn-font-size-lg: .875rem !default;
+
+// Buttons
+
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x + 0.5 !default;
+$btn-line-height: $input-btn-line-height !default;
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-line-height-sm: $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-line-height-lg: $input-btn-line-height-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: 600 !default;
+
+$btn-text-transform: none !default;
+
+
+$btn-letter-spacing: .025em !default;
+$btn-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08) !default;
+$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08) !default;
+$btn-focus-box-shadow: $btn-hover-box-shadow !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-active-box-shadow: none !default;
+
+$btn-hover-translate-y: -1px !default;
+
+// Forms
+
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-line-height-sm: $input-btn-line-height-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-line-height-lg: $input-btn-line-height-lg !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-xl: $border-radius-xl !default;
+$input-border-radius-lg: $border-radius-lg !default;
+$input-border-radius-sm: $border-radius-sm !default;
+
+$input-bg: $white !default;
+$input-disabled-bg: $gray-200 !default;
+
+$input-muted-bg: #F7FAFE !default;
+$input-focus-muted-bg: lighten($input-muted-bg, 1%) !default;
+
+$input-alternative-box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02) !default;
+$input-focus-alternative-box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08) !default;
+
+$input-color: $gray-600 !default;
+$input-border-color: #cad1d7 !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default;
+
+$input-focus-bg: $white !default;
+$input-focus-border-color: rgba(50,151,211,.25) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: 0 !default;
+$input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default;
+
+$input-placeholder-color: $gray-500 !default;
+$input-focus-placeholder-color: $gray-500 !default;
+
+$input-height-border: $input-border-width * 2 !default;
+
+$input-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55) !default;
+
+
+// Input groups
+
+$input-group-addon-color: $input-placeholder-color !default;
+$input-group-addon-bg: $input-bg !default;
+$input-group-addon-border-color: $input-border-color !default;
+
+$input-group-addon-focus-color: $input-focus-color !default;
+$input-group-addon-focus-bg: $input-focus-bg !default;
+$input-group-addon-focus-border-color: $input-focus-border-color !default;
+
+
+// Form group
+
+$form-group-margin-bottom: 1.5rem !default;
+
+
+// Custom forms
+
+$custom-control-gutter: 1.75rem !default;
+$custom-control-spacer-x: 1rem !default;
+$custom-control-indicator-size: 1.25rem !default;
+
+$custom-control-indicator-bg: $input-bg !default;
+$custom-control-indicator-border-width: 1px !default;
+$custom-control-indicator-border-color: $input-border-color !default;
+$custom-control-indicator-box-shadow: none !default;
+
+$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow !default;
+
+$custom-control-indicator-hover-color: $component-hover-color !default;
+$custom-control-indicator-hover-bg: $component-hover-bg !default;
+$custom-control-indicator-hover-border-color: $component-hover-border-color !default;
+
+$custom-control-indicator-active-color: $component-active-color !default;
+$custom-control-indicator-active-bg: $component-active-bg !default;
+$custom-control-indicator-active-border-color: $component-active-border-color !default;
+$custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow !default;
+
+$custom-control-indicator-checked-color: $component-active-color !default;
+$custom-control-indicator-checked-bg: $component-active-bg !default;
+$custom-control-indicator-checked-border-color: $component-active-border-color !default;
+$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default;
+$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
+
+$custom-control-indicator-disabled-bg: $gray-200 !default;
+$custom-control-label-disabled-color: $gray-600 !default;
+
+$custom-checkbox-indicator-border-radius: $border-radius-sm !default;
+//$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+// Custom toggle
+
+$custom-toggle-width: 50px !default;
+$custom-toggle-slider-bg: $gray-200 !default;
+$custom-toggle-checked-bg: theme-color("primary") !default;
+
+// Form validation
+
+$form-feedback-valid-bg: lighten($success, 15%) !default;
+$form-feedback-valid-color: theme-color("success") !default;
+$form-feedback-invalid-bg: lighten($warning, 15%) !default;
+$form-feedback-invalid-color: theme-color("warning") !default;
+
+
+// Allows for customizing button radius independently from global border radius
+
+$btn-border-radius: $input-border-radius !default;
+$btn-border-radius-xl: $input-border-radius-xl !default;
+$btn-border-radius-lg: $input-border-radius-lg !default;
+$btn-border-radius-sm: $input-border-radius !default;
+
+
+
+$chart-height: 350px !default;
+$chart-height-sm: 230px !default;
+
+$chart-legend-margin-top: 2.5rem !default;
+$chart-legend-font-size: $font-size-sm !default;
+$chart-legend-color: $text-muted !default;
+$chart-legend-height: $chart-legend-margin-top + $chart-legend-font-size * $line-height-base !default;
+
+
+
+
+// Map
+$map-height: 500px !default;
+
+
+// No UI Slider
+
+$noui-target-bg: #eceeef !default;
+$noui-target-thickness: 5px !default;
+$noui-target-border-radius: 5px !default;
+$noui-target-border-color: 0 !default;
+$noui-target-box-shadow: inset 0 1px 2px rgba(90,97,105,.1) !default;
+
+$noui-slider-connect-bg: $primary !default;
+$noui-slider-connect-disabled-bg: #b2b2b2 !default;
+
+$noui-handle-width: 15px !default;
+$noui-handle-bg: theme-color("primary") !default;
+$noui-handle-border: 0 !default;
+$noui-handle-border-radius: 100% !default;
+
+$noui-origin-border-radius: 2px !default;
+
+
+// Dropdown
+
+$dropdown-bg: $white !default;
+$dropdown-border-width: 0 !default;
+$dropdown-border-color: rgba($black, .15) !default;
+$dropdown-border-radius: $border-radius-lg !default;
+$dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1) !default;
+
+
+// Navs
+
+$nav-link-padding-y: .25rem !default;
+$nav-link-padding-x: .75rem !default;
+$nav-link-color: $gray-700 !default;
+$nav-link-hover-color: theme-color("primary") !default;
+$nav-link-disabled-color: $gray-600 !default;
+
+$nav-pills-padding-y: .75rem !default;
+$nav-pills-padding-x: 1rem !default;
+
+$nav-pills-space-x: 1rem !default;
+
+$nav-pills-bg: $white !default;
+$nav-pills-border-width: 1px !default;
+$nav-pills-border-color: theme-color("primary") !default;
+$nav-pills-border-radius: $border-radius !default;
+
+$nav-pills-link-color: theme-color("primary") !default;
+$nav-pills-link-hover-color: darken(theme-color("primary"), 5%) !default;
+$nav-pills-link-active-color: color-yiq(theme-color("primary")) !default;
+$nav-pills-link-active-bg: theme-color("primary") !default;
+$nav-pills-box-shadow: $btn-box-shadow !default;
+
+// Navbar
+
+$navbar-transition: all .15s linear !default;
+$navbar-padding-y: 1rem !default;
+$navbar-padding-x: 1rem !default;
+
+$navbar-nav-link-padding-x: 1rem !default;
+$navbar-nav-link-padding-y: 1rem !default;
+
+$navbar-nav-link-font-size: .9rem !default;
+$navbar-nav-link-font-weight: 400 !default;
+$navbar-nav-link-text-transform: normal !default;
+$navbar-nav-link-letter-spacing: 0 !default;
+$navbar-nav-link-border-radius: $border-radius !default;
+
+$navbar-search-width: 270px !default;
+$navbar-search-bg: transparent !default;
+
+$navbar-search-border-radius: 2rem !default;
+$navbar-search-border-width: 2px !default;
+
+$navbar-dark-bg: transparent !default;
+$navbar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
+$navbar-dark-active-bg: rgba(255, 255, 255, .1) !default;
+$navbar-dark-color: rgba($white, .95) !default;
+$navbar-dark-hover-color: rgba($white, .65) !default;
+$navbar-dark-active-color: rgba($white, .65) !default;
+$navbar-dark-disabled-color: rgba($white, .25) !default;
+$navbar-dark-toggler-border-color: transparent !default;
+
+$navbar-search-dark-border-color: rgba(255, 255, 255, .6) !default;
+$navbar-search-dark-color: rgba(255, 255, 255, .6) !default;
+$navbar-search-dark-focus-border-color: rgba(255, 255, 255, .9) !default;
+$navbar-search-dark-focus-color: rgba(255, 255, 255, .9) !default;
+
+$navbar-light-bg: transparent !default;
+$navbar-light-hover-bg: rgba(0, 0, 0, .1) !default;
+$navbar-light-active-bg: rgba(0, 0, 0, .1) !default;
+$navbar-light-border-color: $gray-100 !default;
+$navbar-light-color: rgba($black, .5) !default;
+$navbar-light-hover-color: rgba($black, .7) !default;
+$navbar-light-active-color: rgba($black, .9) !default;
+$navbar-light-disabled-color: rgba($black, .3) !default;
+$navbar-light-toggler-border-color: transparent !default;
+
+$navbar-search-light-border-color: rgba(0, 0, 0, .6) !default;
+$navbar-search-light-color: rgba(0, 0, 0, .6) !default;
+$navbar-search-light-focus-border-color: rgba(0, 0, 0, .9) !default;
+$navbar-search-light-focus-color: rgba(0, 0, 0, .9) !default;
+
+
+
+// Vertical navbar
+$navbar-vertical-box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15) !important;
+$navbar-vertical-width: 250px !default;
+$navbar-vertical-padding-x: 1.5rem !default;
+$navbar-vertical-nav-link-padding-x: 1.5rem !default;
+$navbar-vertical-nav-link-padding-y: .65rem !default;
+
+$navbar-icon-min-width: 2.25rem !default;
+
+$navbar-breadcrumb-padding-y: $nav-link-padding-y !default;
+$navbar-breadcrumb-padding-x: 0 !default;
+
+$navbar-light-bg: $white !default;
+$navbar-light-border-color: $border-color !default;
+
+
+
+
+// Main content
+
+$main-content-padding-y: 40px !default;
+$main-content-padding-x: 24px !default; // in px to combine with $grid-gutter-width
+
+
+// Alerts
+
+$alert-padding-y: 1rem !default;
+$alert-padding-x: 1.5rem !default;
+$alert-border-radius: $border-radius !default;
+
+$alert-bg-level: -2 !default;
+$alert-border-level: -2 !default;
+$alert-color-level: 0 !default;
+
+
+// List group
+
+$list-group-bg: $white !default;
+$list-group-border-color: $border-color !default; //rgba($black, .125);
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-item-padding-y: 1rem !default;
+$list-group-item-padding-x: 1rem !default;
+
+$list-group-hover-bg: $gray-100 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: $gray-700 !default;
+$list-group-action-hover-color: $list-group-action-color !default;
+
+$list-group-action-active-color: $list-group-action-color !default;
+$list-group-action-active-bg: $gray-200 !default;
+
+
+// Close
+
+$close-font-size: $font-size-base * 1.5 !default;
+$close-font-weight: $font-weight-bold !default;
+$close-bg: transparent !default;
+$close-hover-bg: transparent !default;
+$close-color: rgba(0, 0, 0, .6) !default !default;
+$close-hover-color: rgba(0, 0, 0, .9) !default;
+$close-text-shadow: none !default;
+
+
+// Popovers
+
+$popover-font-size: $font-size-sm !default;
+$popover-bg: $white !default;
+$popover-max-width: 276px !default;
+$popover-border-width: 1px !default;
+$popover-border-color: rgba($black, .05) !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-box-shadow: 0px .5rem 2rem 0px rgba($black, .2) !default;
+
+$popover-header-bg: $popover-bg !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: .5rem !default;
+$popover-header-padding-x: .95rem !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $popover-header-padding-y !default;
+$popover-body-padding-x: $popover-header-padding-x !default;
+
+$popover-arrow-width: 1.5rem !default;
+$popover-arrow-height: .75rem !default;
+$popover-arrow-color: $popover-bg !default;
+
+$popover-arrow-outer-color: transparent !default;
+
+
+// Badges
+
+$badge-font-size: 66% !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-padding-y: .35rem !default;
+$badge-padding-x: .375rem !default;
+$badge-border-radius: $border-radius !default;
+$badge-text-transfom: uppercase;
+
+$badge-pill-padding-x: .875em !default;
+$badge-pill-border-radius: 10rem !default;
+
+$badge-circle-size: 2rem !default;
+
+// Pagination
+
+// $pagination-padding-y: .5rem !default;
+// $pagination-padding-x: .75rem !default;
+// $pagination-padding-y-sm: .25rem !default;
+// $pagination-padding-x-sm: .5rem !default;
+// $pagination-padding-y-lg: .75rem !default;
+// $pagination-padding-x-lg: 1.5rem !default;
+// $pagination-line-height: 1.25 !default;
+
+$pagination-color: $gray-600 !default;
+$pagination-bg: $white !default;
+$pagination-border-width: $border-width !default;
+$pagination-border-color: $gray-300 !default;
+
+//$pagination-focus-box-shadow: $btn-hover-box-shadow !default;
+
+$pagination-hover-color: $gray-600 !default;
+$pagination-hover-bg: $gray-300 !default;
+$pagination-hover-border-color: $gray-300 !default;
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $pagination-active-bg !default;
+$pagination-active-box-shadow: $btn-hover-box-shadow !default;
+
+$pagination-disabled-color: $gray-600 !default;
+$pagination-disabled-bg: $white !default;
+$pagination-disabled-border-color: $gray-300 !default;
+
+
+// Cards
+
+$card-spacer-y: 1.25rem !default;
+$card-spacer-x: 1.5rem !default;
+$card-border-width: $border-width !default;
+$card-border-radius: $border-radius !default;
+$card-border-color: rgba($black, .05) !default;
+$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-bg: $white !default;
+$card-bg: $white !default;
+
+$card-img-overlay-padding: 1.25rem !default;
+
+//$card-group-margin: ($grid-gutter-width / 2);
+//$card-deck-margin: $card-group-margin !default;
+
+$card-columns-count: 3 !default;
+$card-columns-gap: 1.25rem !default;
+$card-columns-margin: $card-spacer-y !default;
+
+// Tooltips
+
+$tooltip-font-size: $font-size-sm !default;
+
+// Modals
+
+$modal-inner-padding: 1.5rem !default;
+
+$modal-lg: 800px !default;
+$modal-md: 500px !default;
+$modal-sm: 380px !default;
+
+$modal-title-line-height: 1.1;
+
+$modal-content-bg: $white !default;
+$modal-content-border-color: rgba($black, .2) !default;
+$modal-content-border-width: 0 !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-box-shadow-xs: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17);
+$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17);
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: .16 !default;
+$modal-header-border-color: $gray-200 !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+$modal-header-padding: 1.25rem !default;
+
+// Datepicker
+
+$datepicker-border-radius: $card-border-radius !default;
+$datepicker-dropdown-padding: 20px 22px !default;
+
+$datepicker-cell-transition: $transition-base !default;
+$datepicker-cell-hover-background: lighten($gray-400, 55%);
+$datepicker-cell-border-radius: 50% !default;
+$datepicker-cell-width: 36px !default;
+$datepicker-cell-height: 36px !default;
+
+$datepicker-disabled-cell-color: $gray-300 !default;
+$datepicker-disabled-old-new-color: $gray-500 !default;
+
+$datepicker-header-cell-border-radius: $border-radius !default;
+
+$datepicker-active-color: $white !default;
+$datepicker-active-background: theme-color("primary") !default;
+$datepicker-active-box-shadow: none !default;
+
+$datepicker-range-background: theme-color("primary") !default;
+$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%);
+$datepicker-range-color: $white !default;
+$datepicker-range-highlighted-bg: $gray-200 !default;
+
+$datepicker-dropdown-border: lighten($gray-400, 40%);
+$datepicker-dropdown-bg: $white !default;
+$datepicker-highlighted-bg: $datepicker-active-background !default;
+
+
+// Footer
+
+
+$footer-padding-y: 2.5rem;
+$footer-padding-x: 0;
+
+
+$footer-link-font-size: .85rem !default;
+$footer-bg: theme-color("secondary") !default;
+$footer-color: $gray-600 !default;
+$footer-link-color: $gray-600 !default;
+$footer-link-hover-color: $gray-700 !default;
+$footer-heading-color: $gray-600 !default;
+$footer-heading-font-size: $font-size-sm !default;
+
+// Import Bootstrap variable defaults
+
+@import "../bootstrap/variables";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/_vendors.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/_vendors.scss
new file mode 100644
index 0000000..ac9365a
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/_vendors.scss
@@ -0,0 +1,9 @@
+//
+// Vendors
+// include plugin styles
+//
+
+
+@import "vendors/bootstrap-datepicker";
+@import "vendors/nouislider";
+@import "vendors/scrollbar";
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/alerts/_alert-dismissible.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/alerts/_alert-dismissible.scss
new file mode 100644
index 0000000..aa15ad1
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/alerts/_alert-dismissible.scss
@@ -0,0 +1,39 @@
+//
+// Dismissible alert
+//
+
+.alert-dismissible {
+ .close {
+ top: 50%;
+ right: $alert-padding-x;
+ padding: 0;
+ transform: translateY(-50%);
+ color: rgba($white, .6);
+ opacity: 1;
+
+ &:hover,
+ &:focus {
+ color: rgba($white, .9);
+ opacity: 1 !important;
+ }
+
+ @include media-breakpoint-down(xs) {
+ top: 1rem;
+ right: .5rem;
+ }
+
+ &>span:not(.sr-only) {
+ font-size: 1.5rem;
+ background-color: transparent;
+ color: rgba($white, .6);
+ }
+
+ &:hover,
+ &:focus {
+ &>span:not(.sr-only) {
+ background-color: transparent;
+ color: rgba($white, .9);
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/alerts/_alert.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/alerts/_alert.scss
new file mode 100644
index 0000000..a9bc230
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/alerts/_alert.scss
@@ -0,0 +1,46 @@
+//
+// Alert
+//
+
+.alert {
+ font-size: $font-size-sm;
+}
+
+// Alert heading
+
+.alert-heading {
+ font-weight: $font-weight-bold;
+ font-size: $h4-font-size;
+ margin-top: .15rem;
+}
+
+
+// Alert icon
+.alert-icon {
+ font-size: 1.25rem;
+ margin-right: 1.25rem;
+ display: inline-block;
+ vertical-align: middle;
+
+ i.ni {
+ position: relative;
+ top: 1px;
+ }
+}
+
+
+// Alert text next to an alert icon
+.alert-text {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+
+// Alert links
+
+[class*="alert-"] {
+ .alert-link {
+ color: $white;
+ border-bottom: 1px dotted rgba($white, .5);
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/avatars/_avatar-group.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/avatars/_avatar-group.scss
new file mode 100644
index 0000000..0fcf4cf
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/avatars/_avatar-group.scss
@@ -0,0 +1,22 @@
+//
+// Avatar group
+//
+
+// General styles
+
+.avatar-group {
+ .avatar {
+ position: relative;
+ z-index: 2;
+ border: 2px solid $card-bg;
+
+ &:hover {
+ z-index: 3;
+ }
+ }
+
+ .avatar + .avatar {
+ margin-left: -1rem;
+
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/avatars/_avatar.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/avatars/_avatar.scss
new file mode 100644
index 0000000..480fa8d
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/avatars/_avatar.scss
@@ -0,0 +1,42 @@
+//
+// Avatar
+//
+
+// General styles
+
+.avatar {
+ color: $white;
+ background-color: $gray-500;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1rem;
+ border-radius: 50%;
+ height: 48px;
+ width: 48px;
+
+ img {
+ width: 100%;
+ border-radius: 50%;
+ }
+
+ + .avatar-content {
+ display: inline-block;
+ margin-left: .75rem;
+ }
+}
+
+
+// Avatar size variations
+
+.avatar-lg {
+ width: 58px;
+ height: 58px;
+ font-size: $font-size-sm;
+}
+
+.avatar-sm {
+ width: 36px;
+ height: 36px;
+ font-size: $font-size-sm;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/badges/_badge-circle.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/badges/_badge-circle.scss
new file mode 100644
index 0000000..88a5d5e
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/badges/_badge-circle.scss
@@ -0,0 +1,17 @@
+//
+// Circle badge
+//
+
+
+// General styles
+
+.badge-circle {
+ text-align: center;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ width: 2rem;
+ height: 2rem;
+ font-size: .875rem;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/badges/_badge-dot.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/badges/_badge-dot.scss
new file mode 100644
index 0000000..1ed6ffa
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/badges/_badge-dot.scss
@@ -0,0 +1,42 @@
+//
+// Dot badge
+//
+
+
+// General styles
+
+.badge-dot {
+ padding-left: 0;
+ padding-right: 0;
+ background: transparent;
+ font-weight: $font-weight-normal;
+ font-size: $font-size-sm;
+ text-transform: none;
+
+ strong {
+ color: $gray-800;
+ }
+
+ i {
+ display: inline-block;
+ vertical-align: middle;
+ width: .375rem;
+ height: .375rem;
+ border-radius: 50%;
+ margin-right: .375rem;
+ }
+
+ &.badge-md {
+ i {
+ width: .5rem;
+ height: .5rem;
+ }
+ }
+
+ &.badge-lg {
+ i {
+ width: .625rem;
+ height: .625rem;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/badges/_badge.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/badges/_badge.scss
new file mode 100644
index 0000000..b0d626a
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/badges/_badge.scss
@@ -0,0 +1,55 @@
+//
+// Badge
+//
+
+
+// General styles
+
+.badge {
+ text-transform: $badge-text-transfom;
+
+ a {
+ color: $white;
+ }
+}
+
+
+// Size variations
+
+.badge-md {
+ padding: .65em 1em;
+}
+
+.badge-lg {
+ padding: .85em 1.375em;
+}
+
+
+// Multiple inline badges
+
+.badge-inline {
+ margin-right: .625rem;
+
+ + span {
+ top: 2px;
+ position: relative;
+
+ > a {
+ text-decoration: underline;
+ }
+ }
+}
+
+
+// Badge spacing inside a btn with some text
+
+.btn {
+ .badge {
+ &:not(:first-child) {
+ margin-left: .5rem;
+ }
+ &:not(:last-child) {
+ margin-right: .5rem;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/buttons/_button-brand.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/buttons/_button-brand.scss
new file mode 100644
index 0000000..82a3dd7
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/buttons/_button-brand.scss
@@ -0,0 +1,12 @@
+//
+// Brand buttons
+//
+
+
+// Color variations
+
+@each $color, $value in $brand-colors {
+ .btn-#{$color} {
+ @include button-variant($value, $value);
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/buttons/_button-icon.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/buttons/_button-icon.scss
new file mode 100644
index 0000000..1aceddb
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/buttons/_button-icon.scss
@@ -0,0 +1,92 @@
+//
+// Icon buttons
+//
+
+.btn-icon {
+ .btn-inner--icon {
+ img {
+ width: 20px;
+ }
+ }
+
+ .btn-inner--text:not(:first-child) {
+ margin-left: 0.75em;
+ }
+
+ .btn-inner--text:not(:last-child) {
+ margin-right: 0.75em;
+ }
+}
+
+
+// Button only with icon and NO text
+
+.btn-icon-only {
+ width: 2.375rem;
+ height: 2.375rem;
+ padding: 0;
+}
+
+a.btn-icon-only {
+ line-height: 2.5;
+}
+
+.btn-icon-only.btn-sm {
+ width: 2rem;
+ height: 2rem;
+}
+
+
+//
+// Clipboard button
+// dedicated element for copying icons
+//
+
+.btn-icon-clipboard {
+ margin: 0;
+ padding: 1.5rem;
+ font-size: $font-size-base;
+ font-weight: $font-weight-normal;
+ line-height: 1.25;
+ color: $gray-800;
+ background-color: $gray-100;
+ border-radius: $border-radius;
+ border: 0;
+ text-align: left;
+ font-family: inherit;
+ display: inline-block;
+ vertical-align: middle;
+ text-decoration: none;
+ -moz-appearance: none;
+ cursor: pointer;
+ width: 100%;
+ margin: .5rem 0;
+
+ &:hover {
+ background-color: $white;
+ box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px, rgba(0, 0, 0, .1) 0 4px 16px;
+ }
+
+ > div {
+ align-items: center;
+ display: flex;
+ }
+
+ i {
+ box-sizing: content-box;
+ color: theme-color("primary");
+ vertical-align: middle;
+ font-size: 1.5rem;
+ }
+
+ span {
+ display: inline-block;
+ font-size: 0.875rem;
+ line-height: 1.5;
+ margin-left: 16px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/buttons/_button.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/buttons/_button.scss
new file mode 100644
index 0000000..9c19674
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/buttons/_button.scss
@@ -0,0 +1,91 @@
+//
+// Icon buttons
+//
+
+// General styles
+
+.btn {
+ position: relative;
+ text-transform: $btn-text-transform;
+ transition: $transition-base;
+ letter-spacing: $btn-letter-spacing;
+ font-size: $input-btn-font-size;
+ will-change: transform;
+
+ &:hover {
+ @include box-shadow($btn-hover-box-shadow);
+ transform: translateY($btn-hover-translate-y);
+ }
+
+ &:not(:last-child) {
+ margin-right: .5rem;
+ }
+
+
+ // Icons
+
+ i:not(:first-child),
+ svg:not(:first-child) {
+ margin-left: .5rem;
+ }
+
+ i:not(:last-child),
+ svg:not(:last-child) {
+ margin-right: .5rem;
+ }
+}
+
+
+// Remove translateY and margin animation when btn is included in a btn-group or input-group
+
+.btn-group,
+.input-group {
+ .btn {
+ margin-right: 0;
+ transform: translateY(0);
+ }
+}
+
+
+// Size variations
+
+.btn-sm {
+ font-size: $input-btn-font-size-sm;
+}
+
+.btn-lg {
+ font-size: $input-btn-font-size-lg;
+}
+
+
+// Some quick fixes (to revise)
+
+// Fixes
+[class*="btn-outline-"] {
+ border-width: 1px;
+}
+
+.btn-outline-secondary {
+ color: darken(theme-color("secondary"), 50%);
+}
+
+.btn-inner--icon {
+ i:not(.fa) {
+ position: relative;
+ top: 2px;
+ }
+}
+
+.btn-link {
+ font-weight: $btn-font-weight;
+ box-shadow: none;
+
+ &:hover {
+ box-shadow: none;
+ transform: none;
+ }
+}
+
+.btn-neutral {
+ color: theme-color("primary");
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-animations.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-animations.scss
new file mode 100644
index 0000000..4da8b78
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-animations.scss
@@ -0,0 +1,10 @@
+//
+// Card with hover animations
+//
+
+.card-lift--hover {
+ &:hover {
+ transform: translateY(-20px);
+ @include transition($transition-base);
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-blockquote.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-blockquote.scss
new file mode 100644
index 0000000..066bae5
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-blockquote.scss
@@ -0,0 +1,17 @@
+//
+// Card with blockquote
+//
+
+.card-blockquote {
+ padding: 2rem;
+ position: relative;
+
+ .svg-bg {
+ display: block;
+ width: 100%;
+ height: 95px;
+ position: absolute;
+ top: -94px;
+ left: 0;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-profile.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-profile.scss
new file mode 100644
index 0000000..920f411
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-profile.scss
@@ -0,0 +1,49 @@
+//
+// Profile card
+//
+
+.card-profile-image {
+ position: relative;
+
+ img {
+ max-width: 180px;
+ border-radius: $border-radius;
+ @extend .shadow;
+ transform: translate(-50%,-30%);
+ position: absolute;
+ left: 50%;
+ transition: $transition-base;
+
+ &:hover {
+ transform: translate(-50%, -33%);
+ }
+ }
+}
+
+.card-profile-stats {
+ padding: 1rem 0;
+
+ > div {
+ text-align: center;
+ margin-right: 1rem;
+ padding: .875rem;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .heading {
+ font-size: 1.1rem;
+ font-weight: bold;
+ display: block;
+ }
+ .description {
+ font-size: .875rem;
+ color: $gray-500;
+ }
+ }
+}
+
+.card-profile-actions {
+ padding: .875rem;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-stats.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-stats.scss
new file mode 100644
index 0000000..1459304
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card-stats.scss
@@ -0,0 +1,16 @@
+//
+// Card stats
+//
+
+.card-stats {
+ .card-body {
+ padding: 1rem 1.5rem;
+ }
+
+ .card-status-bullet {
+ position: absolute;
+ top: 0;
+ right: 0;
+ transform: translate(50%, -50%);
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card.scss
new file mode 100644
index 0000000..a593e4c
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/cards/_card.scss
@@ -0,0 +1,8 @@
+//
+// Card
+//
+
+
+.card-translucent {
+ background-color: rgba(18, 91, 152, 0.08);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/charts/_chart.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/charts/_chart.scss
new file mode 100644
index 0000000..9ea3ece
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/charts/_chart.scss
@@ -0,0 +1,69 @@
+//
+// Chart
+//
+
+.chart {
+ position: relative;
+ height: $chart-height;
+}
+
+
+// Size variations
+
+.chart-sm {
+ height: $chart-height-sm;
+}
+
+
+// Legend
+
+.chart-legend {
+ display: flex;
+ justify-content: center;
+ margin-top: $chart-legend-margin-top;
+ font-size: $chart-legend-font-size;
+ text-align: center;
+ color: $chart-legend-color;
+}
+
+.chart-legend-item {
+ display: inline-flex;
+ align-items: center;
+
+ + .chart-legend-item {
+ margin-left: 1rem;
+ }
+}
+
+.chart-legend-indicator {
+ display: inline-block;
+ width: 0.5rem;
+ height: 0.5rem;
+ margin-right: 0.375rem;
+ border-radius: 50%;
+}
+
+
+// Tooltip
+
+#chart-tooltip {
+ z-index: 0;
+
+ .arrow {
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%) translateX(-.5rem);
+ }
+}
+
+
+// Chart info overlay
+
+.chart-info-overlay {
+ position: absolute;
+ top: 0;
+ left: 5%;
+ max-width: 350px;
+ padding: 20px;
+ z-index: 1;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/close/_close.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/close/_close.scss
new file mode 100644
index 0000000..2c0672a
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/close/_close.scss
@@ -0,0 +1,34 @@
+//
+// Close
+//
+
+.close {
+ @if $enable-transitions {
+ transition: $transition-base;
+ }
+
+ &>span:not(.sr-only) {
+ background-color: $close-bg;
+ color: $close-color;
+ line-height: 17px;
+ height: 1.25rem;
+ width: 1.25rem;
+ border-radius: 50%;
+ font-size: 1.25rem;
+ display: block;
+ @if $enable-transitions {
+ transition: $transition-base;
+ }
+ }
+
+ &:hover,
+ &:focus {
+ background-color: $close-hover-bg;
+ color: $close-hover-color;
+ outline: none;
+
+ span:not(.sr-only) {
+ background-color: $close-hover-bg;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-checkbox.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-checkbox.scss
new file mode 100644
index 0000000..e808b5b
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-checkbox.scss
@@ -0,0 +1,37 @@
+//
+// Custom checkbox
+//
+
+.custom-checkbox {
+ .custom-control-input ~ .custom-control-label {
+ cursor: pointer;
+ font-size: $font-size-sm;
+ }
+
+ .custom-control-input {
+ &:checked {
+ ~ .custom-control-label {
+ &::before {
+ border-color: $custom-control-indicator-checked-border-color;
+ }
+ &::after {
+ background-image: $custom-checkbox-indicator-icon-checked;
+ }
+ }
+ }
+
+ &:disabled {
+ ~ .custom-control-label {
+ &::before {
+ border-color: $custom-control-indicator-disabled-bg;
+ }
+ }
+
+ &:checked {
+ &::before {
+ border-color: $custom-control-indicator-checked-disabled-bg;
+ }
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-control.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-control.scss
new file mode 100644
index 0000000..2861002
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-control.scss
@@ -0,0 +1,51 @@
+//
+// Custom control
+// additional styles for custom checkboxes, radios and other
+//
+
+.custom-control-label {
+ // Background-color and (when enabled) gradient
+ &::before {
+ border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
+ @if $enable-transitions {
+ transition: $input-transition;
+ }
+ }
+
+ span {
+ position: relative;
+ top: 2px;
+ }
+}
+
+.custom-control-label {
+ margin-bottom: 0;
+}
+
+
+// Alternative style
+
+.custom-control-alternative {
+ .custom-control-label {
+ // Background-color and (when enabled) gradient
+ &::before {
+ border: 0;
+ box-shadow: $input-alternative-box-shadow;
+ }
+ }
+
+ .custom-control-input {
+ &:checked {
+ ~ .custom-control-label {
+ &::before {
+ box-shadow: $input-focus-alternative-box-shadow;
+ }
+ }
+ }
+
+ &:active~.custom-control-label::before,
+ &:focus~.custom-control-label::before {
+ box-shadow: $input-alternative-box-shadow;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-form.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-form.scss
new file mode 100644
index 0000000..e808b5b
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-form.scss
@@ -0,0 +1,37 @@
+//
+// Custom checkbox
+//
+
+.custom-checkbox {
+ .custom-control-input ~ .custom-control-label {
+ cursor: pointer;
+ font-size: $font-size-sm;
+ }
+
+ .custom-control-input {
+ &:checked {
+ ~ .custom-control-label {
+ &::before {
+ border-color: $custom-control-indicator-checked-border-color;
+ }
+ &::after {
+ background-image: $custom-checkbox-indicator-icon-checked;
+ }
+ }
+ }
+
+ &:disabled {
+ ~ .custom-control-label {
+ &::before {
+ border-color: $custom-control-indicator-disabled-bg;
+ }
+ }
+
+ &:checked {
+ &::before {
+ border-color: $custom-control-indicator-checked-disabled-bg;
+ }
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-radio.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-radio.scss
new file mode 100644
index 0000000..3ce26f8
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-radio.scss
@@ -0,0 +1,37 @@
+//
+// Custom radio
+//
+
+.custom-radio {
+ .custom-control-input ~ .custom-control-label {
+ cursor: pointer;
+ font-size: $font-size-sm;
+ }
+
+ .custom-control-input {
+ &:checked {
+ ~ .custom-control-label {
+ &::before {
+ border-color: $custom-control-indicator-checked-border-color;
+ }
+ &::after {
+ background-image: $custom-radio-indicator-icon-checked;
+ }
+ }
+ }
+
+ &:disabled {
+ ~ .custom-control-label {
+ &::before {
+ border-color: $custom-control-indicator-disabled-bg;
+ }
+ }
+
+ &:checked {
+ &::before {
+ border-color: $custom-control-indicator-checked-disabled-bg;
+ }
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-toggle.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-toggle.scss
new file mode 100644
index 0000000..88da145
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/custom-forms/_custom-toggle.scss
@@ -0,0 +1,66 @@
+//
+// Custom toggle
+//
+
+.custom-toggle {
+ position: relative;
+ display: inline-block;
+ width: $custom-toggle-width;
+ height: 1.5rem;
+
+ input {
+ display: none;
+
+ &:checked {
+ + .custom-toggle-slider {
+ border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
+
+ &:before {
+ background: $custom-toggle-checked-bg;
+ transform: translateX(1.625rem);
+ }
+ }
+ }
+
+ &:disabled {
+ + .custom-toggle-slider {
+ border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
+ }
+
+ &:checked {
+ + .custom-toggle-slider {
+ border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
+
+ &:before {
+ background-color: lighten($custom-control-indicator-checked-bg, 10%);
+ }
+ }
+ }
+ }
+ }
+}
+
+.custom-toggle-slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: $custom-control-indicator-border-width solid $input-border-color;
+ border-radius: 34px !important;
+ background-color: transparent;
+
+
+ &:before {
+ position: absolute;
+ content: "";
+ height: 18px;
+ width: 18px;
+ left: 2px;
+ bottom: 2px;
+ border-radius: 50% !important;
+ background-color: $custom-toggle-slider-bg;
+ transition: $input-transition;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/dropdowns/_dropdown.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/dropdowns/_dropdown.scss
new file mode 100644
index 0000000..6d3106e
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/dropdowns/_dropdown.scss
@@ -0,0 +1,79 @@
+//
+// Dropdown
+//
+
+// General styles
+
+.dropdown,
+.dropup,
+.dropright,
+.dropleft {
+ display: inline-block;
+}
+
+.dropdown-menu {
+ min-width: 12rem;
+
+ .dropdown-item {
+ padding: .5rem 1rem;
+ font-size: $font-size-sm;
+ > i,
+ > svg {
+ margin-right: 1rem;
+ font-size: 1rem;
+ vertical-align: -17%;
+ }
+ }
+}
+
+.dropdown-header {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ color: $gray-100;
+ font-size: .625rem;
+ text-transform: uppercase;
+ font-weight: 700;
+}
+
+
+// Media components inside dropdown link
+
+.dropdown-menu {
+ a.media {
+
+ > div {
+ &:first-child {
+ line-height: 1;
+ }
+ }
+
+ p {
+ color: $gray-600;
+ }
+
+ &:hover {
+ .heading,
+ p {
+ color: theme-color("default") !important;
+ }
+ }
+ }
+}
+
+
+// Size variations
+
+.dropdown-menu-sm {
+ min-width: 100px;
+ border: $border-radius-lg;
+}
+
+.dropdown-menu-lg {
+ min-width: 260px;
+ border-radius: $border-radius-lg;
+}
+
+.dropdown-menu-xl {
+ min-width: 450px;
+ border-radius: $border-radius-lg;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/footers/_footer.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/footers/_footer.scss
new file mode 100644
index 0000000..a34180e
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/footers/_footer.scss
@@ -0,0 +1,98 @@
+//
+// Footer
+//
+
+
+// General styles
+
+.footer {
+ background: $footer-bg;
+ padding: $footer-padding-y $footer-padding-x;
+
+ .col-footer {
+ .heading {
+ color: $footer-heading-color;
+ letter-spacing: 0;
+ font-size: $footer-heading-font-size;
+ text-transform: uppercase;
+ font-weight: $font-weight-bold;
+ margin-bottom: 1rem;
+ }
+ }
+
+ .nav .nav-item .nav-link,
+ .footer-link {
+ color: $footer-link-color !important;
+
+ &:hover {
+ color: $footer-link-hover-color !important;
+ }
+ }
+
+ .list-unstyled li a {
+ display: inline-block;
+ padding: .125rem 0;
+ color: $footer-link-color;
+ font-size: $footer-link-font-size;
+
+ &:hover {
+ color: $footer-link-hover-color;
+ }
+ }
+
+ .copyright {
+ font-size: $font-size-sm;
+ }
+}
+
+
+// Dark footer
+
+.footer-dark {
+ .col-footer .heading {
+ color: $white;
+ }
+}
+
+
+// Footer nav used for copyright and some links, but not limited to this
+
+.nav-footer {
+ .nav-link {
+ font-size: $font-size-sm;
+ }
+
+ .nav-item:last-child {
+ .nav-link {
+ padding-right: 0;
+ }
+ }
+}
+
+
+// Footer with cards over
+
+.footer.has-cards {
+ overflow: hidden;
+ padding-top: 500px;
+ margin-top: -420px;
+ position: relative;
+ background: transparent;
+ pointer-events: none;
+
+ &:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 600px;
+ height: 2000px;
+ background: theme-color("secondary");
+ transform: skew(0,-8deg);
+ }
+
+ .container {
+ pointer-events: auto;
+ position: relative;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/forms/_form-validation.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/forms/_form-validation.scss
new file mode 100644
index 0000000..bb97e39
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/forms/_form-validation.scss
@@ -0,0 +1,71 @@
+//
+// Form validation
+//
+
+// Validation
+
+.has-success,
+.has-danger {
+ position: relative;
+
+ &:after, {
+ width: 19px;
+ height: 19px;
+ line-height: 19px;
+ text-align: center;
+ font-family: 'NucleoIcons';
+ display: inline-block;
+ position: absolute;
+ right: 15px;
+ top: 2px;
+ transform: translateY(50%);
+ border-radius: 50%;
+ font-size: 9px;
+ opacity: 1;
+ }
+}
+
+.has-success {
+ &:after {
+ content: "\ea26";
+ color: daken($form-feedback-valid-color, 18%);
+ background-color: $form-feedback-valid-bg;
+ }
+
+ .form-control {
+ background-color: $input-focus-bg;
+
+ &:focus {
+ border-color: $input-focus-border-color;
+ }
+
+
+ // Placeholder
+
+ &::placeholder {
+ color: $form-feedback-valid-color;
+ }
+ }
+}
+
+.has-danger {
+ &:after {
+ content: "\ea53";
+ color: daken($form-feedback-invalid-color, 18%);
+ background-color: $form-feedback-invalid-bg;
+ }
+
+ .form-control {
+ background-color: $input-focus-bg;
+
+ &:focus {
+ border-color: $input-focus-border-color;
+ }
+
+ // Placeholder
+
+ &::placeholder {
+ color: $form-feedback-invalid-color;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/forms/_form.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/forms/_form.scss
new file mode 100644
index 0000000..8afeb87
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/forms/_form.scss
@@ -0,0 +1,78 @@
+//
+// Forms
+//
+
+
+// Labels
+
+.form-control-label {
+ color: $gray-700;
+ font-size: $font-size-sm;
+ font-weight: $font-weight-bold;
+}
+
+
+// Text inputs
+
+.form-control {
+ font-size: $input-btn-font-size;
+
+ &:focus {
+ &::placeholder {
+ color: $input-focus-placeholder-color;
+ }
+ }
+}
+
+
+// Textarea
+
+textarea[resize="none"] {
+ resize: none!important;
+}
+
+textarea[resize="both"] {
+ resize: both!important;
+}
+
+textarea[resize="vertical"] {
+ resize: vertical!important;
+}
+
+textarea[resize="horizontal"] {
+ resize: horizontal!important;
+}
+
+
+// Form input variations
+
+// Muted input
+
+.form-control-muted {
+ background-color: $input-muted-bg;
+ border-color: $input-muted-bg;
+ box-shadow: none;
+
+ &:focus {
+ background-color: $input-focus-muted-bg;
+ }
+}
+
+
+// Alternative input
+
+.form-control-alternative {
+ box-shadow: $input-alternative-box-shadow;
+ border: 0;
+ transition: box-shadow .15s ease;
+
+ &:focus {
+ box-shadow: $input-focus-alternative-box-shadow;
+ }
+}
+
+// Size variations: Fixes to the bootstrap defaults
+
+.form-control-lg {
+ font-size: $font-size-base;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/forms/_input-group.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/forms/_input-group.scss
new file mode 100644
index 0000000..1ab48cf
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/forms/_input-group.scss
@@ -0,0 +1,70 @@
+//
+// Input group
+//
+
+.input-group {
+ box-shadow: $input-box-shadow;
+ border-radius: $input-border-radius;
+ transition: $transition-base;
+
+ .form-control {
+ box-shadow: none;
+
+ &:not(:first-child) {
+ border-left: 0;
+ padding-left: 0;
+ }
+ &:not(:last-child) {
+ border-right: 0;
+ padding-right: 0;
+ }
+ &:focus {
+ box-shadow: none;
+ }
+ }
+}
+
+.input-group-text {
+ transition: $input-transition;
+}
+
+
+// Alternative input groups related to .form-control-alternative
+
+
+.input-group-alternative {
+ box-shadow: $input-alternative-box-shadow;
+ border: 0;
+ transition: box-shadow .15s ease;
+
+ .form-control,
+ .input-group-text {
+ border: 0;
+ box-shadow: none;
+ }
+}
+
+.focused {
+ .input-group-alternative {
+ box-shadow: $input-focus-alternative-box-shadow !important;
+ }
+}
+
+
+// .focus class is applied dinamycally from theme.js
+
+.focused {
+ .input-group {
+ box-shadow: $input-focus-box-shadow;
+ }
+
+ .input-group-text {
+ color: $input-group-addon-focus-color;
+ background-color: $input-group-addon-focus-bg;
+ border-color: $input-group-addon-focus-border-color;
+ }
+
+ .form-control {
+ border-color: $input-group-addon-focus-border-color;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/headers/_header.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/headers/_header.scss
new file mode 100644
index 0000000..3b0e9d2
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/headers/_header.scss
@@ -0,0 +1,7 @@
+//
+// Header
+//
+
+.header {
+ position: relative;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/icons/_icon-shape.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/icons/_icon-shape.scss
new file mode 100644
index 0000000..1747871
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/icons/_icon-shape.scss
@@ -0,0 +1,42 @@
+//
+// Icon shape
+//
+
+
+.icon-shape {
+ padding: 12px;
+ text-align: center;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+
+
+ i, svg {
+ font-size: 1.25rem;
+ }
+
+ &.icon-lg {
+ i, svg {
+ font-size: 1.625rem;
+ }
+ }
+
+ &.icon-sm {
+ i, svg {
+ font-size: .875rem;
+ }
+ }
+
+ svg {
+ width: 30px;
+ height: 30px;
+ }
+
+}
+
+@each $color, $value in $theme-colors {
+ .icon-shape-#{$color} {
+ @include icon-shape-variant(theme-color($color));
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/icons/_icon.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/icons/_icon.scss
new file mode 100644
index 0000000..f7ed0de
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/icons/_icon.scss
@@ -0,0 +1,65 @@
+//
+// Icon
+//
+
+.icon {
+ width: $icon-size;
+ height: $icon-size;
+
+ i, svg {
+ font-size: $icon-size - .75;
+ }
+
+ + .icon-text {
+ padding-left: 1rem;
+ width: calc(100% - #{$icon-size} - 1);
+ }
+}
+
+
+// Extra large icons
+
+.icon-xl {
+ width: $icon-size-xl;
+ height: $icon-size-xl;
+
+ i, svg {
+ font-size: $icon-size-xl - .75;
+ }
+
+ + .icon-text {
+ width: calc(100% - #{$icon-size-xl} - 1);
+ }
+}
+
+
+// Large icons
+
+.icon-lg {
+ width: $icon-size-lg;
+ height: $icon-size-lg;
+
+ i, svg {
+ font-size: $icon-size-lg - .75;
+ }
+
+ + .icon-text {
+ width: calc(100% - #{$icon-size-lg} - 1);
+ }
+}
+
+
+// Small icon
+
+.icon-sm {
+ width: $icon-size-sm;
+ height: $icon-size-sm;
+
+ i, svg {
+ font-size: $icon-size-sm - .75;
+ }
+
+ + .icon-text {
+ width: calc(100% - #{$icon-size-sm} - 1);
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/list-groups/_list-group.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/list-groups/_list-group.scss
new file mode 100644
index 0000000..0aa5cde
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/list-groups/_list-group.scss
@@ -0,0 +1,46 @@
+//
+// List group
+//
+
+
+// Space list items
+
+.list-group-space {
+ .list-group-item {
+ margin-bottom: 1.5rem;
+ @include border-radius($list-group-border-radius);
+ }
+}
+
+
+// Extended list group components
+
+.list-group-img {
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ vertical-align: top;
+ margin: -.1rem 1.2rem 0 -.2rem;
+}
+
+.list-group-content {
+ flex: 1;
+ min-width: 0;
+
+ > p {
+ color: $gray-500;
+ line-height: 1.5;
+ margin: .2rem 0 0;
+ }
+}
+
+.list-group-heading {
+ font-size: $font-size-base;
+ color: $gray-800;
+
+ > small {
+ float: right;
+ color: $gray-500;
+ font-weight: 500;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/maps/_map.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/maps/_map.scss
new file mode 100644
index 0000000..6c9cda7
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/maps/_map.scss
@@ -0,0 +1,10 @@
+//
+// Map
+//
+
+.map-canvas {
+ position: relative;
+ width: 100%;
+ height: $map-height;
+ border-radius: $border-radius;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/masks/_mask.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/masks/_mask.scss
new file mode 100644
index 0000000..9df8ba0
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/masks/_mask.scss
@@ -0,0 +1,12 @@
+//
+// Mask
+//
+
+.mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ @include transition($transition-base);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_alert.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_alert.scss
new file mode 100644
index 0000000..1dbe85b
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_alert.scss
@@ -0,0 +1,13 @@
+@mixin alert-variant($background, $border, $color) {
+ color: color-yiq($background);
+ @include gradient-bg($background);
+ border-color: $border;
+
+ hr {
+ border-top-color: darken($border, 5%);
+ }
+
+ .alert-link {
+ color: darken($color, 10%);
+ }
+}
\ No newline at end of file
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_background-variant.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_background-variant.scss
new file mode 100644
index 0000000..a0fa4ff
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_background-variant.scss
@@ -0,0 +1,30 @@
+// Contextual backgrounds
+@mixin bg-variant($parent, $color) {
+ #{$parent} {
+ background-color: $color !important;
+ }
+ a#{$parent},
+ button#{$parent} {
+ @include hover-focus {
+ background-color: darken($color, 10%) !important;
+ }
+ }
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+ #{$parent} {
+ background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
+ }
+}
+
+@mixin bg-translucent-variant($parent, $color) {
+ #{$parent} {
+ background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
+ }
+ a#{$parent},
+ button#{$parent} {
+ @include hover-focus {
+ background-color: darken(rgba($color, $translucent-color-opacity), 12%) !important;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_badge.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_badge.scss
new file mode 100644
index 0000000..f19044f
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_badge.scss
@@ -0,0 +1,12 @@
+@mixin badge-variant($bg) {
+ color: saturate(darken($bg, 10%), 10);
+ background-color: transparentize(lighten($bg, 25%), .5);
+
+ &[href] {
+ @include hover-focus {
+ color: color-yiq($bg);
+ text-decoration: none;
+ background-color: darken($bg, 10%);
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_buttons.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_buttons.scss
new file mode 100644
index 0000000..5cedd20
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_buttons.scss
@@ -0,0 +1,105 @@
+@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
+ color: color-yiq($background);
+ @include gradient-bg($background);
+ border-color: $border;
+ @include box-shadow($btn-box-shadow);
+
+ @include hover {
+ color: color-yiq($hover-background);
+ @include gradient-bg($hover-background);
+ border-color: $hover-border;
+ }
+
+ &:focus,
+ &.focus {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+ }
+ @else {
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+ }
+ } // Disabled comes first so active can properly restyle
+ &.disabled,
+ &:disabled {
+ color: color-yiq($background);
+ background-color: $background;
+ border-color: $border;
+ }
+
+ &:not(:disabled):not(.disabled):active,
+ &:not(:disabled):not(.disabled).active,
+ .show>&.dropdown-toggle {
+ color: color-yiq($active-background);
+ background-color: $active-background;
+ @if $enable-gradients {
+ background-image: none; // Remove the gradient for the pressed/active state
+ }
+ border-color: $active-border;
+
+ &:focus {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+ }
+ @else {
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+ }
+ }
+ }
+}
+
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+ color: $color;
+ background-color: transparent;
+ background-image: none;
+ border-color: $color;
+
+ &:hover {
+ color: $color-hover;
+ background-color: $active-background;
+ border-color: $active-border;
+ }
+
+ &:focus,
+ &.focus {
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+ }
+
+ &.disabled,
+ &:disabled {
+ color: $color;
+ background-color: transparent;
+ }
+
+ &:not(:disabled):not(.disabled):active,
+ &:not(:disabled):not(.disabled).active,
+ .show>&.dropdown-toggle {
+ color: color-yiq($active-background);
+ background-color: $active-background;
+ border-color: $active-border;
+
+ &:focus {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows and $btn-active-box-shadow !=none {
+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+ }
+ @else {
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+ }
+ }
+ }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+ padding: $padding-y $padding-x;
+ font-size: $font-size;
+ line-height: $line-height; // Manually declare to provide an override to the browser default
+ @if $enable-rounded {
+ border-radius: $border-radius;
+ }
+ @else {
+ border-radius: 0;
+ }
+}
\ No newline at end of file
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_forms.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_forms.scss
new file mode 100644
index 0000000..4740378
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_forms.scss
@@ -0,0 +1,128 @@
+@mixin form-control-focus() {
+ &:focus {
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
+ outline: 0;
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: $input-box-shadow, $input-focus-box-shadow;
+ } @else {
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+}
+
+
+@mixin form-validation-state($state, $color) {
+ .#{$state}-feedback {
+ display: none;
+ width: 100%;
+ margin-top: $form-feedback-margin-top;
+ font-size: $form-feedback-font-size;
+ color: $color;
+ }
+
+ .#{$state}-tooltip {
+ position: absolute;
+ top: 100%;
+ z-index: 5;
+ display: none;
+ max-width: 100%; // Contain to parent when possible
+ padding: .5rem;
+ margin-top: .1rem;
+ font-size: .875rem;
+ line-height: 1;
+ color: #fff;
+ background-color: rgba($color, .8);
+ border-radius: .2rem;
+ }
+
+ .form-control,
+ .custom-select {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ border-color: $color;
+
+ &:focus {
+ border-color: $color;
+ //box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ .form-check-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .form-check-label {
+ color: $color;
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ .custom-control-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .custom-control-label {
+ color: $color;
+
+ &::before {
+ background-color: lighten($color, 25%);
+ border-color: lighten($color, 25%);
+ }
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+
+ &:checked {
+ ~ .custom-control-label::before {
+ @include gradient-bg(lighten($color, 10%));
+ border-color: lighten($color, 25%);
+ }
+ }
+
+ &:focus {
+ ~ .custom-control-label::before {
+ box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
+ }
+ }
+ }
+ }
+
+ // custom file
+ .custom-file-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .custom-file-label {
+ border-color: $color;
+
+ &::before { border-color: inherit; }
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+
+ &:focus {
+ ~ .custom-file-label {
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ }
+ }
+ }
+ }
+}
+
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_icon.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_icon.scss
new file mode 100644
index 0000000..8819985
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_icon.scss
@@ -0,0 +1,4 @@
+@mixin icon-shape-variant($color) {
+ color: saturate(darken($color, 10%), 10);
+ background-color: transparentize(lighten($color, 10%), .5);
+}
\ No newline at end of file
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_modals.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_modals.scss
new file mode 100644
index 0000000..f912490
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_modals.scss
@@ -0,0 +1,23 @@
+@mixin modal-variant($background) {
+ .modal-title {
+ color: color-yiq($background);
+ }
+ .modal-header,
+ .modal-footer {
+ border-color: rgba(color-yiq($background), .075);
+ }
+ .modal-content {
+ background-color: $background;
+ color: color-yiq($background);
+
+ .heading {
+ color: color-yiq($background);
+ }
+ }
+
+ .close {
+ &>span:not(.sr-only) {
+ color: $white;
+ }
+ }
+}
\ No newline at end of file
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_popover.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_popover.scss
new file mode 100644
index 0000000..e535b53
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/mixins/_popover.scss
@@ -0,0 +1,36 @@
+@mixin popover-variant($background) {
+
+ background-color: $background;
+
+ .popover-header {
+ background-color: $background;
+ color: color-yiq($background);
+ }
+
+ .popover-body {
+ color: color-yiq($background);
+ }
+ .popover-header{
+ border-color: rgba(color-yiq($background), .2);
+ }
+ &.bs-popover-top {
+ .arrow::after {
+ border-top-color: $background;
+ }
+ }
+ &.bs-popover-right {
+ .arrow::after {
+ border-right-color: $background;
+ }
+ }
+ &.bs-popover-bottom {
+ .arrow::after {
+ border-bottom-color: $background;
+ }
+ }
+ &.bs-popover-left {
+ .arrow::after {
+ border-left-color: $background;
+ }
+ }
+}
\ No newline at end of file
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/modals/_modal.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/modals/_modal.scss
new file mode 100644
index 0000000..ed31d51
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/modals/_modal.scss
@@ -0,0 +1,25 @@
+//
+// Modal
+//
+
+
+// Fluid modal
+
+.modal-fluid {
+ .modal-dialog {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .modal-content {
+ border-radius: 0;
+ }
+}
+
+
+// Background color variations
+
+@each $color, $value in $theme-colors {
+ .modal-#{$color} {
+ @include modal-variant($value);
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-collapse.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-collapse.scss
new file mode 100644
index 0000000..ffd998a
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-collapse.scss
@@ -0,0 +1,125 @@
+//
+// Navabar collapse
+//
+
+// Collapse
+
+.navbar-collapse-header {
+ display: none;
+}
+
+@include media-breakpoint-down(sm) {
+ .navbar-nav {
+ .nav-link {
+ padding: .625rem 0;
+ color: theme-color("default") !important;
+ }
+
+ .dropdown-menu {
+ box-shadow: none;
+ min-width: auto;
+
+ .media {
+ svg {
+ width: 30px;
+ }
+ }
+ }
+ }
+
+ .navbar-collapse {
+ width: calc(100% - 1.4rem);
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1050;
+ margin: .7rem;
+ overflow-y: auto;
+ height: auto !important;
+ opacity: 0;
+
+ .navbar-toggler {
+ width: 20px;
+ height: 20px;
+ position: relative;
+ cursor: pointer;
+ display: inline-block;
+ padding: 0;
+
+ span {
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ border-radius: 2px;
+ opacity: 1;
+ background: #283448;
+ }
+
+ :nth-child(1) {
+ transform: rotate(135deg);
+ }
+
+ :nth-child(2) {
+ transform: rotate(-135deg);
+ }
+ }
+
+ .navbar-collapse-header {
+ display: block;
+ padding-bottom: 1rem;
+ margin-bottom: 1rem;
+ border-bottom: 1px solid rgba(0, 0, 0, .1);
+ }
+
+ .collapse-brand {
+ img {
+ height: 36px;
+ }
+ }
+
+ .collapse-close {
+ text-align: right;
+ }
+ }
+
+ .navbar-collapse.collapsing,
+ .navbar-collapse.show {
+ padding: 1.5rem;
+ border-radius: $border-radius;
+ background: #FFF;
+ box-shadow: 0 50px 100px rgba(50,50,93,.1),0 15px 35px rgba(50,50,93,.15),0 5px 15px rgba(0,0,0,.1);
+ animation: show-navbar-collapse .2s ease forwards;
+ }
+
+ .navbar-collapse.collapsing-out {
+ animation: hide-navbar-collapse .2s ease forwards;
+ }
+}
+
+@keyframes show-navbar-collapse {
+ 0% {
+ opacity: 0;
+ transform: scale(.95);
+ transform-origin: 100% 0;
+ }
+
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes hide-navbar-collapse {
+ from {
+ opacity: 1;
+ transform: scale(1);
+ transform-origin: 100% 0;
+ }
+
+ to {
+ opacity: 0;
+ transform: scale(.95);
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-dropdown.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-dropdown.scss
new file mode 100644
index 0000000..3db781c
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-dropdown.scss
@@ -0,0 +1,101 @@
+// Dropdown menu
+
+@include media-breakpoint-up(md) {
+ .navbar {
+ .dropdown-menu {
+ opacity: 0;
+ pointer-events: none;
+ margin: 0;
+ }
+
+ .dropdown-menu-arrow {
+ &:before {
+ background: $dropdown-bg;
+ box-shadow: none;
+ content: '';
+ display: block;
+ height: 12px;
+ width: 12px;
+ left: 20px;
+ position: absolute;
+ bottom: 100%;
+ transform: rotate(-45deg) translateY(12px);
+ z-index: -5;
+ border-radius: 2px;
+ }
+ }
+
+ .dropdown-menu-right {
+ &:before {
+ right: 20px;
+ left: auto;
+ }
+ }
+
+ &:not(.navbar-nav-hover) {
+ .dropdown-menu {
+ &.show {
+ opacity: 1;
+ pointer-events: auto;
+ animation: show-navbar-dropdown .25s ease forwards;
+ }
+
+ &.close {
+ display: block;
+ animation: hide-navbar-dropdown .15s ease backwards;
+ }
+ }
+ }
+
+ &.navbar-nav-hover {
+ .dropdown-menu {
+ opacity: 0;
+ display: block;
+ pointer-events: none;
+ transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
+ transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
+ }
+
+ .nav-item.dropdown:hover > .dropdown-menu {
+ display: block;
+ opacity: 1;
+ pointer-events: auto;
+ visibility: visible;
+ transform: translate(0, 0);
+ animation: none;
+ }
+ }
+
+ .dropdown-menu-inner {
+ position: relative;
+ padding: 1rem;
+ }
+
+
+ // Keyframes
+
+ @keyframes show-navbar-dropdown {
+ 0% {
+ opacity: 0;
+ transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
+ transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
+ }
+
+ 100% {
+ transform: translate(0, 0);
+ opacity: 1;
+ }
+ }
+
+ @keyframes hide-navbar-dropdown {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ transform: translate(0, 10px);
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-search.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-search.scss
new file mode 100644
index 0000000..d95a141
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-search.scss
@@ -0,0 +1,69 @@
+//
+// Navbar search
+//
+
+.navbar-search {
+ .input-group {
+ border-radius: $navbar-search-border-radius;
+ border: $navbar-search-border-width solid;
+ background-color: transparent;
+
+ .input-group-text {
+ background-color: transparent;
+ padding-left: 1rem;
+ }
+ }
+
+ .form-control {
+ width: $navbar-search-width;
+ background-color: transparent;
+ }
+}
+
+.navbar-search-dark {
+ .input-group {
+ border-color: $navbar-search-dark-border-color;
+ }
+
+ .input-group-text {
+ color: $navbar-search-dark-color;
+ }
+
+ .form-control {
+ color: $navbar-search-dark-focus-color;
+
+ &::placeholder {
+ color: $navbar-search-dark-color;
+ }
+ }
+
+ .focused {
+ .input-group {
+ border-color: $navbar-search-dark-focus-border-color;
+ }
+ }
+}
+
+.navbar-search-light {
+ .input-group {
+ border-color: $navbar-search-light-border-color;
+ }
+
+ .input-group-text {
+ color: $navbar-search-light-color;
+ }
+
+ .form-control {
+ color: $navbar-search-light-focus-color;
+
+ &::placeholder {
+ color: $navbar-search-light-color;
+ }
+ }
+
+ .focused {
+ .input-group {
+ border-color: $navbar-search-light-focus-border-color;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-vertical.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-vertical.scss
new file mode 100644
index 0000000..48e1fd7
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar-vertical.scss
@@ -0,0 +1,286 @@
+//
+// Vertical navbar
+//
+
+
+// Vertical
+//
+// Creates a vertically aligned version of the navbar
+.navbar-vertical {
+ box-shadow: $navbar-vertical-box-shadow;
+
+ .navbar {
+ border-width: 0 0 1px 0;
+ border-style: solid;
+ }
+
+
+ // Navbar light
+
+ .navbar-light {
+ background-color: $navbar-light-bg;
+ border-color: $navbar-light-border-color;
+ }
+
+
+ // Navbar brand
+
+ .navbar-brand {
+ margin-right: 0;
+ }
+
+ .navbar-brand-img,
+ .navbar-brand > img {
+ max-width: 100%;
+ max-height: 2rem;
+ }
+
+
+ // Navbar collapse
+
+ @include media-breakpoint-up(md) {
+ .navbar-collapse {
+ margin-left: -$navbar-padding-x;
+ margin-right: -$navbar-padding-x;
+ padding-left: $navbar-padding-x;
+ padding-right: $navbar-padding-x;
+
+ &:before {
+ content: '';
+ display: block;
+ margin: $navbar-padding-y (-$navbar-padding-x);
+ }
+ }
+ }
+
+
+
+ // Navbar navigaton
+
+ .navbar-nav {
+ margin-left: -$navbar-padding-x;
+ margin-right: -$navbar-padding-x;
+
+
+ // Navbar link
+
+ .nav-link {
+ padding-left: $navbar-padding-x;
+ padding-right: $navbar-padding-x;
+ font-size: $navbar-nav-link-font-size;
+
+ &.active {
+ position: relative;
+
+ &:before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: $nav-link-padding-y;
+ bottom: $nav-link-padding-y;
+ border-left: 2px solid $primary;
+ }
+ }
+
+
+ // Icon
+
+ > i {
+ min-width: $navbar-icon-min-width;
+ font-size: .9375rem;
+ line-height: ($font-size-base * $line-height-base);
+ }
+
+
+ // Dropdown
+
+ .dropdown-menu {
+ border: none;
+
+ .dropdown-menu {
+ margin-left: $dropdown-item-padding-x / 2;
+ }
+ }
+ }
+ }
+
+
+ // Navbar navigation
+ .navbar-nav .nav-link {
+ display: flex;
+ align-items: center;
+ }
+
+ .navbar-nav .nav-link[data-toggle="collapse"] {
+ &:after {
+ display: inline-block;
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ font-family: 'Font Awesome 5 Free';
+ font-weight: 700;
+ content: "\f105";
+ margin-left: auto;
+ color: $text-muted;
+ transition: $transition-base;
+ } // Expanded
+ &[aria-expanded="true"] {
+
+ &:after {
+ transform: rotate(90deg);
+ }
+ }
+ }
+
+ // Second level
+ .navbar-nav .nav .nav-link {
+ padding-left: $navbar-padding-x + $navbar-icon-min-width;
+ }
+
+ // Third level
+ .navbar-nav .nav .nav .nav-link {
+ padding-left: $navbar-padding-x * 1.5 + $navbar-icon-min-width;
+ }
+
+
+ // Navbar heading
+ .navbar-heading {
+ padding-top: $nav-link-padding-y;
+ padding-bottom: $nav-link-padding-y;
+ font-size: $font-size-xs;
+ text-transform: uppercase;
+ letter-spacing: .04em;
+ }
+
+
+ // Expanded navbar specific styles
+ &.navbar-expand {
+ @each $breakpoint,
+ $dimension in $grid-breakpoints {
+
+ &-#{$breakpoint} {
+ @include media-breakpoint-up(#{$breakpoint}) {
+ display: block;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ width: 100%;
+ max-width: $navbar-vertical-width;
+ padding-left: $navbar-vertical-padding-x;
+ padding-right: $navbar-vertical-padding-x;
+
+ overflow-y: auto;
+
+ // Container
+ >[class*="container"] {
+ flex-direction: column;
+ align-items: stretch;
+ min-height: 100%;
+ padding-left: 0;
+ padding-right: 0; // Target IE 10 & 11
+ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+ min-height: none;
+ height: 100%;
+ }
+ }
+
+
+ // Fixes the vertical navbar to the left
+ &.fixed-left {
+ left: 0;
+ border-width: 0 1px 0 0;
+ }
+
+
+ // Fixed the vertical navbar to the right
+ &.fixed-right {
+ right: 0;
+ border-width: 0 0 0 1px;
+ }
+
+
+ // Navbar collapse
+ .navbar-collapse {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ margin-left: -$navbar-vertical-padding-x;
+ margin-right: -$navbar-vertical-padding-x;
+ padding-left: $navbar-vertical-padding-x;
+ padding-right: $navbar-vertical-padding-x;
+
+ > * {
+ min-width: 100%;
+ }
+ }
+
+
+ // Navbar navigation
+ .navbar-nav {
+ flex-direction: column;
+ margin-left: -$navbar-vertical-padding-x;
+ margin-right: -$navbar-vertical-padding-x;
+ }
+
+ .navbar-nav .nav-link {
+ padding: $navbar-vertical-nav-link-padding-y $navbar-vertical-nav-link-padding-x;
+
+ &.active {
+ &:before {
+ top: $nav-link-padding-y;
+ bottom: $nav-link-padding-y;
+ left: 0;
+ right: auto;
+ border-left: 2px solid $primary;
+ border-bottom: 0;
+ }
+ }
+ }
+
+
+ // Second level
+ .navbar-nav .nav .nav-link {
+ padding-left: $navbar-vertical-padding-x + $navbar-icon-min-width;
+ }
+
+
+ // Third level
+ .navbar-nav .nav .nav .nav-link {
+ padding-left: $navbar-vertical-padding-x * 1.5 + $navbar-icon-min-width;
+ }
+
+ // Navbar brand
+ .navbar-brand {
+ display: block;
+ text-align: center;
+ padding-top: (2rem - $navbar-padding-y);
+ padding-bottom: (2rem - $navbar-padding-y);
+ }
+
+ .navbar-brand-img {
+ max-height: 2.5rem;
+ }
+
+ // Navbar user
+ .navbar-user {
+ margin-left: -$navbar-vertical-padding-x;
+ margin-right: -$navbar-vertical-padding-x;
+ padding-top: $spacer;
+ padding-bottom: $spacer - $navbar-padding-y;
+ padding-left: $navbar-vertical-padding-x;
+ padding-right: $navbar-vertical-padding-x;
+ border-top: 1px solid $border-color;
+
+ // Dropup menu
+ .dropup .dropdown-menu {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar.scss
new file mode 100644
index 0000000..a2390b3
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/navbars/_navbar.scss
@@ -0,0 +1,153 @@
+//
+// Navbar
+//
+
+
+// Navbar links
+
+.navbar-horizontal {
+ .navbar-nav {
+ .nav-link {
+ font-size: $navbar-nav-link-font-size;
+ font-weight: $navbar-nav-link-font-weight;
+ text-transform: $navbar-nav-link-text-transform;
+ letter-spacing: $navbar-nav-link-letter-spacing;
+ @include transition($navbar-transition);
+
+ .nav-link-inner--text {
+ margin-left: .25rem;
+ }
+ }
+ }
+
+
+ // Navbar brand (logo)
+
+ .navbar-brand {
+ font-size: $font-size-sm;
+ font-weight: 600;
+ text-transform: uppercase;
+ font-size: .875rem;
+ letter-spacing: .05px;
+
+ img {
+ height: 30px;
+ }
+ }
+
+ .navbar-dark {
+ .navbar-brand {
+ color: $white;
+ }
+ }
+
+ .navbar-light {
+ .navbar-brand {
+ color: $gray-800;
+ }
+ }
+
+ .navbar-nav {
+ .nav-item {
+ .media:not(:last-child){
+ margin-bottom: 1.5rem;
+ }
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ .navbar-nav {
+ .nav-item {
+ margin-right: .5rem;
+
+ [data-toggle="dropdown"]::after {
+ transition: $transition-base;
+ }
+
+ &.show {
+ [data-toggle="dropdown"]::after {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ .nav-link {
+ padding-top: $navbar-nav-link-padding-y;
+ padding-bottom: $navbar-nav-link-padding-y;
+ border-radius: $navbar-nav-link-border-radius;
+
+ i {
+ margin-right: .625rem;
+ }
+ }
+
+ .nav-link-icon {
+ padding-left: .5rem !important;
+ padding-right: .5rem !important;
+ font-size: 1rem;
+ border-radius: $navbar-nav-link-border-radius;
+
+ i {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+
+
+ // Transparent navbar
+
+ .navbar-transparent {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ z-index: 100;
+ background-color: transparent;
+ border: 0;
+ box-shadow: none;
+
+ .navbar-brand {
+ color: rgba(255, 255, 255, 1);
+ }
+
+ .navbar-toggler {
+ color: rgba(255, 255, 255, 1);
+ }
+
+ .navbar-toggler-icon {
+ background-image: $navbar-dark-toggler-icon-bg;
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ .navbar-transparent {
+ .navbar-nav {
+ .nav-link {
+ color: $navbar-dark-color;
+
+ @include hover-focus {
+ color: $navbar-dark-hover-color;
+ }
+
+ &.disabled {
+ color: $navbar-dark-disabled-color;
+ }
+ }
+
+ .show > .nav-link,
+ .active > .nav-link,
+ .nav-link.show,
+ .nav-link.active {
+ color: $navbar-dark-active-color;
+ }
+ }
+
+ .navbar-brand {
+ color: $navbar-dark-color;
+
+ @include hover-focus {
+ color: $navbar-dark-color;
+ }
+ }
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/navs/_nav-pills.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/navs/_nav-pills.scss
new file mode 100644
index 0000000..9fe2a37
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/navs/_nav-pills.scss
@@ -0,0 +1,66 @@
+//
+// Nav pills
+//
+
+
+// General styles
+
+.nav-pills {
+ .nav-item:not(:last-child) {
+ padding-right: $nav-pills-space-x;
+ }
+
+ .nav-link {
+ padding: $nav-pills-padding-y $nav-pills-padding-x;
+ color: $nav-pills-link-color;
+ font-weight: 500;
+ font-size: $font-size-sm;
+ box-shadow: $nav-pills-box-shadow;
+ background-color: $nav-pills-bg;
+ transition: $transition-base;
+
+ &:hover {
+ color: $nav-pills-link-hover-color;
+ }
+ }
+
+ .nav-link.active,
+ .show > .nav-link {
+ color: $nav-pills-link-active-color;
+ background-color: $nav-pills-link-active-bg;
+ }
+
+ @include media-breakpoint-down(xs) {
+ .nav-item {
+ margin-bottom: $spacer;
+ }
+ }
+}
+
+@include media-breakpoint-down(sm) {
+ .nav-pills:not(.nav-pills-circle) {
+ .nav-item {
+ padding-right: 0;
+ }
+ }
+}
+
+
+// Rounded circle nav pills
+
+.nav-pills-circle {
+ .nav-link {
+ text-align: center;
+ height: 60px;
+ width: 60px;
+ padding: 0;
+ line-height: 60px;
+ border-radius: 50%;
+ }
+
+ .nav-link-icon {
+ i, svg {
+ font-size: 1rem;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/navs/_nav.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/navs/_nav.scss
new file mode 100644
index 0000000..18fc418
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/navs/_nav.scss
@@ -0,0 +1,42 @@
+//
+// Nav
+//
+
+
+// Nav wrapper (container)
+
+// Nav wrapper
+.nav-wrapper {
+ padding: 1rem 0;
+ @include border-top-radius($card-border-radius);
+
+ + .card {
+ @include border-top-radius(0);
+ @include border-bottom-radius($card-border-radius);
+ }
+}
+
+
+// Nav links
+
+.nav-link {
+ color: $nav-link-color;
+
+ &:hover {
+ color: $nav-link-hover-color;
+ }
+
+ i.ni {
+ position: relative;
+ top: 2px;
+ }
+}
+
+@media (min-width: 992px){
+ .nav-item.active-pro {
+ position: absolute;
+ width: 100%;
+ bottom: 10px;
+ background: $table-head-bg;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/paginations/_pagination.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/paginations/_pagination.scss
new file mode 100644
index 0000000..02f7627
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/paginations/_pagination.scss
@@ -0,0 +1,48 @@
+//
+// Pagination
+//
+
+
+.page-item {
+ &.active .page-link {
+ box-shadow: $pagination-active-box-shadow;
+ }
+
+ .page-link,
+ span {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ margin: 0 3px;
+ border-radius: 50% !important;
+ width: 36px;
+ height: 36px;
+ font-size: $font-size-sm;
+ }
+}
+
+
+// Size variations
+
+.pagination-lg {
+ .page-item {
+ .page-link,
+ span {
+ width: 46px;
+ height: 46px;
+ line-height: 46px;
+ }
+ }
+}
+
+.pagination-sm {
+ .page-item {
+ .page-link,
+ span {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/popovers/_popover.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/popovers/_popover.scss
new file mode 100644
index 0000000..52cedec
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/popovers/_popover.scss
@@ -0,0 +1,21 @@
+//
+// Popover
+//
+
+
+.popover {
+ border: 0;
+}
+
+.popover-header {
+ font-weight: $font-weight-bold;
+}
+
+
+// Alternative colors
+
+@each $color, $value in $theme-colors {
+ .popover-#{$color} {
+ @include popover-variant($value);
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/progresses/_progress.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/progresses/_progress.scss
new file mode 100644
index 0000000..70a5043
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/progresses/_progress.scss
@@ -0,0 +1,79 @@
+//
+// Progress
+//
+
+
+// Progress container
+
+.progress-wrapper {
+ position: relative;
+ padding-top: 1.5rem;
+}
+
+
+// General styles
+
+.progress {
+ height: 8px;
+ margin-bottom: $spacer;
+ overflow: hidden;
+ border-radius: $border-radius-sm;
+ background-color: $progress-bg;
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+
+ .sr-only {
+ width: auto;
+ height: 20px;
+ margin: 0 0 0 30px;
+ left: 0;
+ clip: auto;
+ line-height: 20px;
+ font-size: 13px;
+ }
+}
+
+
+// Progress inner elements
+
+.progress-heading {
+ font-size: 14px;
+ font-weight: 500;
+ margin: 0 0 2px;
+ padding: 0;
+}
+
+.progress-bar {
+ box-shadow: none;
+ border-radius: 0;
+ height: auto;
+}
+
+.progress-info{
+ margin-bottom: .5rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.progress-label {
+ span {
+ display: inline-block;
+ color: $primary;
+ font-size: .625rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ background: rgba($primary, .1);
+ padding: .25rem 1rem;
+ border-radius: 30px;
+ }
+}
+
+.progress-percentage {
+ text-align: right;
+ span {
+ display: inline-block;
+ color: $gray-600;
+ font-size: .875rem;
+ font-weight: 600;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/separators/_separator.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/separators/_separator.scss
new file mode 100644
index 0000000..4808dfb
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/separators/_separator.scss
@@ -0,0 +1,54 @@
+//
+// Separator
+// add svg on top or bottom of a section for a more stylish visual
+//
+
+
+.separator {
+ position: absolute;
+ top: auto;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 150px;
+ transform: translateZ(0);
+ overflow: hidden;
+ pointer-events: none;
+
+ svg {
+ position: absolute;
+ pointer-events: none;
+ }
+}
+
+.separator-top {
+ top: 0;
+ bottom: auto;
+
+ svg {
+ top: 0;
+ }
+}
+
+.separator-bottom {
+ top: auto;
+ bottom: 0;
+
+ svg {
+ bottom: 0;
+ }
+}
+
+.separator-inverse {
+ transform: rotate(180deg);
+}
+
+// Styles
+
+.separator-skew {
+ height: 60px;
+
+ @include media-breakpoint-up(xl) {
+ height: 70px;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/tables/_table.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/tables/_table.scss
new file mode 100644
index 0000000..18475b5
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/tables/_table.scss
@@ -0,0 +1,118 @@
+//
+// Table
+//
+
+
+// General styles
+
+.table {
+ thead th {
+ padding-top: $table-head-spacer-y;
+ padding-bottom: $table-head-spacer-y;
+ font-size: $table-head-font-size;
+ text-transform: $table-head-text-transform;
+ letter-spacing: $table-head-letter-spacing;
+ border-bottom: $table-border-width solid $table-border-color;
+ }
+
+ th {
+ font-weight: $table-head-font-weight;
+ }
+
+ td {
+ .progress {
+ height: 3px;
+ width: 120px;
+ margin: 0;
+ }
+ }
+
+ td,
+ th {
+ font-size: $table-body-font-size;
+ white-space: nowrap;
+ }
+
+
+ // Vetical align table content
+
+ &.align-items-center {
+ td,
+ th {
+ vertical-align: middle;
+ }
+ }
+
+
+ // Styles for dark table
+
+ .thead-dark {
+ th {
+ background-color: $table-dark-head-bg;
+ color: $table-dark-head-color;
+ }
+ }
+
+
+ // Styles for light table
+
+ .thead-light {
+ th {
+ background-color: $table-head-bg;
+ color: $table-head-color;
+ }
+ }
+}
+
+
+// Add transition for hover state
+
+.table-hover {
+ tr {
+ @include transition($transition-base);
+ }
+}
+
+
+// Flush tables
+
+.table-flush {
+ td,
+ th {
+ border-left: 0;
+ border-right: 0;
+ }
+
+ tbody {
+ tr {
+ &:first-child {
+ td,
+ th {
+ border-top: 0;
+ }
+ }
+
+ &:last-child {
+ td,
+ th {
+ border-bottom: 0;
+ }
+ }
+ }
+ }
+}
+
+
+// Tables inside cards
+
+.card {
+ .table {
+ margin-bottom: 0;
+
+ td,
+ th {
+ padding-left: $card-spacer-x;
+ padding-right: $card-spacer-x;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/type/_article.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/type/_article.scss
new file mode 100644
index 0000000..47ac1c7
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/type/_article.scss
@@ -0,0 +1,22 @@
+//
+// Article
+//
+
+article {
+ h4:not(:first-child),
+ h5:not(:first-child) {
+ margin-top: 3rem;
+ }
+
+ h4, h5 {
+ margin-bottom: 1.5rem;
+ }
+
+ figure {
+ margin: 3rem 0;
+ }
+
+ h5 + figure {
+ margin-top: 0;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/type/_display.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/type/_display.scss
new file mode 100644
index 0000000..c0b1ec5
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/type/_display.scss
@@ -0,0 +1,14 @@
+//
+// Display
+//
+
+
+.display-1,
+.display-2,
+.display-3,
+.display-4 {
+ span {
+ display: block;
+ font-weight: $font-weight-light;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/type/_heading.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/type/_heading.scss
new file mode 100644
index 0000000..eb028b7
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/type/_heading.scss
@@ -0,0 +1,52 @@
+//
+// Heading
+//
+
+
+// General styles
+
+.heading {
+ letter-spacing: $heading-letter-spacing;
+ font-size: $heading-font-size;
+ text-transform: $heading-text-transform;
+ font-weight: $heading-font-weight;
+}
+
+
+// Heading variations
+
+.heading-small {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+ font-size: .75rem;
+ text-transform: uppercase;
+ letter-spacing: .04em;
+}
+
+.heading-title {
+ letter-spacing: $heading-title-letter-spacing;
+ font-size: $heading-title-font-size;
+ font-weight: $heading-title-font-weight;
+ text-transform: $heading-title-text-transform;
+}
+
+.heading-section {
+ letter-spacing: $heading-section-letter-spacing;
+ font-size: $heading-section-font-size;
+ font-weight: $heading-section-font-weight;
+ text-transform: $heading-section-text-transform;
+
+ img {
+ display: block;
+ width: 72px;
+ height: 72px;
+ margin-bottom: 1.5rem;
+ }
+
+ &.text-center {
+ img {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/type/_type.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/type/_type.scss
new file mode 100644
index 0000000..6512a7f
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/type/_type.scss
@@ -0,0 +1,27 @@
+//
+// Type
+//
+
+
+// Paragraphs
+
+p {
+ font-size: $paragraph-font-size;
+ font-weight: $paragraph-font-weight;
+ line-height: $paragraph-line-height;
+}
+
+.lead {
+ font-size: $lead-font-size;
+ font-weight: $lead-font-weight;
+ line-height: $paragraph-line-height;
+ margin-top: 1.5rem;
+
+ + .btn-wrapper {
+ margin-top: 3rem;
+ }
+}
+
+.description {
+ font-size: $font-size-sm;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_backgrounds.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_backgrounds.scss
new file mode 100644
index 0000000..24592cd
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_backgrounds.scss
@@ -0,0 +1,51 @@
+//
+// Backgrounds
+//
+
+
+@each $color, $value in $colors {
+ @include bg-variant(".bg-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+ @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+@each $color, $value in $colors {
+ @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+
+// Background colors with transparency
+
+@each $color, $value in $theme-colors {
+ @include bg-translucent-variant(".bg-translucent-#{$color}", $value);
+}
+
+
+// Sections backgrounds
+
+@each $color, $value in $section-colors {
+ @include bg-variant(".section-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+ @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+
+// Shape (svg) fill colors
+
+@each $color, $value in $theme-colors {
+ .fill-#{$color} {
+ fill: $value;
+ }
+
+ .stroke-#{$color} {
+ stroke: $value;
+ }
+}
+
+.fill-opacity-8 {
+ fill-opacity: .8;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_blurable.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_blurable.scss
new file mode 100644
index 0000000..a558c0d
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_blurable.scss
@@ -0,0 +1,37 @@
+//
+// Blurable
+// add a blue effect on hover on any element with .blur--hover class
+//
+
+.blur--hover {
+ position: relative;
+
+ .blur-item {
+ transition: 1s cubic-bezier(.19,1,.22,1);
+ will-change: transform;
+ filter: blur(0);
+ opacity: 1;
+ }
+
+ .blur-hidden {
+ position: absolute;
+ top: calc(50% + 7px);
+ left: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0;
+ transition: $transition-base;
+ z-index: 100;
+ }
+ &:hover {
+ .blur-item {
+ opacity: .8;
+ filter: blur(10px);
+ transform: scale(.95);
+ z-index: 1;
+ }
+ .blur-hidden {
+ opacity: 1;
+ top: 50%;
+ }
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_floating.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_floating.scss
new file mode 100644
index 0000000..eaa90fc
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_floating.scss
@@ -0,0 +1,64 @@
+//
+// Floating
+// floating animation utility class
+//
+
+
+.floating {
+ animation: floating 3s ease infinite;
+ will-change: transform;
+
+ &:hover {
+ animation-play-state: paused;
+ }
+}
+
+
+// Size variations
+
+.floating-lg {
+ animation: floating-lg 3s ease infinite;
+}
+
+.floating-sm {
+ animation: floating-sm 3s ease infinite;
+}
+
+
+// Keyframes
+
+@keyframes floating-lg {
+ 0% {
+ transform: translateY(0px)
+ }
+ 50% {
+ transform: translateY(15px)
+ }
+ 100% {
+ transform: translateY(0px)
+ }
+}
+
+@keyframes floating {
+ 0% {
+ transform: translateY(0px)
+ }
+ 50% {
+ transform: translateY(10px)
+ }
+ 100% {
+ transform: translateY(0px)
+ }
+}
+
+@keyframes floating-sm {
+ 0% {
+ transform: translateY(0px)
+ }
+ 50% {
+ transform: translateY(5px)
+ }
+ 100% {
+ transform: translateY(0px)
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_helper.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_helper.scss
new file mode 100644
index 0000000..013bd28
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_helper.scss
@@ -0,0 +1,18 @@
+//
+// Helper
+// helper classes for different cases
+//
+
+
+// Clearfix for sections that use float property
+
+.floatfix {
+ &:before,
+ &:after {
+ content: '';
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_image.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_image.scss
new file mode 100644
index 0000000..8bdfbbc
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_image.scss
@@ -0,0 +1,9 @@
+//
+// Image
+//
+
+.img-center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_opacity.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_opacity.scss
new file mode 100644
index 0000000..812bfd8
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_opacity.scss
@@ -0,0 +1,35 @@
+//
+// Opacity
+// modify the transparency of an element with this quick modifier classes
+//
+
+.opacity-1 {
+ opacity: .1 !important;
+}
+.opacity-2 {
+ opacity: .2 !important;
+}
+.opacity-3 {
+ opacity: .3 !important;
+}
+.opacity-4 {
+ opacity: .4 !important;
+}
+.opacity-5 {
+ opacity: .5 !important;
+}
+.opacity-6 {
+ opacity: .6 !important;
+}
+.opacity-7 {
+ opacity: .7 !important;
+}
+.opacity-8 {
+ opacity: .8 !important;
+}
+.opacity-8 {
+ opacity: .9 !important;
+}
+.opacity-10 {
+ opacity: 1 !important;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_overflow.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_overflow.scss
new file mode 100644
index 0000000..b4063fc
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_overflow.scss
@@ -0,0 +1,11 @@
+//
+// Overflow
+//
+
+.overflow-visible {
+ overflow: visible !important;
+}
+
+.overflow-hidden {
+ overflow: hidden !important;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_position.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_position.scss
new file mode 100644
index 0000000..58aaa09
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_position.scss
@@ -0,0 +1,25 @@
+//
+// Position
+// modifier classes to be applied on an abosolute positioned element
+// use it next to .position-absolute class
+//
+
+@each $size, $value in $spacers {
+ .top-#{$size} {
+ top: $value;
+ }
+ .right-#{$size} {
+ right: $value;
+ }
+ .bottom-#{$size} {
+ bottom: $value;
+ }
+ .left-#{$size} {
+ left: $value;
+ }
+}
+
+.center {
+ left: 50%;
+ transform: translateX(-50%);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_shadows.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_shadows.scss
new file mode 100644
index 0000000..8907c8b
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_shadows.scss
@@ -0,0 +1,28 @@
+//
+// Shadows
+//
+
+// General styles
+[class*="shadow"] {
+ @if $enable-transitions {
+ transition: $transition-base;
+ }
+}
+
+
+// Size variations
+.shadow-sm--hover:hover {
+ box-shadow: $box-shadow-sm !important;
+}
+
+.shadow--hover:hover {
+ box-shadow: $box-shadow !important;
+}
+
+.shadow-lg--hover:hover {
+ box-shadow: $box-shadow-lg !important;
+}
+
+.shadow-none--hover:hover {
+ box-shadow: none !important;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_sizing.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_sizing.scss
new file mode 100644
index 0000000..5dd6b21
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_sizing.scss
@@ -0,0 +1,7 @@
+//
+// Height
+//
+
+.h-100vh {
+ height: 100vh !important;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_spacing.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_spacing.scss
new file mode 100644
index 0000000..b3fb9fa
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_spacing.scss
@@ -0,0 +1,107 @@
+//
+// Spacing
+//
+
+.row.row-grid > [class*="col-"] + [class*="col-"] {
+ margin-top: 3rem;
+}
+
+@include media-breakpoint-up(lg) {
+ .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] {
+ margin-top: 0;
+ }
+}
+@include media-breakpoint-up(md) {
+ .row.row-grid > [class*="col-md-"] + [class*="col-md-"] {
+ margin-top: 0;
+ }
+}
+@include media-breakpoint-up(sm) {
+ .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] {
+ margin-top: 0;
+ }
+}
+
+.row-grid + .row-grid {
+ margin-top: 3rem;
+}
+
+
+// Negative margins and paddings
+
+@media(min-width: 992px) {
+ [class*="mt--"],
+ [class*="mr--"],
+ [class*="mb--"],
+ [class*="ml--"] {
+
+ }
+
+
+ // Large negative margins in pixels
+
+ .mt--100 {
+ margin-top: -100px !important;
+ }
+ .mr--100 {
+ margin-right: -100px !important;
+ }
+ .mb--100 {
+ margin-bottom: -100px !important;
+ }
+ .ml--100 {
+ margin-left: -100px !important;
+ }
+ .mt--150 {
+ margin-top: -150px !important;
+ }
+ .mb--150 {
+ margin-bottom: -150px !important;
+ }
+ .mt--200 {
+ margin-top: -200px !important;
+ }
+ .mb--200 {
+ margin-bottom: -200px !important;
+ }
+ .mt--300 {
+ margin-top: -300px !important;
+ }
+ .mb--300 {
+ margin-bottom: -300px !important;
+ }
+
+
+ // Large margins in pixels
+
+ .pt-100 {
+ padding-top: 100px !important;
+ }
+ .pb-100 {
+ padding-bottom: 100px !important;
+ }
+ .pt-150 {
+ padding-top: 150px !important;
+ }
+ .pb-150 {
+ padding-bottom: 150px !important;
+ }
+ .pt-200 {
+ padding-top: 200px !important;
+ }
+ .pb-200 {
+ padding-bottom: 200px !important;
+ }
+ .pt-250 {
+ padding-top: 250px !important;
+ }
+ .pb-250 {
+ padding-bottom: 250px !important;
+ }
+ .pt-300 {
+ padding-top: 300px!important;
+ }
+ .pb-300 {
+ padding-bottom: 300px!important;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_text.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_text.scss
new file mode 100644
index 0000000..65c1f6c
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_text.scss
@@ -0,0 +1,49 @@
+// Weight and italics
+
+.font-weight-300 { font-weight: 300 !important; }
+.font-weight-400 { font-weight: 400 !important; }
+.font-weight-500 { font-weight: 500 !important; }
+.font-weight-600 { font-weight: 600 !important; }
+.font-weight-700 { font-weight: 700 !important; }
+.font-weight-800 { font-weight: 800 !important; }
+.font-weight-900 { font-weight: 900 !important; }
+
+
+// Text decorations
+
+.text-underline { text-decoration: underline; }
+.text-through { text-decoration: line-through; }
+
+
+// Text size
+
+.text-xs { font-size: $font-size-xs !important; }
+.text-sm { font-size: $font-size-sm !important; }
+.text-lg { font-size: $font-size-lg !important; }
+.text-xl { font-size: $font-size-xl !important; }
+
+
+// Line heights
+
+.lh-100 { line-height: 1; }
+.lh-110 { line-height: 1.1; }
+.lh-120 { line-height: 1.2; }
+.lh-130 { line-height: 1.3; }
+.lh-140 { line-height: 1.4; }
+.lh-150 { line-height: 1.5; }
+.lh-160 { line-height: 1.6; }
+.lh-170 { line-height: 1.7; }
+.lh-180 { line-height: 1.8; }
+
+
+// Letter spacings
+
+.ls-1 { letter-spacing: .0625rem; }
+.ls-15 { letter-spacing: .09375rem; }
+.ls-2 { letter-spacing: 0.125rem; }
+
+// Color variations
+
+@each $color, $value in $colors {
+ @include text-emphasis-variant(".text-#{$color}", $value);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_transform.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_transform.scss
new file mode 100644
index 0000000..e595bf8
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/utilities/_transform.scss
@@ -0,0 +1,13 @@
+//
+// Tranform
+//
+
+
+@include media-breakpoint-up(lg) {
+ .transform-perspective-right {
+ transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);
+ }
+ .transform-perspective-left{
+ transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg)
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_bootstrap-datepicker.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_bootstrap-datepicker.scss
new file mode 100644
index 0000000..493f80b
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_bootstrap-datepicker.scss
@@ -0,0 +1,279 @@
+//
+// Bootstrap datepicker
+//
+
+
+.datepicker {
+ border-radius: $datepicker-border-radius;
+
+ &-inline {
+ width: 220px;
+ }
+
+ direction: ltr;
+
+ &-rtl {
+ direction: rtl;
+ &.dropdown-menu {
+ left: auto;
+ }
+ table tr td span {
+ float: right;
+ }
+ }
+
+ &-dropdown {
+ top: 0;
+ left: 0;
+ padding: $datepicker-dropdown-padding;
+ @include box-shadow($dropdown-box-shadow);
+
+ &.datepicker-orient-left:before {
+ left: 6px;
+ }
+ &.datepicker-orient-left:after {
+ left: 7px;
+ }
+ &.datepicker-orient-right:before {
+ right: 6px;
+ }
+ &.datepicker-orient-right:after {
+ right: 7px;
+ }
+ &.datepicker-orient-bottom:before {
+ top: -7px;
+ }
+ &.datepicker-orient-bottom:after {
+ top: -6px;
+ }
+
+ &.datepicker-orient-top:before {
+ bottom: -7px;
+ border-bottom: 0;
+ border-top: 7px solid $datepicker-dropdown-border;
+ }
+
+ &.datepicker-orient-top:after {
+ bottom: -6px;
+ border-bottom: 0;
+ border-top: 6px solid $datepicker-dropdown-bg;
+ }
+ }
+
+ table {
+ margin: 0;
+ -webkit-touch-callout: none;
+ user-select: none;
+
+ tr {
+ td {
+ border-radius: $datepicker-cell-border-radius;
+ }
+
+ th {
+ border-radius: $datepicker-header-cell-border-radius;
+ font-weight: 500;
+ }
+
+ td,
+ th {
+ transition: $datepicker-cell-transition;
+ width: $datepicker-cell-width;
+ height: $datepicker-cell-height;
+ border: none;
+ text-align: center;
+ font-size: $font-size-sm;
+ }
+ }
+ }
+
+ // Inline display inside a table presents some problems with
+ // border and background colors.
+ .table-striped & table tr {
+ td,
+ th {
+ background-color: transparent;
+ }
+ }
+
+ table tr td {
+ &.old,
+ &.new {
+ color: $datepicker-disabled-old-new-color;
+ }
+
+ &.day:hover,
+ &.focused {
+ background: $datepicker-cell-hover-background;
+ cursor: pointer;
+ }
+
+ &.disabled,
+ &.disabled:hover {
+ background: none;
+ color: $datepicker-disabled-cell-color;
+ cursor: default;
+ }
+
+ &.highlighted {
+ border-radius: 0;
+
+ &.focused {
+ background: $datepicker-highlighted-bg
+ }
+
+ &.disabled,
+ &.disabled:active {
+ background: $datepicker-highlighted-bg;
+ color: $gray-400;
+ }
+ }
+
+ &.today {
+ background: lighten($datepicker-active-background, 45%);
+ &.focused {
+ background: lighten($gray-400, 58%);
+ }
+
+ &.disabled,
+ &.disabled:active {
+ background: lighten($gray-400, 58%);
+ color: $btn-link-disabled-color;
+ }
+ }
+
+ // Range selection
+ &.range {
+ background: $datepicker-range-background;
+ color: $datepicker-range-color;
+ border-radius: 0;
+
+ &.focused {
+ background: darken($datepicker-range-cell-focused-background, 3%);
+ }
+
+ &.disabled,
+ &.disabled:active,
+ &.day.disabled:hover {
+ background: darken($datepicker-active-background, 10%);
+ color: lighten($datepicker-active-background, 10%);
+ }
+ }
+
+ &.range.highlighted {
+ &.focused {
+ background: darken($datepicker-range-highlighted-bg, 10%);
+ }
+
+ &.disabled,
+ &.disabled:active {
+ background: $datepicker-range-highlighted-bg;
+ color: $datepicker-disabled-cell-color;
+ }
+ }
+
+ &.range.today {
+ &.disabled,
+ &.disabled:active {
+ background: $blue;
+ color: $white;
+ }
+ }
+
+ &.day.range-start {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &.day.range-end {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ &.day.range-start.range-end {
+ border-radius: $datepicker-cell-border-radius;
+ }
+
+ &.selected,
+ &.selected.highlighted,
+ &.selected:hover,
+ &.selected.highlighted:hover,
+ &.day.range:hover {
+ background: $datepicker-active-background;
+ color: $datepicker-active-color;
+ }
+
+ &.active,
+ &.active.highlighted,
+ &.active:hover,
+ &.active.highlighted:hover {
+ background: $datepicker-active-background;
+ color: $datepicker-active-color;
+ box-shadow: $datepicker-active-box-shadow;
+ }
+
+ span {
+ display: block;
+ width: 23%;
+ height: 54px;
+ line-height: 54px;
+ float: left;
+ margin: 1%;
+ cursor: pointer;
+ border-radius: 4px;
+
+ &:hover,
+ &.focused {
+ background: $gray-200;
+ }
+
+ &.disabled,
+ &.disabled:hover {
+ background: none;
+ color: $datepicker-disabled-cell-color;
+ cursor: default;
+ }
+
+ &.active,
+ &.active:hover,
+ &.active.disabled,
+ &.active.disabled:hover {
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+ }
+
+ &.old,
+ &.new {
+ color: $btn-link-disabled-color;
+ }
+ }
+ }
+
+ .datepicker-switch {
+ width: 145px;
+ }
+
+ .datepicker-switch,
+ .prev,
+ .next,
+ tfoot tr th {
+ cursor: pointer;
+ &:hover {
+ background: $gray-200;
+ }
+ }
+
+ .prev,
+ .next {
+ &.disabled {
+ visibility: hidden;
+ }
+ }
+
+ // Basic styling for calendar-week cells
+ .cw {
+ font-size: 10px;
+ width: 12px;
+ padding: 0 2px 0 5px;
+ vertical-align: middle;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_headroom.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_headroom.scss
new file mode 100644
index 0000000..3542e4a
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_headroom.scss
@@ -0,0 +1,25 @@
+//
+// Headroom
+//
+
+
+.headroom {
+ will-change: transform;
+ background-color: inherit;
+ @include transition($transition-base);
+}
+.headroom--pinned {
+ @extend .position-fixed;
+ transform: translateY(0%);
+}
+.headroom--unpinned {
+ @extend .position-fixed;
+ transform: translateY(-100%);
+}
+
+.headroom--not-top {
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+ background-color: theme-color("default") !important;
+ box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_nouislider.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_nouislider.scss
new file mode 100644
index 0000000..18efbca
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_nouislider.scss
@@ -0,0 +1,425 @@
+/*! nouislider - 14.0.1 - 6/21/2019 */
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+.noUi-target,
+.noUi-target * {
+ -webkit-touch-callout: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -webkit-user-select: none;
+ -ms-touch-action: none;
+ touch-action: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.noUi-target {
+ position: relative;
+ direction: ltr;
+}
+.noUi-base,
+.noUi-connects {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 1;
+}
+/* Wrapper for all connect elements.
+ */
+.noUi-connects {
+ overflow: hidden;
+ z-index: 0;
+}
+.noUi-connect,
+.noUi-origin {
+ will-change: transform;
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ -ms-transform-origin: 0 0;
+ -webkit-transform-origin: 0 0;
+ -webkit-transform-style: preserve-3d;
+ transform-origin: 0 0;
+ transform-style: flat;
+}
+.noUi-connect {
+ height: 100%;
+ width: 100%;
+}
+.noUi-origin {
+ height: 10%;
+ width: 10%;
+}
+/* Offset direction
+ */
+html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
+ left: auto;
+ right: 0;
+}
+/* Give origins 0 height/width so they don't interfere with clicking the
+ * connect elements.
+ */
+.noUi-vertical .noUi-origin {
+ width: 0;
+}
+.noUi-horizontal .noUi-origin {
+ height: 0;
+}
+.noUi-handle {
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ position: absolute;
+}
+.noUi-touch-area {
+ height: 100%;
+ width: 100%;
+}
+.noUi-state-tap .noUi-connect,
+.noUi-state-tap .noUi-origin {
+ -webkit-transition: transform 0.3s;
+ transition: transform 0.3s;
+}
+.noUi-state-drag * {
+ cursor: inherit !important;
+}
+/* Slider size and handle placement;
+ */
+.noUi-horizontal {
+ height: 18px;
+}
+.noUi-horizontal .noUi-handle {
+ width: 34px;
+ height: 28px;
+ left: -17px;
+ top: -6px;
+}
+.noUi-vertical {
+ width: 18px;
+}
+.noUi-vertical .noUi-handle {
+ width: 28px;
+ height: 34px;
+ left: -6px;
+ top: -17px;
+}
+html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
+ right: -17px;
+ left: auto;
+}
+/* Styling;
+ * Giving the connect element a border radius causes issues with using transform: scale
+ */
+.noUi-target {
+ background: #FAFAFA;
+ border-radius: 4px;
+ border: 1px solid #D3D3D3;
+ box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
+}
+.noUi-connects {
+ border-radius: 3px;
+}
+.noUi-connect {
+ background: #3FB8AF;
+}
+/* Handles and cursors;
+ */
+.noUi-draggable {
+ cursor: ew-resize;
+}
+.noUi-vertical .noUi-draggable {
+ cursor: ns-resize;
+}
+.noUi-handle {
+ border: 1px solid #D9D9D9;
+ border-radius: 3px;
+ background: #FFF;
+ cursor: default;
+ box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
+}
+.noUi-active {
+ box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
+}
+/* Handle stripes;
+ */
+.noUi-handle:before,
+.noUi-handle:after {
+ content: "";
+ display: block;
+ position: absolute;
+ height: 14px;
+ width: 1px;
+ background: #E8E7E6;
+ left: 14px;
+ top: 6px;
+}
+.noUi-handle:after {
+ left: 17px;
+}
+.noUi-vertical .noUi-handle:before,
+.noUi-vertical .noUi-handle:after {
+ width: 14px;
+ height: 1px;
+ left: 6px;
+ top: 14px;
+}
+.noUi-vertical .noUi-handle:after {
+ top: 17px;
+}
+/* Disabled state;
+ */
+[disabled] .noUi-connect {
+ background: #B8B8B8;
+}
+[disabled].noUi-target,
+[disabled].noUi-handle,
+[disabled] .noUi-handle {
+ cursor: not-allowed;
+}
+/* Base;
+ *
+ */
+.noUi-pips,
+.noUi-pips * {
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.noUi-pips {
+ position: absolute;
+ color: #999;
+}
+/* Values;
+ *
+ */
+.noUi-value {
+ position: absolute;
+ white-space: nowrap;
+ text-align: center;
+}
+.noUi-value-sub {
+ color: #ccc;
+ font-size: 10px;
+}
+/* Markings;
+ *
+ */
+.noUi-marker {
+ position: absolute;
+ background: #CCC;
+}
+.noUi-marker-sub {
+ background: #AAA;
+}
+.noUi-marker-large {
+ background: #AAA;
+}
+/* Horizontal layout;
+ *
+ */
+.noUi-pips-horizontal {
+ padding: 10px 0;
+ height: 80px;
+ top: 100%;
+ left: 0;
+ width: 100%;
+}
+.noUi-value-horizontal {
+ -webkit-transform: translate(-50%, 50%);
+ transform: translate(-50%, 50%);
+}
+.noUi-rtl .noUi-value-horizontal {
+ -webkit-transform: translate(50%, 50%);
+ transform: translate(50%, 50%);
+}
+.noUi-marker-horizontal.noUi-marker {
+ margin-left: -1px;
+ width: 2px;
+ height: 5px;
+}
+.noUi-marker-horizontal.noUi-marker-sub {
+ height: 10px;
+}
+.noUi-marker-horizontal.noUi-marker-large {
+ height: 15px;
+}
+/* Vertical layout;
+ *
+ */
+.noUi-pips-vertical {
+ padding: 0 10px;
+ height: 100%;
+ top: 0;
+ left: 100%;
+}
+.noUi-value-vertical {
+ -webkit-transform: translate(0, -50%);
+ transform: translate(0, -50%);
+ padding-left: 25px;
+}
+.noUi-rtl .noUi-value-vertical {
+ -webkit-transform: translate(0, 50%);
+ transform: translate(0, 50%);
+}
+.noUi-marker-vertical.noUi-marker {
+ width: 5px;
+ height: 2px;
+ margin-top: -1px;
+}
+.noUi-marker-vertical.noUi-marker-sub {
+ width: 10px;
+}
+.noUi-marker-vertical.noUi-marker-large {
+ width: 15px;
+}
+.noUi-tooltip {
+ display: block;
+ position: absolute;
+ border: 1px solid #D9D9D9;
+ border-radius: 3px;
+ background: #fff;
+ color: #000;
+ padding: 5px;
+ text-align: center;
+ white-space: nowrap;
+}
+.noUi-horizontal .noUi-tooltip {
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ left: 50%;
+ bottom: 120%;
+}
+.noUi-vertical .noUi-tooltip {
+ -webkit-transform: translate(0, -50%);
+ transform: translate(0, -50%);
+ top: 50%;
+ right: 120%;
+}
+
+
+
+// Custom styles
+
+.noUi-target {
+ background: $noui-target-bg;
+ border-radius: $noui-target-border-radius;
+ border: 0;
+ box-shadow: $noui-target-box-shadow;
+ margin: 15px 0;
+ cursor: pointer;
+}
+
+.noUi-horizontal {
+ height: $noui-target-thickness;
+}
+
+html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
+ right: -10px;
+}
+
+.noUi-vertical {
+ width: $noui-target-thickness;
+}
+
+.noUi-connect {
+ background: theme-color("primary");
+ box-shadow: none;
+}
+
+.noUi-handle {
+ &:after,&:before{
+ content: none;
+ }
+
+ &:focus{
+ outline: none;
+ }
+}
+
+.noUi-horizontal .noUi-handle,
+.noUi-vertical .noUi-handle {
+ top: -$noui-target-thickness;
+ width: $noui-handle-width;
+ height: $noui-handle-width;
+ border-radius: 100%;
+ box-shadow: none;
+ cursor: pointer;
+ background-color: $noui-handle-bg;
+ border: $noui-handle-border;
+ transition: box-shadow .15s, transform .15s;
+}
+
+.noUi-horizontal .noUi-handle.noUi-active,
+.noUi-vertical .noUi-handle.noUi-active {
+ box-shadow: 0px 0px 0px 2px rgba($noui-handle-bg, 1);
+}
+
+.input-slider--cyan .noUi-connect {
+ background: $cyan;
+}
+
+
+/* Disabled state */
+
+[disabled] .noUi-connect,
+[disabled].noUi-connect {
+ background: $noui-slider-connect-disabled-bg;
+}
+
+[disabled] .noUi-handle,
+[disabled].noUi-origin {
+ cursor: not-allowed;
+}
+
+/* Range slider value labels */
+
+.range-slider-value {
+ font-size: $font-size-xs;
+ font-weight: 500;
+ background-color: rgba($dark, .7);
+ color: color-yiq($dark);
+ border-radius: 10px;
+ padding: .4em .8em .3em .85em;
+}
+
+.range-slider-wrapper .upper-info {
+ font-weight: 400;
+ margin-bottom: 5px;
+}
+
+.input-slider-value-output {
+ background: #333;
+ color: #fff;
+ padding: 4px 8px;
+ position: relative;
+ top: 12px;
+ font-size: 11px;
+ border-radius: 2px;
+}
+
+.input-slider-value-output:after {
+ bottom: 100%;
+ left: 10px;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(136, 183, 213, 0);
+ border-bottom-color: #333;
+ border-width: 4px;
+ margin-left: -4px;
+}
+
+.input-slider-value-output.left:after {
+ left: 10px;
+ right: auto;
+}
+
+.input-slider-value-output.right:after {
+ right: 10px;
+ left: auto;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_scrollbar.scss b/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_scrollbar.scss
new file mode 100644
index 0000000..4aff7d9
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/custom/vendors/_scrollbar.scss
@@ -0,0 +1,35 @@
+//
+// Custom scrollbar
+//
+
+.scrollbar-inner {
+ height: 100%;
+
+ &:not(:hover) .scroll-element {
+ opacity: 0;
+ }
+
+ .scroll-element {
+ transition: opacity 300ms;
+ margin-right: 2px;
+
+ .scroll-bar,
+ .scroll-element_track {
+ transition: background-color 300ms;
+ }
+
+ .scroll-element_track {
+ background-color: transparent;
+ }
+ }
+
+ .scroll-element.scroll-y {
+ width: 3px;
+ right: 0;
+ }
+
+ .scroll-element.scroll-x {
+ height: 3px;
+ bottom: 0;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/docs/_clipboard-js.scss b/devine_ui/src/assets/scss/argon-dashboard/docs/_clipboard-js.scss
new file mode 100644
index 0000000..0a2a7e4
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/docs/_clipboard-js.scss
@@ -0,0 +1,40 @@
+// clipboard.js
+//
+// JS-based `Copy` buttons for code snippets.
+
+.ct-clipboard {
+ position: relative;
+ display: none;
+ float: right;
+
+ + .highlight {
+ margin-top: 0;
+ }
+}
+
+.btn-clipboard {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ z-index: 10;
+ display: block;
+ padding: .25rem .5rem;
+ font-size: 75%;
+ cursor: pointer;
+ background-color: transparent;
+ border: 0;
+ border-radius: .25rem;
+ color: #fff;
+ background-color: $ct-primary;
+
+ &:hover {
+ color: #fff;
+ background-color: darken($ct-primary, 10%);
+ }
+}
+
+@media (min-width: 768px) {
+ .ct-clipboard {
+ display: block;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/docs/_component-examples.scss b/devine_ui/src/assets/scss/argon-dashboard/docs/_component-examples.scss
new file mode 100644
index 0000000..7019f4c
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/docs/_component-examples.scss
@@ -0,0 +1,516 @@
+// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type
+
+//
+// Grid examples
+//
+
+.ct-example-row {
+ .row {
+ > .col,
+ > [class^="col-"] {
+ span {
+ display: block;
+ padding: .75rem;
+ color: rgb(57, 63, 73);
+ background-color: rgb(255, 255, 255);
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 16px;
+ font-size: $font-size-sm;
+ border-radius: .25rem;
+ margin: 1rem 0;
+ }
+ }
+ }
+
+ .no-gutters {
+ > .col,
+ > [class^="col-"] {
+ span {
+ border-radius: 0;
+ }
+ }
+ }
+
+ .flex-items-top,
+ .flex-items-middle,
+ .flex-items-bottom {
+ min-height: 6rem;
+ background-color: rgba(255, 0, 0, .1);
+ }
+}
+
+.ct-example-row-flex-cols .row {
+ min-height: 10rem;
+ background-color: rgba(255, 0, 0, .1);
+
+ & + .row {
+ margin-top: 1rem;
+ }
+}
+
+.ct-highlight {
+ background-color: rgba($ct-primary, .15);
+ border: 1px solid rgba($ct-primary, .15);
+}
+
+// Grid mixins
+.example-container {
+ width: 800px;
+ @include make-container();
+}
+
+.example-row {
+ @include make-row();
+}
+
+.example-content-main {
+ @include make-col-ready();
+
+ @include media-breakpoint-up(sm) {
+ @include make-col(6);
+ }
+
+ @include media-breakpoint-up(lg) {
+ @include make-col(8);
+ }
+}
+
+.example-content-secondary {
+ @include make-col-ready();
+
+ @include media-breakpoint-up(sm) {
+ @include make-col(6);
+ }
+
+ @include media-breakpoint-up(lg) {
+ @include make-col(4);
+ }
+}
+
+
+//
+// Container illustrations
+//
+
+.ct-example-container {
+ min-width: 16rem;
+ max-width: 25rem;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+.ct-example-container-header {
+ height: 3rem;
+ margin-bottom: .5rem;
+ background-color: lighten($blue, 50%);
+ border-radius: .25rem;
+}
+
+.ct-example-container-sidebar {
+ float: right;
+ width: 4rem;
+ height: 8rem;
+ background-color: lighten($blue, 25%);
+ border-radius: .25rem;
+}
+
+.ct-example-container-body {
+ height: 8rem;
+ margin-right: 4.5rem;
+ background-color: lighten($ct-primary, 25%);
+ border-radius: .25rem;
+}
+
+.ct-example-container-fluid {
+ max-width: none;
+}
+
+
+//
+// Docs examples
+//
+
+.ct-example {
+ position: relative;
+ margin: 1rem (-$grid-gutter-width / 2) 0;
+ @include clearfix();
+
+ @include media-breakpoint-up(sm) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+
+ + .highlight,
+ + .clipboard + .highlight {
+ margin-top: 0;
+ }
+
+ + p {
+ margin-top: 2rem;
+ }
+
+ .pos-f-t {
+ position: relative;
+ margin: -1rem;
+
+ @include media-breakpoint-up(sm) {
+ margin: -1.5rem;
+ }
+ }
+
+ .custom-file-input:lang(es) ~ .custom-file-label::after {
+ content: "Elegir";
+ }
+
+ > .form-control {
+ + .form-control {
+ margin-top: .5rem;
+ }
+ }
+
+ > .nav + .nav,
+ > .alert + .alert,
+ > .navbar + .navbar,
+ > .progress + .progress,
+ > .progress + .btn,
+ .badge,
+ .btn {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ }
+
+ .btn-group {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ .btn {
+ margin: 0;
+ }
+ }
+
+ .alert {
+ margin: 0;
+
+ + .alert {
+ margin-top: 1.25rem;
+ }
+ }
+
+ .badge {
+ margin-right: .5rem;
+ }
+
+ > .dropdown-menu:first-child {
+ position: static;
+ display: block;
+ }
+
+ > .form-group:last-child {
+ margin-bottom: 0;
+ }
+
+ > .close {
+ float: none;
+ }
+}
+
+// Typography
+.ct-example-type {
+ .table {
+ .type-info {
+ color: #999;
+ vertical-align: middle;
+ }
+ td {
+ padding: 1rem 0;
+ border-color: #eee;
+ }
+ tr:first-child td {
+ border-top: 0;
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+
+// Contextual background colors
+.ct-example-bg-classes p {
+ padding: 1rem;
+}
+
+// Images
+.ct-example > img {
+ + img {
+ margin-left: .5rem;
+ }
+}
+
+// Buttons
+.ct-example {
+ > .btn-group {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+ }
+ > .btn-toolbar + .btn-toolbar {
+ margin-top: .5rem;
+ }
+}
+
+// Forms
+.ct-example-control-sizing select,
+.ct-example-control-sizing input[type="text"] + input[type="text"] {
+ margin-top: .5rem;
+}
+.ct-example-form .input-group {
+ margin-bottom: .5rem;
+}
+.ct-example > textarea.form-control {
+ resize: vertical;
+}
+
+// List groups
+.ct-example > .list-group {
+ max-width: 400px;
+}
+
+// Navbars
+.ct-example {
+ .fixed-top,
+ .sticky-top {
+ position: static;
+ margin: -1rem -1rem 1rem;
+ }
+ .fixed-bottom {
+ position: static;
+ margin: 1rem -1rem -1rem;
+ }
+
+ @include media-breakpoint-up(sm) {
+ .fixed-top,
+ .sticky-top {
+ margin: -1.5rem -1.5rem 1rem;
+ }
+ .fixed-bottom {
+ margin: 1rem -1.5rem -1.5rem;
+ }
+ }
+}
+
+// Pagination
+.ct-example .pagination {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+}
+
+// Example modals
+.modal {
+ z-index: 1072;
+
+ .tooltip,
+ .popover {
+ z-index: 1073;
+ }
+}
+
+.modal-backdrop {
+ z-index: 1071;
+}
+
+.ct-example-modal {
+ background-color: #fafafa;
+
+ .modal {
+ position: relative;
+ top: auto;
+ right: auto;
+ bottom: auto;
+ left: auto;
+ z-index: 1;
+ display: block;
+ }
+
+ .modal-dialog {
+ left: auto;
+ margin-right: auto;
+ margin-left: auto;
+ }
+}
+
+// Example tabbable tabs
+.ct-example-tabs .nav-tabs {
+ margin-bottom: 1rem;
+}
+
+// Popovers
+.ct-example-popover-static {
+ padding-bottom: 1.5rem;
+ background-color: #f9f9f9;
+
+ .popover {
+ position: relative;
+ display: block;
+ float: left;
+ width: 260px;
+ margin: 1.25rem;
+ }
+}
+
+// Tooltips
+.tooltip-demo a {
+ white-space: nowrap;
+}
+
+.ct-example-tooltip-static .tooltip {
+ position: relative;
+ display: inline-block;
+ margin: 10px 20px;
+ opacity: 1;
+}
+
+// Scrollspy demo on fixed height div
+.scrollspy-example {
+ position: relative;
+ height: 200px;
+ margin-top: .5rem;
+ overflow: auto;
+}
+
+.scrollspy-example-2 {
+ position: relative;
+ height: 350px;
+ overflow: auto;
+}
+
+.ct-example-border-utils {
+ [class^="border"] {
+ display: inline-block;
+ width: 5rem;
+ height: 5rem;
+ margin: .25rem;
+ background-color: #f5f5f5;
+ }
+}
+
+.ct-example-border-utils-0 {
+ [class^="border"] {
+ border: 1px solid $border-color;
+ }
+}
+
+//
+// Code snippets
+//
+
+.highlight {
+ padding: 0;
+ margin-top: 1rem;
+ //margin-bottom: 3rem;
+ //background-color: $gray-100;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+
+ @include media-breakpoint-up(sm) {
+ padding: 0;
+ }
+}
+
+.ct-content .highlight {
+ margin-right: (-$grid-gutter-width / 2);
+ margin-left: (-$grid-gutter-width / 2);
+
+ @include media-breakpoint-up(sm) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
+
+//
+// Component-Code tabs
+//
+
+.ct-example {
+ margin-bottom: 2rem;
+ padding-bottom: 2rem;
+ border-bottom: 1px solid $gray-200;
+
+ .tab-content {
+ .tab-example-result {
+ background-color: #f5f7f9;
+ border: 1px solid #e6ecf1;
+ padding: 1.25rem;
+ border-radius: .25rem;
+ }
+ }
+
+ .nav-tabs-code {
+ margin-bottom: .375rem;
+
+ .nav-link {
+ font-size: .875rem;
+
+ &:active,
+ &.active {
+ color: $ct-primary;
+ }
+ }
+ }
+}
+
+// Icon examples
+.icon-examples {
+ margin-top: 1rem;
+}
+.btn-icon-clipboard {
+ margin: 0px;
+ padding: 24px;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 1.25;
+ color: rgb(57, 63, 73);
+ background-color: rgb(248, 249, 250);
+ border-radius: 4px;
+ border: 0px none;
+ text-align: left;
+ font-family: inherit;
+ display: inline-block;
+ vertical-align: middle;
+ text-decoration: none;
+ -moz-appearance: none;
+ cursor: pointer;
+ width: 100%;
+ margin: .5rem 0;
+
+ &:hover {
+ background-color: rgb(255, 255, 255);
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 16px;
+ }
+
+ > div {
+ align-items: center;
+ display: flex;
+ }
+
+ i {
+ box-sizing: content-box;
+ color: rgb(57, 63, 73);
+ vertical-align: middle;
+ font-size: 1.5rem;
+ }
+
+ span {
+ display: inline-block;
+ font-size: .875rem;
+ line-height: 1.5;
+ color: rgb(57, 63, 73);
+ margin-left: 16px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/docs/_content.scss b/devine_ui/src/assets/scss/argon-dashboard/docs/_content.scss
new file mode 100644
index 0000000..458cb6d
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/docs/_content.scss
@@ -0,0 +1,300 @@
+.docs {
+ background: #FFF;
+
+ h6 {
+ font-size: 1rem;
+ font-weight: $font-weight-bold;
+ }
+}
+
+.ct-content {
+ order: 1;
+
+ >h2[id],
+ >h3[id],
+ >h4[id] {
+ pointer-events: none;
+
+ >div,
+ >a {
+ pointer-events: auto;
+ }
+
+ &::before {
+ display: block;
+ height: 6rem;
+ margin-top: -6rem;
+ visibility: hidden;
+ content: "";
+ }
+ }
+
+ >table {
+ width: 100%;
+ max-width: 100%;
+ margin-bottom: 1rem;
+
+ @include media-breakpoint-down(md) {
+ display: block;
+ overflow-x: auto;
+ -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+ &.table-bordered {
+ border: 0;
+ }
+ } // Cells
+ >thead,
+ >tbody,
+ >tfoot {
+ >tr {
+ >th,
+ >td {
+ padding: $table-cell-padding;
+ vertical-align: top;
+ border: 1px solid $table-border-color;
+
+ >p:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ } // Prevent breaking of code (e.g., Grunt tasks list)
+ td:first-child>code {
+ white-space: nowrap;
+ }
+ }
+}
+
+//
+// Docs sections
+//
+.ct-content {
+ >h2:not(:first-child) {
+ margin-top: 3rem;
+ font-size: 1.5rem;
+ font-weight: $font-weight-bold;
+ }
+
+ >h3 {
+ margin-top: 2.5rem;
+ font-size: 1.25rem;
+ font-weight: $font-weight-bold;
+ }
+
+ >ul li,
+ >ol li {
+ margin-bottom: .25rem;
+ }
+
+ @include media-breakpoint-up(lg) {
+ >ul,
+ >ol,
+ >p {
+ max-width: 80%;
+ }
+ }
+}
+
+.ct-page-title {
+ padding-left: 1.25rem;
+ border-left: 2px solid $ct-primary;
+ margin-bottom: 1.5rem;
+}
+
+.ct-title {
+ margin-top: 1rem;
+ margin-bottom: .5rem;
+ font-weight: 300;
+
+ @include media-breakpoint-up(sm) {
+ font-size: 1.5rem;
+ font-weight: $font-weight-bold;
+ }
+}
+
+.ct-lead {
+ color: rgb(59, 69, 78);
+ font-weight: 500;
+
+ @include media-breakpoint-up(sm) {
+ max-width: 80%;
+ margin-bottom: 1rem;
+ font-size: .875rem;
+ }
+}
+
+.ct-text-purple {
+ color: $ct-primary;
+}
+
+.ct-text-purple-bright {
+ color: $ct-primary-bright;
+}
+
+// Docs code example tabs
+.ct-tabs-example {
+ .nav-link i {
+ margin-right: 5px;
+ }
+}
+
+// Color swatches
+.color-swatch {
+ margin: 1rem 0;
+ border-radius: .25rem;
+ background-color: #F4F5F7;
+}
+
+.color-swatch:after {
+ content: " ";
+ display: table;
+ clear: both;
+}
+
+.color-swatch-header {
+ position: relative;
+ height: 0;
+ padding-bottom: 50%;
+ border-radius: .25rem .25rem 0 0;
+ border: 1px solid transparent;
+}
+
+.color-swatch-header.is-light {
+ border-color: #C1C7D0;
+}
+
+.color-swatch-header .pass-fail {
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+}
+
+.color-swatch-header .pass-fail-item-wrap {
+ position: relative;
+ float: left;
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.color-swatch-header .pass-fail-item-group {
+ display: inline-block;
+ padding: 0 5px;
+}
+
+.color-swatch-header .pass-fail-item {
+ float: left;
+ display: inline-block;
+ text-align: center;
+ padding: 2px;
+}
+
+.color-swatch-header .pass-fail-item.white .example {
+ color: #fff;
+}
+
+.color-swatch-header .pass-fail-item.small .example {
+ font-size: 10px;
+}
+
+.color-swatch-header .pass-fail-item .lozenge {
+ font-size: 11px;
+ text-transform: uppercase;
+ font-weight: 600;
+ background: #000;
+ color: #fff;
+ padding: 2px 4px;
+ line-height: 10px;
+ border-radius: 4px;
+ letter-spacing: 0.05em;
+}
+
+.color-swatch-body {
+ position: relative;
+ left: 50%;
+ float: left;
+ padding: 10px 0;
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.color-swatch-body .prop-item-wrap {
+ float: left;
+ padding: 0 15px;
+ min-width: 65px;
+}
+
+.color-swatch-body .prop-item {
+ padding: 15px 0;
+}
+
+.color-swatch-body .prop-item .label {
+ font-size: 11px;
+ color: #62748C;
+ text-transform: uppercase;
+ line-height: 16px;
+}
+
+.color-swatch-body .prop-item .value {
+ font-size: 14px;
+}
+
+.table-colors {
+ font-weight: 600;
+ font-size: 16px;
+ width: 100%;
+}
+
+.table-colors td,
+.table-colors:first-child td,
+.table-colors td:first-child,
+.table-colors:first-child td:first-child,
+.table-colors td:last-child,
+.table-colors:first-child td:last-child {
+ background: $ct-primary-light;
+ border-bottom: 1px solid rgba(0, 0, 0, .1);
+ padding: 10px;
+}
+
+.table-colors tr:last-child td,
+.table-colors:first-child tr:last-child td {
+ border-bottom: none;
+}
+
+.table-colors td:nth-child(1),
+.table-colors:first-child td:nth-child(1) {
+ line-height: 40px;
+}
+
+.table-colors .swatch,
+.table-colors:first-child .swatch {
+ float: left;
+ height: 40px;
+ width: 40px;
+ margin-right: 20px;
+ display: inline-block;
+ border-radius: 4px;
+ border: 1px solid transparent;
+}
+
+.table-colors .swatch.is-light,
+.table-colors:first-child .swatch.is-light {
+ border-color: #C1C7D0;
+}
+
+.table-colors .lozenge,
+.table-colors:first-child .lozenge {
+ float: left;
+ margin: 5px 10px 0 0;
+ font-size: 10px;
+ display: inline-block;
+ text-transform: uppercase;
+ font-weight: 600;
+ background: #97A0AF;
+ color: #042A53;
+ padding: 2px 4px;
+ line-height: 10px;
+ border-radius: 4px;
+ letter-spacing: 0.05em;
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/docs/_footer.scss b/devine_ui/src/assets/scss/argon-dashboard/docs/_footer.scss
new file mode 100644
index 0000000..8b26733
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/docs/_footer.scss
@@ -0,0 +1,39 @@
+//
+// Footer
+//
+.ct-footer {
+ font-size: 85%;
+ text-align: center;
+ background-color: #f7f7f7;
+
+ a {
+ font-weight: 500;
+ color: $gray-700;
+
+ &:hover,
+ &:focus {
+ color: $link-color;
+ }
+ }
+
+ p {
+ margin-bottom: 0;
+ }
+
+ @include media-breakpoint-up(sm) {
+ text-align: left;
+ }
+}
+
+.ct-footer-links {
+ padding-left: 0;
+ margin-bottom: 1rem;
+
+ li {
+ display: inline-block;
+
+ +li {
+ margin-left: 1rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/devine_ui/src/assets/scss/argon-dashboard/docs/_nav.scss b/devine_ui/src/assets/scss/argon-dashboard/docs/_nav.scss
new file mode 100644
index 0000000..72c5c03
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/docs/_nav.scss
@@ -0,0 +1,110 @@
+//
+// Main navbar
+//
+.ct-navbar {
+ background-color: $ct-primary;
+ box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+
+ @include media-breakpoint-down(md) {
+ padding-right: .5rem;
+ padding-left: .5rem;
+
+ .navbar-nav-scroll {
+ max-width: 100%;
+ height: 2.5rem;
+ margin-top: .25rem;
+ overflow: hidden;
+ font-size: .875rem;
+
+ .navbar-nav {
+ padding-bottom: 2rem;
+ overflow-x: auto;
+ white-space: nowrap;
+ -webkit-overflow-scrolling: touch;
+ }
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ @supports (position: sticky) {
+ position: sticky;
+ top: 0;
+ z-index: 1071; // over everything in bootstrap
+ }
+ }
+
+ .navbar-nav {
+ .nav-link {
+ padding-right: .5rem;
+ padding-left: .5rem;
+ color: $ct-primary-light !important;
+
+ &.active,
+ &:hover {
+ color: #fff !important;
+ background-color: transparent !important;
+ }
+
+ &.active {
+ font-weight: 500;
+ }
+ }
+ }
+
+ .navbar-nav-svg {
+ display: inline-block;
+ width: 1rem;
+ height: 1rem;
+ vertical-align: text-top;
+ }
+
+ .dropdown-menu {
+ font-size: .875rem;
+ }
+
+ .dropdown-item.active {
+ font-weight: 500;
+ color: $gray-900;
+ background-color: transparent;
+ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: .4rem .87rem;
+ background-size: .75rem .75rem;
+ padding-left: 25px;
+ }
+}
+
+// Github corner
+.github-corner {
+ position: fixed;
+ right: 0;
+ z-index: 1080;
+
+ &:hover {
+ .octo-arm {
+ animation: octocat-wave 560ms ease-in-out
+ }
+ }
+
+ svg {
+ fill: $white;
+ color: $ct-primary;
+ }
+}
+
+@keyframes octocat-wave {
+ 0%,
+ 100% {
+ transform: rotate(0)
+ }
+ 20%,
+ 60% {
+ transform: rotate(-25deg)
+ }
+ 40%,
+ 80% {
+ transform: rotate(10deg)
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/docs/_prism.scss b/devine_ui/src/assets/scss/argon-dashboard/docs/_prism.scss
new file mode 100644
index 0000000..90a22b4
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/docs/_prism.scss
@@ -0,0 +1,176 @@
+code[class*="language-"],
+pre[class*="language-"] {
+ font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+ font-size: 14px;
+ line-height: 1.375;
+ direction: ltr;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+ background: #f5f7ff;
+ color: #5e6687;
+ border-radius: .25rem;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+ text-shadow: none;
+ background: #dfe2f1;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+ text-shadow: none;
+ background: #dfe2f1;
+}
+
+
+/* Code blocks */
+
+pre[class*="language-"] {
+ padding: 1.25rem;
+ margin: 0;
+ overflow: auto;
+}
+
+
+/* Inline code */
+
+:not(pre)>code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #898ea4;
+}
+
+.token.punctuation {
+ color: #5e6687;
+}
+
+.token.namespace {
+ opacity: .7;
+}
+
+.token.operator,
+.token.boolean,
+.token.number {
+ color: #c76b29;
+}
+
+.token.property {
+ color: #c08b30;
+}
+
+.token.tag {
+ color: #3d8fd1;
+}
+
+.token.string {
+ color: #22a2c9;
+}
+
+.token.selector {
+ color: #6679cc;
+}
+
+.token.attr-name {
+ color: #c76b29;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #22a2c9;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+ color: #ac9739;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+ color: #22a2c9;
+}
+
+.token.placeholder,
+.token.variable {
+ color: #3d8fd1;
+}
+
+.token.deleted {
+ text-decoration: line-through;
+}
+
+.token.inserted {
+ border-bottom: 1px dotted #202746;
+ text-decoration: none;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.important {
+ color: #c94922;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+pre>code.highlight {
+ outline: 0.4em solid #c94922;
+ outline-offset: .4em;
+}
+
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+
+.line-numbers .line-numbers-rows {
+ border-right-color: #dfe2f1;
+}
+
+.line-numbers-rows>span:before {
+ color: #979db4;
+}
+
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+
+.line-highlight {
+ background: rgba(107, 115, 148, 0.2);
+ background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+ background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+}
\ No newline at end of file
diff --git a/devine_ui/src/assets/scss/argon-dashboard/docs/_sidebar.scss b/devine_ui/src/assets/scss/argon-dashboard/docs/_sidebar.scss
new file mode 100644
index 0000000..a71c948
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/docs/_sidebar.scss
@@ -0,0 +1,213 @@
+// stylelint-disable declaration-no-important
+//
+// Right side table of contents
+//
+.ct-toc {
+ @supports (position: sticky) {
+ position: sticky;
+ top: 4rem;
+ height: calc(100vh - 4rem);
+ overflow-y: auto;
+ }
+ order: 2;
+ padding-top: 2rem;
+ padding-bottom: 1.5rem;
+ font-size: .875rem;
+}
+
+.section-nav {
+ padding-left: 0;
+ border-left: 1px solid #eee;
+
+ ul {
+ padding-left: 1rem;
+
+ ul {
+ display: none;
+ }
+ }
+}
+
+.toc-entry {
+ display: block;
+ font-size: 1rem;
+
+ a {
+ display: block;
+ padding: .125rem 1.5rem;
+ color: #99979c;
+ font-size: 90%;
+
+ &:hover {
+ color: $blue;
+ text-decoration: none;
+ }
+ }
+}
+
+//
+// Left side navigation
+//
+.ct-sidebar {
+ order: 0; // background-color: #f5f2f9;
+ border-bottom: 1px solid $ct-sidebar-border-color;
+ background-color: $ct-sidebar-bg;
+
+ @include media-breakpoint-up(md) {
+ @supports (position: sticky) {
+ position: sticky;
+ top: 4rem;
+ z-index: 1000;
+ height: calc(100vh - 4rem);
+ }
+ border-right: 1px solid $ct-sidebar-border-color;
+ }
+
+ @include media-breakpoint-up(xl) {
+ flex: 0 1 320px;
+ }
+}
+
+.ct-links {
+ padding-top: 2rem;
+ padding-bottom: 1rem;
+ margin-right: -15px;
+ margin-left: -15px;
+
+ @include media-breakpoint-up(md) {
+ @supports (position: sticky) {
+ max-height: calc(100vh - 5rem);
+ overflow-y: auto;
+ }
+ } // Override collapse behaviors
+ @include media-breakpoint-up(md) {
+ display: block !important;
+ }
+}
+
+.ct-search {
+ position: relative; // To contain the Algolia search
+ padding: 1rem 15px;
+ margin-right: -15px;
+ margin-left: -15px;
+ border-bottom: 1px solid rgba(0, 0, 0, .05);
+
+ .form-control:focus {
+ border-color: $ct-primary-bright;
+ box-shadow: 0 0 0 3px rgba($ct-primary-bright, .25);
+ }
+}
+
+.ct-search-docs-toggle {
+ line-height: 1;
+ color: $gray-900;
+}
+
+.ct-sidenav {
+ display: none;
+}
+
+.ct-toc-link {
+ display: block;
+ padding: .25rem 1.5rem;
+ font-weight: 600;
+ font-size: .875rem;
+ color: #0d2b3e;
+
+ &:hover {
+ color: rgba(0, 0, 0, .85);
+ text-decoration: none;
+ }
+}
+
+.ct-toc-item {
+ &.active {
+ margin-bottom: 1rem;
+
+ &:not(:first-child) {
+ margin-top: 1rem;
+ }
+
+ >.ct-toc-link {
+ color: rgba(0, 0, 0, .85);
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+
+ >.ct-sidenav {
+ display: block;
+ }
+ }
+}
+
+// All levels of nav
+.ct-sidebar .nav>li>a {
+ display: block;
+ padding: .25rem 1.5rem;
+ font-size: 84%;
+ color: #4c555a;
+}
+
+.ct-sidebar .nav>li>a:hover {
+ color: rgba(0, 0, 0, .85);
+ text-decoration: none;
+ background-color: transparent;
+}
+
+.ct-sidebar .nav>.active>a {
+ font-weight: 500;
+ color: #0099e5;
+ background-color: transparent;
+ padding-left: 2rem;
+ position: relative;
+
+ &:before {
+ content: '';
+ position: absolute;
+ height: 16px;
+ width: 2px;
+ background-color: #0099e5;
+ top: 50%;
+ left: 1.5rem;
+ transform: translateY(-50%);
+ }
+}
+
+.ct-sidebar .nav>.active:hover>a {
+ color: #0099e5
+}
+
+
+.scrollbar-inner {
+ height: 100%;
+
+ &:not(:hover) .scroll-element {
+ opacity: 0;
+ }
+
+ .scroll-element {
+ transition: opacity 300ms;
+ margin-right: 2px;
+
+ .scroll-bar,
+ .scroll-element_track {
+ transition: background-color 300ms;
+ }
+
+ .scroll-element_track {
+ background-color: transparent;
+ }
+ }
+
+ .scroll-element.scroll-y {
+ width: 3px;
+ right: 0;
+ }
+
+ .scroll-element.scroll-x {
+ height: 3px;
+ bottom: 0;
+ }
+}
diff --git a/devine_ui/src/assets/scss/argon-dashboard/docs/_variables.scss b/devine_ui/src/assets/scss/argon-dashboard/docs/_variables.scss
new file mode 100644
index 0000000..be2217a
--- /dev/null
+++ b/devine_ui/src/assets/scss/argon-dashboard/docs/_variables.scss
@@ -0,0 +1,13 @@
+// Local docs variables
+$ct-primary: theme-color("primary") !default;
+$ct-primary-bright: lighten(saturate($ct-primary, 5%), 15%) !default;
+$ct-primary-light: rgba(255, 255, 255, .9) !default;
+$ct-dark: #2a2730 !default;
+$ct-download: #ffe484 !default;
+$ct-info: #5bc0de !default;
+$ct-warning: #f0ad4e !default;
+$ct-danger: #d9534f !default;
+
+$ct-sidebar-bg: #f5f7f9;
+$ct-sidebar-border-color: #e6ecf1;
+
diff --git a/devine_ui/src/assets/scss/react/_buttons.scss b/devine_ui/src/assets/scss/react/_buttons.scss
new file mode 100644
index 0000000..b28edf0
--- /dev/null
+++ b/devine_ui/src/assets/scss/react/_buttons.scss
@@ -0,0 +1,8 @@
+.btn{
+ .btn-inner--icon{
+ margin-right: 4px;
+ }
+}
+.btn + .btn {
+ margin-left: 4px;
+}
diff --git a/devine_ui/src/assets/scss/react/_mixins.scss b/devine_ui/src/assets/scss/react/_mixins.scss
new file mode 100644
index 0000000..d0bdb2c
--- /dev/null
+++ b/devine_ui/src/assets/scss/react/_mixins.scss
@@ -0,0 +1,3 @@
+button:focus, :focus {
+ outline: none;
+}
diff --git a/devine_ui/src/assets/scss/react/_navbar-dropdown.scss b/devine_ui/src/assets/scss/react/_navbar-dropdown.scss
new file mode 100644
index 0000000..17b04f2
--- /dev/null
+++ b/devine_ui/src/assets/scss/react/_navbar-dropdown.scss
@@ -0,0 +1,9 @@
+@keyframes show-navbar-dropdown {
+ 0% {
+ opacity: 0;
+ transition: visibility 0.25s, opacity 0.25s;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
diff --git a/devine_ui/src/assets/scss/react/_navbar.scss b/devine_ui/src/assets/scss/react/_navbar.scss
new file mode 100644
index 0000000..6a482e3
--- /dev/null
+++ b/devine_ui/src/assets/scss/react/_navbar.scss
@@ -0,0 +1,6 @@
+.navbar .collapsing .navbar-toggler{
+ pointer-events: none;
+}
+.navbar .nav-item .nav-link-icon.nav-link i{
+ margin-right: 4px;
+}
diff --git a/devine_ui/src/assets/scss/react/_tables.scss b/devine_ui/src/assets/scss/react/_tables.scss
new file mode 100644
index 0000000..4cbea2d
--- /dev/null
+++ b/devine_ui/src/assets/scss/react/_tables.scss
@@ -0,0 +1,9 @@
+.table {
+ .avatar-group .avatar
+ {
+ margin-right: 4px;
+ }
+ .badge i{
+ margin-right: 10px;
+ }
+}
diff --git a/devine_ui/src/assets/scss/react/bootstrap/_spinners.scss b/devine_ui/src/assets/scss/react/bootstrap/_spinners.scss
new file mode 100644
index 0000000..4432c5b
--- /dev/null
+++ b/devine_ui/src/assets/scss/react/bootstrap/_spinners.scss
@@ -0,0 +1,63 @@
+$spinner-width: 2rem !default;
+$spinner-height: $spinner-width !default;
+$spinner-border-width: .25em !default;
+
+$spinner-width-sm: 1rem !default;
+$spinner-height-sm: $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
+
+//
+// Rotating border
+//
+
+@keyframes spinner-border {
+ to { transform: rotate(360deg); }
+}
+
+.spinner-border {
+ display: inline-block;
+ width: $spinner-width;
+ height: $spinner-height;
+ vertical-align: text-bottom;
+ border: $spinner-border-width solid currentColor;
+ border-right-color: transparent;
+ // stylelint-disable-next-line property-blacklist
+ border-radius: 50%;
+ animation: spinner-border .75s linear infinite;
+}
+
+.spinner-border-sm {
+ width: $spinner-width-sm;
+ height: $spinner-height-sm;
+ border-width: $spinner-border-width-sm;
+}
+
+//
+// Growing circle
+//
+
+@keyframes spinner-grow {
+ 0% {
+ transform: scale(0);
+ }
+ 50% {
+ opacity: 1;
+ }
+}
+
+.spinner-grow {
+ display: inline-block;
+ width: $spinner-width;
+ height: $spinner-height;
+ vertical-align: text-bottom;
+ background-color: currentColor;
+ // stylelint-disable-next-line property-blacklist
+ border-radius: 50%;
+ opacity: 0;
+ animation: spinner-grow .75s linear infinite;
+}
+
+.spinner-grow-sm {
+ width: $spinner-width-sm;
+ height: $spinner-height-sm;
+}
diff --git a/devine_ui/src/assets/scss/react/plugins/_plugin-react-datetime.scss b/devine_ui/src/assets/scss/react/plugins/_plugin-react-datetime.scss
new file mode 100644
index 0000000..b6ebdc1
--- /dev/null
+++ b/devine_ui/src/assets/scss/react/plugins/_plugin-react-datetime.scss
@@ -0,0 +1,414 @@
+/*!
+* https://github.com/YouCanBookMe/react-datetime
+*/
+.rdt {
+ position: relative;
+
+ .rdtPicker {
+ -webkit-transition: all 150ms linear;
+ -moz-transition: all 150ms linear;
+ -o-transition: all 150ms linear;
+ -ms-transition: all 150ms linear;
+ transition: all 150ms linear;
+ margin-top: -20px;
+ visibility: hidden;
+ display: block;
+ opacity: 0;
+ }
+ &.rdtOpen {
+ .rdtPicker {
+ opacity: 1;
+ visibility: visible;
+ margin-top: 0;
+ }
+ }
+}
+.rdtPicker {
+ display: none;
+ position: absolute;
+ padding: 20px;
+ margin-top: 1px;
+ z-index: 99999 !important;
+ background: #fff;
+ border-radius: .375rem;
+ box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ min-width: 160px;
+
+ &:before {
+ display: inline-block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ vertical-align: middle;
+ content: "";
+ top: -5px;
+ left: 10px;
+ right: auto;
+ color: #ffffff;
+ border-bottom: 0.4em solid;
+ border-right: 0.4em solid transparent;
+ border-left: 0.4em solid transparent;
+ }
+ &:after {
+ border-bottom: 0.4em solid #ffffff;
+ border-right: 0.4em solid transparent;
+ border-left: 0.4em solid transparent;
+ content: "";
+ display: inline-block;
+ position: absolute;
+ top: -5px;
+ left: 10px;
+ }
+}
+
+.rdtPicker {
+ display: block;
+ top: 40px;
+}
+.rdtStatic .rdtPicker {
+ box-shadow: none;
+ position: static;
+}
+
+.rdtPicker .rdtTimeToggle {
+ text-align: center;
+ padding: 10px;
+ border-radius: 4px;
+ visibility: hidden;
+ position: relative;
+ &:before {
+ visibility: visible;
+ width: 100%;
+ height: 100%;
+ border-radius: 3px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font: normal normal normal 1em/1 "Nucleo";
+ font-size: 18px;
+ content: "\EA5E";
+ }
+}
+
+.rdtPicker table {
+ width: 100%;
+ margin: 0;
+ border-color: $white !important;
+}
+.rdtPicker td,
+.rdtPicker th {
+ text-align: center;
+ padding: 1px;
+}
+.rdtPicker td {
+ cursor: pointer;
+}
+.rdtDay {
+ font-size: .875rem;
+ width: 36px;
+ height: 36px;
+ transition: all .15s ease;
+ text-align: center;
+ border: none;
+ border-radius: 50%;
+ &.rdtToday.rdtActive,
+ &.rdtActive,
+ &.rdtActive:hover,
+ &.start-date,
+ &.end-date,
+ &.middle-date,
+ &.start-date:hover,
+ &.end-date:hover,
+ &.middle-date:hover {
+ background-color: $info !important;
+ color: $white !important;
+ }
+ &.start-date{
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ &.middle-date{
+ border-radius: 0;
+ }
+ &.end-date{
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+}
+.rdtDays {
+ tr {
+ .dow {
+ text-align: center;
+ font-size: 12px;
+ font-weight: inherit;
+ padding-bottom: 5px;
+ padding-top: 10px;
+ font-weight: 300;
+ font-size: .875rem;
+ width: 20px;
+ height: 20px;
+ }
+ .rdtDay {
+ color: $gray-700;
+ font-size: .875rem;
+ &.rdtOld,
+ &.rdtNew {
+ color: $gray-500;
+ font-weight: 300;
+ }
+ }
+ }
+}
+
+.rdtPicker td.rdtDay:hover,
+.rdtPicker td.rdtHour:hover,
+.rdtPicker td.rdtMinute:hover,
+.rdtPicker td.rdtSecond:hover,
+.rdtPicker .rdtTimeToggle:hover,
+.rdtPicker .rdtTimeToggle:hover:before {
+ background: #eeeeee;
+ cursor: pointer;
+}
+.rdtPicker td.rdtToday {
+ position: relative;
+}
+.rdtPicker td.rdtActive.rdtToday:before {
+ border-bottom-color: #fff;
+}
+.rdtPicker td.rdtDisabled,
+.rdtPicker td.rdtDisabled:hover {
+ background: none;
+ color: #999999;
+ cursor: not-allowed;
+}
+
+.rdtPicker td span.rdtOld {
+ color: #999999;
+}
+.rdtPicker td span.rdtDisabled,
+.rdtPicker td span.rdtDisabled:hover {
+ background: none;
+ color: #999999;
+ cursor: not-allowed;
+}
+.rdtPicker tr .dow {
+ width: 14.2857%;
+ border-bottom: none;
+ font-size: .875rem;
+ width: 36px;
+ height: 36px;
+ transition: all .15s ease;
+ text-align: center;
+ border: none;font-weight: 500;
+ border-radius: .375rem;
+}
+.rdtPicker th.rdtSwitch {
+ font-weight: 500;
+ border-radius: .375rem;
+ font-size: .875rem;
+ width: 145px;
+ height: 36px;
+ transition: all .15s ease;
+ text-align: center;
+ border: none;
+}
+.rdtPicker th.rdtNext,
+.rdtPicker th.rdtPrev {
+ font-size: .875rem;
+ width: 36px;
+ height: 36px;
+ transition: all .15s ease;
+ text-align: center;
+ border: none;
+ border-radius: .375rem;
+ cursor: pointer;
+}
+
+.rdtPicker {
+ .dow,
+ th.rdtSwitch,
+ th.rdtNext,
+ th.rdtPrev,
+ .rdtTimeToggle {
+ color: $gray-700;
+ }
+}
+
+.rdtPrev span,
+.rdtNext span {
+ display: block;
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Chrome/Safari/Opera */
+ -khtml-user-select: none; /* Konqueror */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none;
+}
+
+.rdtPicker th.rdtDisabled,
+.rdtPicker th.rdtDisabled:hover {
+ background: none;
+ color: #999999;
+ cursor: not-allowed;
+}
+.rdtPicker thead tr:first-child th {
+ cursor: pointer;
+}
+.rdtPicker thead tr:first-child th:hover {
+ background: #eeeeee;
+}
+
+.rdtPicker button {
+ border: none;
+ background: none;
+ cursor: pointer;
+}
+.rdtPicker button:hover {
+ background-color: #eee;
+}
+
+.rdtPicker thead button {
+ width: 100%;
+ height: 100%;
+}
+
+td.rdtMonth,
+td.rdtYear {
+ height: 50px;
+ width: 25%;
+ cursor: pointer;
+}
+td.rdtMonth:hover,
+td.rdtYear:hover {
+ background: #eee;
+}
+
+.rdtCounters {
+ display: inline-block;
+}
+
+.rdtCounters {
+ > div {
+ float: left;
+ width: 40px;
+ font-weight: inherit;
+ margin: 3px;
+ border-radius: 50%;
+ }
+ .rdtCounterSeparator {
+ width: 0;
+ border: 1px solid transparent;
+ }
+}
+
+.rdtCounter {
+ height: 100px;
+}
+
+.rdtCounter {
+ width: 40px;
+ .rdtCount {
+ padding: 7px;
+ height: 40px;
+ border: 1px solid transparent;
+ }
+}
+.rdtCounters {
+ .rdtCounter:last-child {
+ .rdtCount {
+ color: $info;
+ border-radius: 50%;
+ border: 1px solid $info;
+ }
+ }
+}
+
+.rdtCounterSeparator {
+ padding: 7px;
+ line-height: 100px;
+}
+.rdtCounter .rdtBtn {
+ line-height: 40px;
+ cursor: pointer;
+ display: block;
+ border-radius: 50%;
+ color: $gray-500;
+ -webkit-transition: all 60ms ease-in;
+ -moz-transition: all 60ms ease-in;
+ -o-transition: all 60ms ease-in;
+ -ms-transition: all 60ms ease-in;
+ transition: all 60ms ease-in;
+
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Chrome/Safari/Opera */
+ -khtml-user-select: none; /* Konqueror */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none;
+}
+.rdtCounter .rdtBtn:hover {
+ background: #eee;
+ color: #797979;
+}
+.rdtCounter .rdtCount {
+ font-size: inherit;
+ line-height: 25px;
+}
+
+.rdtMilli {
+ vertical-align: middle;
+ padding-left: 8px;
+ width: 48px;
+}
+
+.rdtMilli input {
+ width: 100%;
+ font-size: inherit;
+ margin-top: 37px;
+}
+.rdtMonths,
+.rdtYears {
+ padding-bottom: 10px;
+ .rdtMonth,
+ .rdtYear {
+ display: inline-block;
+ width: 56px;
+ height: 56px;
+ line-height: 56px;
+ margin: 3px 3px;
+ cursor: pointer;
+ border-radius: 50%;
+ text-align: center;
+
+ &.rdtActive,
+ &.start-date,
+ &.end-date,
+ &.middle-date {
+ background-color: $info !important;
+ color: $white;
+ }
+ }
+}
+.input-group .input-group-prepend + .rdt .form-control{
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.input-group .input-group-prepend + .rdt .form-control{
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.input-group > .rdt:not(:last-child) .form-control{
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.form-group .rdt {
+ width: 1%;
+ margin-bottom: 0;
+ flex: 1 1 auto;
+}
diff --git a/devine_ui/src/assets/scss/react/react-differences.scss b/devine_ui/src/assets/scss/react/react-differences.scss
new file mode 100644
index 0000000..8694306
--- /dev/null
+++ b/devine_ui/src/assets/scss/react/react-differences.scss
@@ -0,0 +1,12 @@
+// Differences from the HTML to the React product
+
+// bootstrap
+@import "bootstrap/spinners";
+// react plugins
+@import "plugins/plugin-react-datetime";
+// core components
+@import "buttons";
+@import "mixins";
+@import "navbar-dropdown";
+@import "navbar";
+@import "tables";
diff --git a/devine_ui/src/components/Footers/AdminFooter.js b/devine_ui/src/components/Footers/AdminFooter.js
new file mode 100644
index 0000000..246da5a
--- /dev/null
+++ b/devine_ui/src/components/Footers/AdminFooter.js
@@ -0,0 +1,31 @@
+import React from "react";
+
+// reactstrap components
+import { Container, Row, Col, Nav, NavItem, NavLink } from "reactstrap";
+
+class Footer extends React.Component {
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default Footer;
diff --git a/devine_ui/src/components/Footers/AuthFooter.js b/devine_ui/src/components/Footers/AuthFooter.js
new file mode 100644
index 0000000..5046aea
--- /dev/null
+++ b/devine_ui/src/components/Footers/AuthFooter.js
@@ -0,0 +1,33 @@
+import React from "react";
+
+// reactstrap components
+import { NavItem, NavLink, Nav, Container, Row, Col } from "reactstrap";
+
+class Login extends React.Component {
+ render() {
+ return (
+ <>
+
+
+ );
+ }
+}
+
+export default Login;
diff --git a/devine_ui/src/components/Headers/Header.js b/devine_ui/src/components/Headers/Header.js
new file mode 100644
index 0000000..d90f32a
--- /dev/null
+++ b/devine_ui/src/components/Headers/Header.js
@@ -0,0 +1,39 @@
+/*!
+
+=========================================================
+* Argon Dashboard React - v1.1.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React from "react";
+
+// reactstrap components
+import { Card, CardBody, CardTitle, Container, Row, Col } from "reactstrap";
+
+class Header extends React.Component {
+ render() {
+ return (
+ <>
+
+
+ );
+ }
+}
+
+export default Header;
diff --git a/devine_ui/src/components/Headers/UserHeader.js b/devine_ui/src/components/Headers/UserHeader.js
new file mode 100644
index 0000000..3dc40fa
--- /dev/null
+++ b/devine_ui/src/components/Headers/UserHeader.js
@@ -0,0 +1,64 @@
+/*!
+
+=========================================================
+* Argon Dashboard React - v1.1.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React from "react";
+
+// reactstrap components
+import { Button, Container, Row, Col } from "reactstrap";
+
+class UserHeader extends React.Component {
+ render() {
+ return (
+ <>
+
+ {/* Mask */}
+
+ {/* Header container */}
+
+
+
+ Hello Jesse
+
+ This is your profile page. You can see the progress you've
+ made with your work and manage your projects or assigned tasks
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default UserHeader;
diff --git a/devine_ui/src/components/Navbars/AdminNavbar.js b/devine_ui/src/components/Navbars/AdminNavbar.js
new file mode 100644
index 0000000..b511445
--- /dev/null
+++ b/devine_ui/src/components/Navbars/AdminNavbar.js
@@ -0,0 +1,103 @@
+/*!
+
+=========================================================
+* Argon Dashboard React - v1.1.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React from "react";
+import { Link } from "react-router-dom";
+// reactstrap components
+import {
+ DropdownMenu,
+ DropdownItem,
+ UncontrolledDropdown,
+ DropdownToggle,
+ Form,
+ FormGroup,
+ InputGroupAddon,
+ InputGroupText,
+ Input,
+ InputGroup,
+ Navbar,
+ Nav,
+ Container,
+ Media
+} from "reactstrap";
+
+class AdminNavbar extends React.Component {
+ render() {
+ return (
+ <>
+
+
+
+ {this.props.brandText}
+
+
+
+
+
+
+ );
+ }
+}
+
+export default AdminNavbar;
diff --git a/devine_ui/src/components/Navbars/AuthNavbar.js b/devine_ui/src/components/Navbars/AuthNavbar.js
new file mode 100644
index 0000000..afb0bf0
--- /dev/null
+++ b/devine_ui/src/components/Navbars/AuthNavbar.js
@@ -0,0 +1,116 @@
+/*!
+
+=========================================================
+* Argon Dashboard React - v1.1.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React from "react";
+import { Link } from "react-router-dom";
+// reactstrap components
+import {
+ UncontrolledCollapse,
+ NavbarBrand,
+ Navbar,
+ NavItem,
+ NavLink,
+ Nav,
+ Container,
+ Row,
+ Col
+} from "reactstrap";
+
+class AdminNavbar extends React.Component {
+ render() {
+ return (
+ <>
+
+
+
+ ![...]({require("assets/img/brand/argon-react-white.png")})
+
+
+
+
+
+
+
+ ![...]({require("assets/img/brand/argon-react.png")})
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default AdminNavbar;
diff --git a/devine_ui/src/components/Sidebar/Sidebar.js b/devine_ui/src/components/Sidebar/Sidebar.js
new file mode 100644
index 0000000..f92c6d6
--- /dev/null
+++ b/devine_ui/src/components/Sidebar/Sidebar.js
@@ -0,0 +1,247 @@
+import React from "react";
+import { NavLink as NavLinkRRD, Link } from "react-router-dom";
+// nodejs library to set properties for components
+import { PropTypes } from "prop-types";
+
+// reactstrap components
+import {
+ Button,
+ Card,
+ CardHeader,
+ CardBody,
+ CardTitle,
+ Collapse,
+ DropdownMenu,
+ DropdownItem,
+ UncontrolledDropdown,
+ DropdownToggle,
+ FormGroup,
+ Form,
+ Input,
+ InputGroupAddon,
+ InputGroupText,
+ InputGroup,
+ Media,
+ NavbarBrand,
+ Navbar,
+ NavItem,
+ NavLink,
+ Nav,
+ Progress,
+ Table,
+ Container,
+ Row,
+ Col
+} from "reactstrap";
+
+var ps;
+
+class Sidebar extends React.Component {
+ state = {
+ collapseOpen: false
+ };
+ constructor(props) {
+ super(props);
+ this.activeRoute.bind(this);
+ }
+ // verifies if routeName is the one active (in browser input)
+ activeRoute(routeName) {
+ return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
+ }
+ // toggles collapse between opened and closed (true/false)
+ toggleCollapse = () => {
+ this.setState({
+ collapseOpen: !this.state.collapseOpen
+ });
+ };
+ // closes the collapse
+ closeCollapse = () => {
+ this.setState({
+ collapseOpen: false
+ });
+ };
+ // creates the links that appear in the left menu / Sidebar
+ createLinks = routes => {
+ return routes.map((prop, key) => {
+ return (
+
+
+
+ {prop.name}
+
+
+ );
+ });
+ };
+ render() {
+ const { bgColor, routes, logo } = this.props;
+ let navbarBrandProps;
+ if (logo && logo.innerLink) {
+ navbarBrandProps = {
+ to: logo.innerLink,
+ tag: Link
+ };
+ } else if (logo && logo.outterLink) {
+ navbarBrandProps = {
+ href: logo.outterLink,
+ target: "_blank"
+ };
+ }
+ return (
+
+
+ {/* Toggler */}
+
+ {/* Brand Logo */}
+
+ {/* User */}
+
+ {/* Collapse */}
+
+ {/* Collapse header */}
+
+
+ {logo ? (
+
+ {logo.innerLink ? (
+
+ 
+
+ ) : (
+
+
+
+ )}
+
+ ) : null}
+
+
+
+
+
+ );
+ }
+}
+
+Sidebar.defaultProps = {
+ routes: [{}]
+};
+
+Sidebar.propTypes = {
+ // links that will be displayed inside the component
+ routes: PropTypes.arrayOf(PropTypes.object),
+ logo: PropTypes.shape({
+ // innerLink is for links that will direct the user within the app
+ // it will be rendered as
... tag
+ innerLink: PropTypes.string,
+ // outterLink is for links that will direct the user outside the app
+ // it will be rendered as simple
... tag
+ outterLink: PropTypes.string,
+ // the image src of the logo
+ imgSrc: PropTypes.string.isRequired,
+ // the alt for the img
+ imgAlt: PropTypes.string.isRequired
+ })
+};
+
+export default Sidebar;
diff --git a/devine_ui/src/index.js b/devine_ui/src/index.js
new file mode 100644
index 0000000..266f996
--- /dev/null
+++ b/devine_ui/src/index.js
@@ -0,0 +1,36 @@
+/*!
+
+=========================================================
+* Argon Dashboard React - v1.1.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+
+import "assets/plugins/nucleo/css/nucleo.css";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import "assets/scss/argon-dashboard-react.scss";
+
+import AdminLayout from "layouts/Admin.js";
+
+ReactDOM.render(
+
+
+ } />
+
+
+ ,
+ document.getElementById("root")
+);
diff --git a/devine_ui/src/layouts/Admin.js b/devine_ui/src/layouts/Admin.js
new file mode 100644
index 0000000..0081c70
--- /dev/null
+++ b/devine_ui/src/layouts/Admin.js
@@ -0,0 +1,92 @@
+/*!
+
+=========================================================
+* Argon Dashboard React - v1.1.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-react
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard-react/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import React from "react";
+import { Route, Switch, Redirect } from "react-router-dom";
+// reactstrap components
+import { Container } from "reactstrap";
+// core components
+import AdminNavbar from "components/Navbars/AdminNavbar.js";
+import AdminFooter from "components/Footers/AdminFooter.js";
+import Sidebar from "components/Sidebar/Sidebar.js";
+
+import routes from "routes.js";
+
+class Admin extends React.Component {
+ componentDidUpdate(e) {
+ document.documentElement.scrollTop = 0;
+ document.scrollingElement.scrollTop = 0;
+ this.refs.mainContent.scrollTop = 0;
+ }
+ getRoutes = routes => {
+ return routes.map((prop, key) => {
+ if (prop.layout === "/admin") {
+ return (
+
+ );
+ } else {
+ return null;
+ }
+ });
+ };
+ getBrandText = path => {
+ for (let i = 0; i < routes.length; i++) {
+ if (
+ this.props.location.pathname.indexOf(
+ routes[i].layout + routes[i].path
+ ) !== -1
+ ) {
+ return routes[i].name;
+ }
+ }
+ return "Brand";
+ };
+ render() {
+ return (
+ <>
+
+
+
+
+ {this.getRoutes(routes)}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Admin;
diff --git a/devine_ui/src/routes.js b/devine_ui/src/routes.js
new file mode 100644
index 0000000..9e505de
--- /dev/null
+++ b/devine_ui/src/routes.js
@@ -0,0 +1,46 @@
+import Index from "views/Index.js";
+import PowerDispatch from "views/examples/PowerDispatch.js";
+//import Maps from "views/examples/Maps.js";
+//import Register from "views/examples/Register.js";
+//import Login from "views/examples/Login.js";
+import Notifications from "views/examples/Notifications.js";
+//import Icons from "views/examples/Icons.js";
+
+var routes = [
+ {
+ path: "/index",
+ name: "Dashboard",
+ icon: "ni ni-tv-2 text-primary",
+ component: Index,
+ layout: "/admin"
+ },
+ // {
+ // path: "/icons",
+ // name: "Power Dispatch",
+ // icon: "ni ni-planet text-blue",
+ // component: Icons,
+ // layout: "/admin"
+ // },
+ // {
+ // path: "/maps",
+ // name: "Maps",
+ // icon: "ni ni-pin-3 text-orange",
+ // component: Maps,
+ // layout: "/admin"
+ // },
+ {
+ path: "/user-profile",
+ name: "Power Dispatch",
+ icon: "ni ni-single-02 text-yellow",
+ component: PowerDispatch,
+ layout: "/admin"
+ },
+ {
+ path: "/tables",
+ name: "Alerts & Notifications",
+ icon: "ni ni-bullet-list-67 text-red",
+ component: Notifications,
+ layout: "/admin"
+ },
+];
+export default routes;
diff --git a/devine_ui/src/views/Index.js b/devine_ui/src/views/Index.js
new file mode 100644
index 0000000..eea1636
--- /dev/null
+++ b/devine_ui/src/views/Index.js
@@ -0,0 +1,347 @@
+import React from "react";
+// node.js library that concatenates classes (strings)
+import classnames from "classnames";
+// javascipt plugin for creating charts
+// import Chart from "chart.js";
+// react plugin used to create charts
+import { Line, Bar } from "react-chartjs-2";
+import Chart from 'react-apexcharts'
+
+// reactstrap components
+import {
+ Button,
+ Card,
+ CardHeader,
+ CardBody,
+ NavItem,
+ NavLink,
+ Nav,
+ Progress,
+ Table,
+ Container,
+ Row,
+ Col
+} from "reactstrap";
+
+// core components
+import {
+ chartOptions,
+ parseOptions,
+ chartExample1,
+ chartExample2
+} from "variables/charts.js";
+
+import Header from "components/Headers/Header.js";
+
+
+class Index extends React.Component {
+ constructor(props){
+ super(props);
+ this.state = {
+ activeNav: 1,
+ uniqueDriversSeries: [{
+ name: 'Unique Drivers',
+ data: [4, 5, 7, 16, 14, 10, 2]
+ }],
+ sessionsSeries: [{
+ name: 'Sessions',
+ data: [3, 6, 8, 15, 13, 18, 4]
+ }],
+ stationStatusSeries: [{
+ name: ' In Use',
+ data: [44]
+ }, {
+ name: ' Available',
+ data: [76]
+ }, {
+ name: ' Not Ready',
+ data: [35]
+ }, {
+ name: ' Watch List',
+ data: [5]
+ }, {
+ name: ' Needs Servicce',
+ data: [12]
+ }],
+ avgSessionLenSeries: [{
+ name: 'Charging',
+ data: [90, 55]
+ }, {
+ name: 'Idle',
+ data: [10, 32]
+ }],
+ avgSessionLenOptions: {
+ chart: {
+ type: 'bar',
+ height: 350,
+ stacked: true,
+ stackType: '100%'
+ },
+ plotOptions: {
+ bar: {
+ horizontal: true,
+ },
+ },
+ stroke: {
+ width: 1,
+ colors: ['#fff']
+ },
+ xaxis: {
+ categories: ["Weekdays", "Weekends"],
+ },
+ tooltip: {
+ y: {
+ formatter: function (val) {
+ return val + "K"
+ }
+ }
+ },
+ fill: {
+ opacity: 1
+
+ },
+ legend: {
+ position: 'top',
+ horizontalAlign: 'left',
+ offsetX: 40
+ }
+ },
+ stationStatusOptions: {
+ chart: {
+ type: 'bar',
+ height: 350
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '55%',
+ },
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent']
+ },
+ xaxis: {
+ categories: ['', '', '', '', ''],
+ },
+ colors: ['#3498DB', '#28B463', '#808B96', '#F4D03F', '#E74C3C'],
+ yaxis: {
+ title: {
+ text: 'Number of Parts'
+ }
+ },
+ fill: {
+ opacity: 1
+ },
+ tooltip: {
+ y: {
+ formatter: function (val) {
+ return "$ " + val + " thousands"
+ }
+ }
+ },
+ legend: {
+ position: "right",
+ fontSize: '16px',
+ markers: {
+ width: 24,
+ height: 24,
+ }
+ }
+ },
+ uniqueDriversOptions: {
+ chart: {
+ type: 'bar',
+ height: 350
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '55%',
+ },
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent']
+ },
+ xaxis: {
+ categories: ['11/18', '11/19', '11/20', '11/21', '11/22', '11/23', '11/24',],
+ },
+ yaxis: {
+ title: {
+ }
+ },
+ fill: {
+ opacity: 1
+ },
+ tooltip: {
+ y: {
+ formatter: function (val) {
+ return "$ " + val + " thousands"
+ }
+ }
+ }
+ },
+ sessionsOptions: {
+ chart: {
+ type: 'bar',
+ height: 350
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '55%',
+ },
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent']
+ },
+ colors: ['#F39C12'],
+ xaxis: {
+ categories: ['11/18', '11/19', '11/20', '11/21', '11/22', '11/23', '11/24',],
+ },
+ yaxis: {
+ title: {
+ }
+ },
+ fill: {
+ opacity: 1
+ },
+ tooltip: {
+ y: {
+ formatter: function (val) {
+ return "$ " + val + " thousands"
+ }
+ }
+ }
+ },
+ };
+ if (window.Chart) {
+ // parseOptions(Chart, chartOptions());
+ }
+ }
+ toggleNavs = (e, index) => {
+ e.preventDefault();
+ this.setState({
+ activeNav: index,
+ // chartExample1Data:
+ // this.state.chartExample1Data === "data1" ? "data2" : "data1"
+ });
+ };
+ render() {
+ return (
+ <>
+
+ {/* Page content */}
+
+
+
+
+
+
+
+
Station Status
+
+
+
+
+ {/* Chart */}
+
+
+
+
+
+
+
+
+
+
+
+
Unique Drivers
+
+
+
+
+ {/* Chart */}
+
+
+
+
+
+ {/* Adjust space between rows, mt-x*/}
+
+
+
+
+
+
Sessions
+
+
+
+
+ {/* Chart */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Environment
+
+
+
+
+ ![...]({require("assets/img/theme/environment.png")})
+
+
+
+
+
+
+
+
+
+
+
Unique Drivers
+
+
+
+
+ {/* Chart */}
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Index;
diff --git a/devine_ui/src/views/examples/Notifications.js b/devine_ui/src/views/examples/Notifications.js
new file mode 100644
index 0000000..ba55e3c
--- /dev/null
+++ b/devine_ui/src/views/examples/Notifications.js
@@ -0,0 +1,751 @@
+import React from "react";
+import Checkbox from '@material-ui/core/Checkbox';
+import { withStyles } from '@material-ui/core/styles';
+
+import { green } from '@material-ui/core/colors';
+// reactstrap components
+import {
+ Badge,
+ Card,
+ CardHeader,
+ CardFooter,
+ DropdownMenu,
+ DropdownItem,
+ UncontrolledDropdown,
+ DropdownToggle,
+ Media,
+ Pagination,
+ PaginationItem,
+ PaginationLink,
+ Progress,
+ Table,
+ Container,
+ Row,
+ UncontrolledTooltip,
+ Button,
+ Col,
+ Form,
+ FormGroup,
+ InputGroupAddon,
+ InputGroupText,
+ Input,
+ InputGroup,
+} from "reactstrap";
+// core components
+import Header from "components/Headers/Header.js";
+
+const GreenCheckbox = withStyles({
+ root: {
+ color: green[400],
+ '&$checked': {
+ color: green[600],
+ },
+ },
+ checked: {},
+})((props) =>
);
+
+class Notifications extends React.Component {
+ render() {
+ return (
+ <>
+
+ {/* Page content */}
+
+ {/* Table */}
+
+
+
+
+
+
+
+
+ Alerts
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Date |
+ Time |
+ Type |
+ Description |
+ Status |
+ |
+
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 5:50 |
+
+ Price Alert
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ pending
+
+ |
+
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 3:51 |
+
+ Resource Depletion
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ Open
+
+ |
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 14:20 |
+
+ Capacity Bounds
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ Resolved
+
+ |
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 5:50 |
+
+ Price Alert
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ pending
+
+ |
+
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 3:51 |
+
+ Resource Depletion
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ Open
+
+ |
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 14:20 |
+
+ Capacity Bounds
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ Resolved
+
+ |
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 5:50 |
+
+ Price Alert
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ pending
+
+ |
+
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 3:51 |
+
+ Resource Depletion
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ Open
+
+ |
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 14:20 |
+
+ Capacity Bounds
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ Resolved
+
+ |
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 5:50 |
+
+ Price Alert
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ pending
+
+ |
+
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 3:51 |
+
+ Resource Depletion
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ Open
+
+ |
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 14:20 |
+
+ Capacity Bounds
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ Resolved
+
+ |
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 5:50 |
+
+ Price Alert
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ pending
+
+ |
+
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 3:51 |
+
+ Resource Depletion
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ Open
+
+ |
+
+
+
+ |
+
+ 11/20/2020
+
+
+ |
+ 14:20 |
+
+ Capacity Bounds
+ |
+
+ Lorem ipsum dolor sit amet
+ |
+
+
+
+ Resolved
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Delete |
+ Email |
+ Load(yellow) |
+ Load(red) |
+ Source Depletion |
+ Telecomm Alerts |
+ |
+
+
+
+
+ |
+
+ |
+ user1@gmail.com |
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+ |
+ user2@gmail.com |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+ |
+
+ |
+ user3@gmail.com |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+ |
+
+ |
+ user4@gmail.com |
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+ |
+ user5@gmail.com |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+ |
+
+ |
+ user6@gmail.com |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+ |
+
+ |
+ user7@gmail.com |
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+ |
+ user8@gmail.com |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+ |
+
+ |
+ user9@gmail.com |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+ |
+
+ |
+ user10@gmail.com |
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+ |
+ user11@gmail.com |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+ {/* Dark table */}
+
+
+
+ );
+ }
+}
+
+export default Notifications;
diff --git a/devine_ui/src/views/examples/PowerDispatch.js b/devine_ui/src/views/examples/PowerDispatch.js
new file mode 100644
index 0000000..68423eb
--- /dev/null
+++ b/devine_ui/src/views/examples/PowerDispatch.js
@@ -0,0 +1,355 @@
+import React from "react";
+import Chart from 'react-apexcharts'
+import Switch from "react-switch";
+// reactstrap components
+import {
+ Button,
+ Card,
+ CardHeader,
+ CardBody,
+ FormGroup,
+ Form,
+ Input,
+ Container,
+ Row,
+ Col
+} from "reactstrap";
+// core components
+import Header from "components/Headers/Header.js";
+
+class PowerDispatch extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+
+ systemLoadSeries: [{
+ name: "kW",
+ data: [25, 35, 70, 80, 90, 95, 85, 80, 75, 70, 55, 80, 120, 140, 180, 185, 180, 160, 140, 130, 115, 90, 70, 30]
+ }],
+
+ systemLoadOptions: {
+ chart: {
+ height: 350,
+ type: 'line',
+ zoom: {
+ enabled: false
+ }
+ },
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ curve: 'straight'
+ },
+ xaxis: {
+ title: {
+ text: 'Hours'
+ }
+ },
+ yaxis: {
+ title: {
+ text: 'System Load (kW)'
+ }
+ },
+ annotations: {
+ xaxis: [{
+ x: 24,
+ strokeDashArray: 10,
+ borderColor: '#ABB2B9',
+ label: {
+ borderColor: '#ABB2B9',
+ style: {
+ color: '#fff',
+ background: '#ABB2B9',
+ },
+ text: 'End of Day',
+ }
+ }],
+ yaxis: [{
+ y: 180,
+ strokeDashArray: 10,
+ borderColor: '#E74C3C',
+ label: {
+ borderColor: '#E74C3C',
+ style: {
+ color: '#fff',
+ background: '#E74C3C',
+ },
+ text: 'System Capacity',
+ }
+ }]
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+ opacity: 0.5
+ },
+ },
+ xaxis: {
+ categories: [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 1, 2, 3, 4, 5, 6, ],
+ }
+ },
+
+ resourcesSeries: [{
+ name: ' Available',
+ data: [44, 55, 41]
+ }, {
+ name: ' Utilized',
+ data: [13, 23, 20]
+ }],
+ resourcesOptions: {
+ chart: {
+ type: 'bar',
+ height: 350,
+ stacked: true,
+ stackType: '100%'
+ },
+ responsive: [{
+ breakpoint: 480,
+ options: {
+ legend: {
+ position: 'bottom',
+ offsetX: -10,
+ offsetY: 0
+ }
+ }
+ }],
+ colors: ['#28B463', '#F4D03F'],
+
+ xaxis: {
+ categories: ['PV', 'Batteries', 'Chargers'],
+ },
+ fill: {
+ opacity: 1
+ },
+ legend: {
+ position: "right",
+ fontSize: '16px',
+ markers: {
+ width: 24,
+ height: 24,
+ }
+ }
+ },
+
+ };
+ }
+
+
+
+
+ render() {
+ return (
+ <>
+
+ {/* Page content */}
+
+
+
+
+
+
+
+
+
Station Status
+
+
+
+
+ {/* Chart */}
+
+
+
+
+
+
+
+
+
+
+
+ Constraints and Alert Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Environment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Other Controls
+
+
+
+
+
+ Cost minimization
+
+
+
+ Cost and CO2 minimization
+
+
+
+ Transformer compacity limit
+
+
+
+ {/* Chart */}
+ {/* */}
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default PowerDispatch;