Add theme assets;

This commit is contained in:
2024-01-21 17:18:37 +01:00
parent fcc061aeba
commit aa45b6a645
1425 changed files with 430771 additions and 1 deletions

View File

@@ -0,0 +1,390 @@
// Dark theme variables
// Bootstrap base colors
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #cbd1db !default;
$gray-500: #aeb7c5 !default;
$gray-600: #7987a1 !default;
$gray-700: #41516c !default;
$gray-800: #212a3a !default;
$gray-900: #060c17 !default;
$black: #000 !default;
$text-muted: $gray-600 !default;
// Bootstrap custom colors
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
// --- Bootstrap Theme Colors --- //
//
$primary: #6571ff !default;
$secondary: $gray-600 !default;
$success: #05a34a !default;
$info: #66d1d1 !default;
$warning: #fbbc06 !default;
$danger: #ff3366 !default;
$light: $gray-200 !default;
$dark: $gray-900 !default;
//
// --- Bootstrap Theme Colors --- //
// Social colors
$social-colors: (
"facebook": #3b5998,
"twitter": #1da1f2,
"google": #dc4e41,
"youtube": #f00,
"vimeo": #1ab7ea,
"dribbble": #ea4c89,
"github": #181717,
"instagram": #e4405f,
"pinterest": #bd081c,
"flickr": #0063dc,
"bitbucket": #0052cc,
"linkedin": #0077b5
) !default;
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 3 !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-gradients: false !default;
$enable-negative-margins: 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: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
6: ($spacer * 4.5),
7: ($spacer * 6)
);
// Position
//
// Define the edge positioning anchors of the position utilities.
$position-values: (
0: 0,
10: 10%,
20: 20%,
25: 25%,
30: 30%,
40: 40%,
50: 50%,
60: 60%,
70: 70%,
75: 75%,
80: 80%,
90: 90%,
100: 100%
) !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: #070d19 !default;
$body-color: #d0d6e1 !default;
// Links
//
// Style anchor elements.
$link-decoration: none !default;
// $link-hover-decoration: underline !default;
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 0 !default;
// Grid columns
$grid-gutter-width: 1.5rem !default;
// Components
//
// Define common padding and border radius sizes and more.
// Border
$border-color: #172340 !default;
// Border Radiues
$border-radius: .25rem !default;
$action-transition-duration: 0.2s;
$action-transition-timing-function: ease;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
// Font family
$font-family-sans-serif: "Roboto", Helvetica, sans-serif !default;
$font-size-base: 0.875rem !default; // 14px
$font-size-lg: 1rem !default; // 16px
$font-size-sm: 0.812rem !default; // 13px
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 500 !default;
$font-weight-bolder: 700 !default;
$font-weight-boldest: 900 !default;
$font-weight-base: $font-weight-normal !default;
// Heading sizes
$h1-font-size: 2.5rem !default;
$h2-font-size: 2rem !default;
$h3-font-size: 1.5rem !default;
$h4-font-size: 1.25rem !default;
$h5-font-size: 1rem !default;
$h6-font-size: $font-size-base !default;
$headings-margin-bottom: 0 !default;
$headings-font-weight: 500 !default;
$hr-opacity: .1 !default;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding-y: .85rem !default;
$table-cell-padding-x: .85rem !default;
$table-cell-padding-y-sm: .55rem !default;
$table-cell-padding-x-sm: .55rem !default;
$table-striped-bg: #080e1b !default;
$table-active-bg: #050913 !default;
$table-hover-bg: #080e1b !default;
$table-group-separator-color: $border-color;
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-padding-y: .469rem !default;
$input-btn-padding-x: .8rem !default;
$input-btn-focus-box-shadow: none !default;
$input-btn-focus-width: 0 !default;
$input-placeholder-color: $gray-500 !default;
$input-btn-padding-y-xs: .313rem !default;
$input-btn-padding-x-xs: .8rem !default;
$input-btn-font-size-xs: .75rem !default;
$input-btn-padding-y-sm: .391rem !default;
$input-btn-padding-x-sm: .8rem !default;
$input-btn-font-size-sm: $font-size-sm !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: .8rem !default;
$input-btn-font-size-lg: $font-size-lg !default;
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-font-weight: $font-weight-normal !default;
$btn-padding-y-xs: $input-btn-padding-y-xs !default;
$btn-padding-x-xs: $input-btn-padding-x-xs !default;
$btn-font-size-xs: $input-btn-font-size-xs !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-sm: $border-radius !default;
$btn-border-radius-lg: $border-radius !default;
// Forms
$input-padding-y-xs: $input-btn-padding-y-xs !default;
$input-padding-x-xs: $input-btn-padding-x-xs !default;
$input-font-size-xs: $input-btn-font-size-xs !default;
$input-bg: #0c1427 !default;
$input-disabled-bg: lighten($input-bg, 5%) !default; // dark
$input-border-color: $border-color !default;
$input-focus-border-color: lighten($border-color, 10%) !default;
$input-border-radius: $btn-border-radius !default;
$input-border-radius-sm: $btn-border-radius-sm !default;
$input-border-radius-lg: $btn-border-radius-lg !default;
// form-check
$form-check-input-width: 1.3em !default;
$form-check-input-border: 1px solid lighten($input-border-color, 20%) !default; // dark
$form-check-input-focus-border: lighten($input-border-color, 25%) !default; // dark
$form-check-input-border-radius: .15em !default;
// Form switch
$form-switch-color: lighten($input-bg, 60%) !default; // dark
$form-switch-focus-color: lighten($input-bg, 65%) !default; // dark
// Input-group
$input-group-addon-padding-x: .563rem !default;
$input-group-addon-bg: lighten($input-bg, 5%) !default;
// Range
$form-range-track-bg: lighten($input-bg, 5%) !default; // dark
// Navs
$nav-tabs-border-color: $border-color !default; // dark
$nav-tabs-link-bg: transparent; // custom variable
$nav-tabs-link-border-color: $border-color $border-color $nav-tabs-border-color; // custom variable
$nav-tabs-link-active-bg: $input-bg !default;
$nav-tabs-link-active-border-color: $border-color $border-color $nav-tabs-link-active-bg !default; //dark
// Dropdowns
$dropdown-font-size: 13px !default; // dark
$dropdown-color: $text-muted !default; // dark
$dropdown-bg: $gray-900 !default; // dark
$dropdown-border-color: $border-color;
$dropdown-box-shadow: 0 0 10px 0 #060b15;
$dropdown-link-color: $body-color !default; // dark
// Pagination
$pagination-padding-y: .469rem !default;
$pagination-padding-x: 1rem !default;
$pagination-padding-y-sm: .391rem !default;
$pagination-padding-x-sm: .75rem !default;
$pagination-padding-y-lg: .5rem !default;
$pagination-padding-x-lg: 1.1rem !default;
$pagination-color: $primary !default;
$pagination-bg: $input-bg !default; // dark
$pagination-border-color: $border-color !default; // dark
$pagination-focus-bg: lighten($input-bg, 10%) !default; // dark
$pagination-hover-bg: lighten($input-bg, 10%); // dark
$pagination-hover-border-color: lighten($input-bg, 10%); // dark
$pagination-active-bg: $primary !default;
$pagination-active-border-color: $primary !default;
$pagination-disabled-color: $gray-700 !default; // dark
$pagination-disabled-bg: $input-bg !default; // dark
$pagination-disabled-border-color: $border-color !default; // dark
// Cards
$card-box-shadow: 3px 0 10px 0 #060b15; // custom variable
$card-spacer-y: 1.5rem !default;
$card-spacer-x: 1.5rem !default;
$card-title-spacer-y: .875rem !default;
$card-border-color: #172340 !default;
$card-cap-padding-y: .875rem !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: #0a1122 !default;
$card-bg: #0c1427 !default; // dark
// Accordion
$accordion-bg: $input-bg !default;
$accordion-border-color: $border-color !default;
$accordion-icon-width: .875rem !default;
$accordion-button-active-bg: lighten($input-bg, 5%) !default; // dark
// Popovers
$popover-bg: $input-bg !default; // dark
$popover-border-color: $border-color !default;
$popover-header-bg: lighten($input-bg, 5%) !default;
// Badges
$badge-font-size: .8em !default;
$badge-font-weight: $font-weight-bold !default;
// Modals
$modal-content-bg: $input-bg !default; //dark
$modal-content-border-color: $border-color !default;
$modal-fade-transform: scale(.8) !default;
$modal-transition: transform .4s ease !default;
// Modals
// Progress bars
$progress-bg: lighten($input-bg, 5%) !default; // dark
// List group
$list-group-color: $body-color!default; // dark
$list-group-bg: $input-bg !default; // dark
$list-group-border-color: $border-color !default; // dark
$list-group-item-padding-y: .75rem !default;
$list-group-item-padding-x: 1.25rem !default;
$list-group-hover-bg: lighten($input-bg, 5%); // dark
$list-group-action-color: $gray-400 !default; // dark
// Close
$btn-close-width: .8em !default;
$btn-close-color: $text-muted !default;

View File

@@ -0,0 +1,13 @@
// npm package: ace-builds (Ajax.org Cloud9 Editor)
// github link: https://github.com/ajaxorg/ace-builds
.ace_editor {
border-radius: $input-border-radius;
margin: auto;
height: 300px;
width: 100%;
font: 14px/normal SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
.ace_content{
font-size: $font-size-base;
}
}

View File

@@ -0,0 +1,88 @@
// npm package: apexcharts
// github link: https://github.com/apexcharts/apexcharts.js
div.apexcharts-canvas {
.apexcharts-menu {
background: $dropdown-bg !important;
color: $body-color;
border-color: $border-color;
}
.apexcharts-zoom-icon svg,
.apexcharts-zoomin-icon svg,
.apexcharts-zoomout-icon svg,
.apexcharts-reset-icon svg,
.apexcharts-pan-icon svg,
.apexcharts-selection-icon svg,
.apexcharts-menu-icon svg,
.apexcharts-toolbar-custom-icon svg {
fill: $secondary;
}
.apexcharts-legend.apexcharts-align-right .apexcharts-legend-series,
.apexcharts-legend.apexcharts-align-left .apexcharts-legend-series {
display: flex;
align-items: center;
}
.apexcharts-legend-marker {
margin-right: 3px;
}
.apexcharts-tooltip {
background: rgba($dropdown-bg, .8);
color: $body-color;
box-shadow: $dropdown-box-shadow;
border-radius: $border-radius;
border: 1px solid $dropdown-border-color;
.apexcharts-tooltip-title {
border-color: $border-color;
background-color: $dropdown-bg;
}
* {
font-family: $font-family-sans-serif !important;
}
}
.apexcharts-tooltip-series-group.apexcharts-active,
.apexcharts-tooltip-series-group:last-child {
padding: 0 10px;
}
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-text-z-value {
margin-left: 0;
}
.apexcharts-tooltip-title {
margin-bottom: 0;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
background: $dropdown-bg;
color: $body-color;
border-color: $dropdown-border-color;
}
.apexcharts-xaxistooltip-bottom::before {
border-bottom-color: $dropdown-border-color;
}
.apexcharts-xaxistooltip-bottom::after {
border-bottom-color: rgba($dropdown-bg, .8);
}
.apexcharts-yaxistooltip-left:before {
border-left-color: $dropdown-border-color;
}
.apexcharts-yaxistooltip-left:after {
border-left-color: rgba($dropdown-bg, .8);
}
.apexcharts-tooltip-marker {
/*rtl:raw:
margin-right: 0;
margin-left: 10px;
*/
}
}

View File

@@ -0,0 +1,35 @@
// npm package: datatables.net-bs5
// github link: https://github.com/DataTables/Dist-DataTables-Bootstrap5
.dataTables_wrapper {
&.dt-bootstrap5 {
.dataTables_length {
@media(max-width: 767px) {
text-align: left;
}
select {
margin-left: 10px;
margin-right: 10px;
}
}
.dataTables_filter {
@media(max-width: 767px) {
text-align: left;
}
}
}
}
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child {
/*rtl:raw:
padding-right: 0;
padding-left: 12px;
*/
}
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
/*rtl:raw:
padding-left: 0;
padding-right: 12px;
*/
}

View File

@@ -0,0 +1,27 @@
// npm package: dropify
// github link: https://github.com/JeremyFagis/dropify
.dropify-wrapper {
background: $input-bg;
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
&:hover {
background-image: linear-gradient(-45deg,darken($input-bg, 5%) 25%,transparent 25%,transparent 50%,darken($input-bg, 5%) 50%,darken($input-bg, 5%) 75%,transparent 75%,transparent)
}
.dropify-message {
span {
&.file-icon {
font-size: .875rem;
color: $text-muted;
&::before {
font-family: feather;
content: '\e8e3';
font-size: 24px;
}
}
}
}
.dropify-preview {
background-color: $input-bg;
}
}

View File

@@ -0,0 +1,33 @@
// npm package: dropify
// github link: https://github.com/dropzone/dropzone
.dropzone {
background: $input-bg;
overflow: auto;
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
@media (min-width: 1400px) {
min-height: 200px;
}
max-height: 200px;
padding: 0;
&.dz-clickable {
.dz-message {
margin-top: 65px;
* {
@extend .text-muted;
}
}
}
.dz-preview {
&.dz-image-preview {
background: $input-bg;
}
&.dz-file-preview,
&.dz-image-preview {
.dz-image {
border-radius: $input-border-radius;
}
}
}
}

View File

@@ -0,0 +1,72 @@
// npm package: easymde
// github link: https://github.com/Ionaru/easy-markdown-editor
.EasyMDEContainer .CodeMirror {
background: $input-bg;
border: 1px solid $input-border-color;
color: $body-color;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.editor-toolbar {
border: 1px solid $input-border-color;
border-bottom: 0;
border-radius: 4px 4px 0 0;
&, &:hover {
opacity: 1;
}
button {
color: rgba($body-color, .7) !important;
&:hover {
background: lighten($input-bg, 10%);
border-color: transparent;
}
}
i.separator {
border-left: 1px solid $input-border-color;
border-right: 1px solid $input-border-color;
}
}
.CodeMirror-fullscreen,
.editor-toolbar.fullscreen,
.editor-preview-side {
z-index: 999;
}
.editor-toolbar.fullscreen,
.editor-toolbar.fullscreen::before,
.editor-toolbar.fullscreen::after {
background: $input-bg;
}
.CodeMirror-cursor {
border-color: $body-color;
}
.editor-toolbar.disabled-for-preview button:not(.no-disable) {
background: $input-bg;
}
.editor-toolbar button.active,
.editor-toolbar button:hover {
background: lighten($input-bg, 10%);
border-color: transparent;
}
.editor-preview,
.editor-preview-side {
background: lighten($input-bg, 1%);
}
.editor-preview-side {
border-color: $input-border-color;
}
.editor-statusbar {
padding: 0 10px;
border: 1px solid $input-border-color;
border-top-color: transparent;
border-bottom-left-radius: $input-border-radius;
border-bottom-right-radius: $input-border-radius;
}

View File

@@ -0,0 +1,174 @@
// npm package: flatpickr
// github link: https://github.com/flatpickr/flatpickr
.flatpickr-calendar {
background-color: $dropdown-bg;
border: 1px solid $dropdown-border-color;
box-shadow: $dropdown-box-shadow;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
border-bottom-color: $dropdown-border-color;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
border-top-color: $dropdown-border-color;
}
.form-control.flatpickr-input {
background-color: $input-bg;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: $primary;
border-color: $primary;
}
.flatpickr-months {
padding: 0 1rem;
padding-top: 0.5rem;
}
.flatpickr-innerContainer {
// padding: 0.5rem 1rem;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
left: 11px;
right: auto !important;
top: 8px;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
right: 11px;
left: auto !important;
top: 8px;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
fill: $text-muted;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
fill: $primary;
}
.flatpickr-months .flatpickr-month {
height: 42px;
color: $text-muted;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
border-bottom-color: $text-muted;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
border-top-color: $text-muted;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.numInputWrapper:hover {
background: rgba($primary, .1);
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
font-size: 1rem;
border-radius: $input-border-radius;
padding: .3rem .5rem;
}
.flatpickr-weekdays {
padding: 0 10px;
}
span.flatpickr-weekday {
color: $text-muted;
}
.dayContainer {
padding: 0 10px 10px;
}
.flatpickr-day {
color: $body-color;
}
.flatpickr-day.today {
border-color: $text-muted;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
color: rgba($body-color, .5);
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
background: rgba($primary, .2);
border-color: transparent;
}
.flatpickr-calendar.hasTime .flatpickr-time {
border-top-color: $dropdown-border-color;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
background: rgba($primary, .2);
}
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
color: $body-color;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
border-bottom-color: $text-muted;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
border-top-color: $text-muted;
}

View File

@@ -0,0 +1,94 @@
// npm package: fullcalendar
// github link: https://github.com/fullcalendar/fullcalendar
.fc {
--fc-button-active-bg-color: #{$primary};
--fc-button-active-border-color: #{$primary};
.fc-button-primary {
@extend .btn;
@extend .btn-outline-primary;
@extend .btn-sm;
}
.fc-button-primary:not(:disabled).fc-button-active,
.fc-button-primary:not(:disabled):active {
@extend .btn-primary;
}
.fc-button .fc-icon {
font-size: 1.2 em;
}
.fc-button-primary:focus,
.fc-button-primary:not(:disabled).fc-button-active:focus,
.fc-button-primary:not(:disabled):active:focus {
box-shadow: none;
}
.fc-button-primary:disabled {
border-color: $primary;
}
.fc-daygrid-day-number,
.fc-col-header-cell-cushion {
color: $body-color;
}
.fc-daygrid-event {
padding: 4px;
}
.fc-daygrid-day.fc-day-today {
background-color: rgba($primary, .2);
}
.fc-list-event:hover td {
background-color: rgba($primary, .2);
}
.fc-list-day-text,
.fc-list-day-side-text {
color: $body-color;
}
}
.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid {
border-color: $border-color;
}
.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
box-shadow: none;
}
.fc-theme-standard .fc-popover {
background-color: $dropdown-bg;
border-color: $dropdown-border-color;
box-shadow: $dropdown-box-shadow;
.fc-popover-header {
background-color: $secondary;
}
}
.fc-theme-standard .fc-list-day-cushion {
background-color: $card-bg;
}
.fc-theme-standard .fc-list {
border-color: $border-color;
}
.fc-event {
margin-bottom: 10px;
padding: 8px;
border-radius: 2px;
background: rgba($primary, .2);
border: 0;
border-left: 3px solid $primary;
color: $body-color;
font-weight: 500;
}
.fc-h-event .fc-event-main {
color: $body-color;
}

View File

@@ -0,0 +1,28 @@
// npm package: jquery.flot
// github link: https://github.com/flot/flot
.flot-chart-wrapper {
.flot-chart {
width: 100%;
position: relative;
max-width: none;
height: 400px;
}
@media(max-width: 767px) {
height: 200px;
min-height: 200px;
.flot-chart {
height: 100%;
}
}
}
.flot-text {
.flot-x-axis,
.flot-y-axis {
> div,
.flot-tick-label {
color: $body-color;
}
}
}

View File

@@ -0,0 +1,11 @@
// npm package: morris.js
// github link: https://github.com/morrisjs/morris.js
.morris-hover.morris-default-style {
border-radius: $border-radius;
color: $body-color;
background: rgba($dropdown-bg, .9);
border: 1px solid $border-color;
font-family: $font-family-sans-serif;
box-shadow: $dropdown-box-shadow;
}

View File

@@ -0,0 +1,8 @@
// npm package: peity
// github link: https://github.com/benpickles/peity
.peity-custom {
svg {
margin-right: 10px;
}
}

View File

@@ -0,0 +1,51 @@
// npm package: perfect-scrollbar
// github link: https://github.com/mdbootstrap/perfect-scrollbar
.ps__thumb-x {
background-color: lighten($card-bg, 10%);
height: 4px;
}
.ps__rail-x.ps--clicking .ps__thumb-x,
.ps__rail-x:focus>.ps__thumb-x,
.ps__rail-x:hover>.ps__thumb-x {
background-color: lighten($card-bg, 8%);
height: 6px;
}
.ps__rail-x {
height: 10px;
}
.ps__thumb-y {
background-color: lighten($card-bg, 10%);
width: 4px;
/*rtl:raw:
left: 2px !important;
right: auto !important;
*/
}
.ps__rail-y.ps--clicking .ps__thumb-y,
.ps__rail-y:focus>.ps__thumb-y,
.ps__rail-y:hover>.ps__thumb-y {
background-color: lighten($card-bg, 8%);
width: 6px;
}
.ps__rail-y {
width: 10px;
/*rtl:raw:
left: 0 !important;
right: auto !important;
*/
}
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-x:focus,
.ps .ps__rail-x:hover,
.ps .ps__rail-y.ps--clicking,
.ps .ps__rail-y:focus,
.ps .ps__rail-y:hover {
background-color: $dark;
}

View File

@@ -0,0 +1,78 @@
// npm package: select2
// github link: https://github.com/select2/select2
.select2-container--default {
.select2-selection--single,
.select2-selection--multiple {
background: $input-bg;
border: 1px solid $input-border-color;
border-radius: $border-radius;
@at-root #{selector-append(".select2-container--focus", &)} {
border: 1px solid $input-focus-border-color;
}
}
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: $body-color;
}
.select2-dropdown {
background: $dropdown-bg;
border: 1px solid $input-focus-border-color;
border-radius: $border-radius;
}
.select2-container--default {
.select2-search--dropdown .select2-search__field {
@extend .form-control;
}
.select2-results__option--highlighted[aria-selected],
.select2-results__option[aria-selected=true] {
background-color: $primary;
}
.select2-search--inline .select2-search__field {
color: $body-color;
}
}
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
height: auto;
}
.select2-container--default .select2-selection--single {
.select2-selection__rendered {
line-height: 1.5;
padding: $input-btn-padding-y $input-btn-padding-x;
}
.select2-selection__arrow {
height: 100%;
b {
left: 0;
}
}
}
.select2-container--default .select2-selection--multiple {
min-height: 38px;
.select2-selection__rendered {
padding: 0 6px
}
.select2-selection__choice {
background-color: $primary;
color: $white;
border-color: $primary;
padding: 1px 8px;
border-radius: .15rem;
margin-top: 5px;
}
.select2-selection__choice__remove {
color: $white;
opacity: .5;
}
}
.select2-container .select2-search--inline {
margin-top: 3px;
}

View File

@@ -0,0 +1,58 @@
// npm package: sweetalert2
// github link: https://github.com/sweetalert2/sweetalert2
.swal2-popup {
font-size: $font-size-base;
background: lighten($card-bg, 5%);
box-shadow: $card-box-shadow;
&.swal2-toast {
box-shadow: $card-box-shadow;
background: lighten($card-bg, 5%);
}
.swal2-title {
font-size: 25px;
line-height: 1;
font-weight: 500;
color: $body-color;
margin-bottom: 0;
}
.swal2-html-container {
font-size: $font-size-base;
color: $text-muted;
font-weight: initial;
margin-top: 11px;
text-decoration: none;
}
.swal2-actions {
button {
@extend .btn;
&.swal2-confirm {
@extend .btn-primary;
}
&.swal2-cancel {
@extend .btn-danger;
@extend .border-danger;
}
svg {
width: 16px;
height: 16px;
}
}
}
.swal2-close {
font-size: 22px;
&:focus {
box-shadow: none;
}
}
.swal2-timer-progress-bar {
background: $secondary;
}
}

View File

@@ -0,0 +1,42 @@
// npm package: jquery-tags-input
// github link: https://github.com/xoxco/jQuery-Tags-Input
div.tagsinput {
padding: 6px 6px 1px;
border-color: $input-border-color;
border-radius: $input-border-radius;
background: $input-bg;
color: $text-muted;
span.tag {
background: $primary;
border: 0;
color: $white;
padding: 3px 7px;
font-family: inherit;
border-radius: .15rem;
margin-bottom: 4px;
float: left;
/*rtl:raw:
margin-left: 0;
margin-right: 5px;
*/
a {
font-size: 13px;
font-weight: 500;
color: $white;
opacity: .5;
}
}
#tags_addTag {
float: left;
/*rtl:raw:
margin-right: 5px;
*/
}
input {
margin: 0;
padding: 1px;
border-radius: $border-radius;
@extend .text-muted;
}
}

View File

@@ -0,0 +1,167 @@
// npm package: tinymce
// github link: https://github.com/tinymce/tinymce
.tox.tox-tinymce {
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
.tox-menubar,
.tox-toolbar-overlord,
.tox-toolbar,
.tox-toolbar__overflow,
.tox-toolbar__primary {
background-color: $input-bg;
background-image: none;
border-bottom: 1px solid $input-border-color;
}
.tox-toolbar-overlord {
border-bottom: none;
}
&:not(.tox-tinymce-inline) .tox-editor-header {
padding: 0;
box-shadow: none;
}
.tox-edit-area__iframe {
background-color: $input-bg;
}
&.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
border-right-color: $input-border-color;
border-left-color: $input-border-color; // RTL
}
.tox-statusbar {
background-color: $input-bg;
border-color: $input-border-color;
color: $text-muted;
}
.tox-statusbar a,
.tox-statusbar__path-item,
.tox-statusbar__wordcount {
color: $text-muted;
}
.tox-mbtn {
color: $body-color;
}
.tox-tbtn {
color: rgba($body-color, .7);
}
.tox-tbtn:hover {
background: lighten($input-bg, 10%);
color: $body-color;
svg {
fill: $body-color;
}
}
.tox-tbtn:focus:not(.tox-tbtn--disabled) {
color: $body-color;
}
.tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
background: lighten($input-bg, 10%);
color: $body-color;
}
.tox-mbtn:focus:not(:disabled),
.tox-mbtn--active {
background: lighten($input-bg, 10%);
color: $body-color;
}
.tox-tbtn svg {
fill: rgba($body-color, .7);
}
.tox-tbtn--disabled svg,
.tox-tbtn--disabled:hover svg,
.tox-tbtn:disabled svg,
.tox-tbtn:disabled:hover svg {
fill: lighten($input-bg, 10%);
}
.tox-split-button:hover {
box-shadow: 0 0 0 1px $input-border-color inset;
}
.tox-split-button:focus {
background: lighten($input-bg, 10%);
}
.tox-tbtn--enabled,
.tox-tbtn--enabled:hover,
.tox-tbtn:focus {
background: lighten($input-bg, 10%);
}
}
div.tox {
.tox-menu {
background-color: $dropdown-bg;
border-color: $dropdown-border-color;
}
.tox-collection__item {
color: $dropdown-color;
}
.tox-collection--list .tox-collection__item--enabled {
background-color: $primary;
color: $body-color;
}
.tox-collection--list .tox-collection__group {
border-color: $border-color;
}
.tox-collection--toolbar .tox-collection__item--active {
background-color: lighten($input-bg, 10%);
}
.tox-collection--list .tox-collection__item--active {
background-color: lighten($input-bg, 10%);
}
.tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
color: $body-color;
}
.tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
color: $body-color;
}
.tox-dialog-wrap__backdrop {
background-color: rgba(0,0,0,.75);
}
.tox-dialog,
.tox-dialog__header,
.tox-dialog__footer {
background-color: $input-bg;
border-color: $border-color;
color: $body-color;
}
.tox-button--secondary {
@extend .btn-secondary;
}
.tox-button {
@extend .btn;
&:not(.tox-button--naked):not(.tox-button--secondary) {
@extend .btn-primary;
}
}
.tox-button--secondary:hover:not(:disabled) {
background-color: $secondary;
border-color: $secondary;
color: $body-color;
}
.tox-button--naked:hover:not(:disabled) {
background-color: transparent;
border-color: transparent;
}
.tox-button--naked.tox-button--icon:hover:not(:disabled) {
color: darken($body-color, 20%);
}
.tox-listboxfield .tox-listbox--select,
.tox-textarea,
.tox-textfield,
.tox-toolbar-textfield {
background-color: $input-bg;
border-color: $input-border-color;
color: $body-color;
}
.tox-listboxfield .tox-listbox--select:focus,
.tox-textarea:focus,
.tox-textfield:focus {
background-color: $input-bg;
border-color: $input-focus-border-color;
}
.tox-dialog__table tbody tr {
border-color: $border-color;
}
.tox-dialog__body {
color: $body-color;
}
}

View File

@@ -0,0 +1,18 @@
// npm package: typeahead.js
// github link: https://github.com/twitter/typeahead.js
.typeahead.tt-input,
.typeahead.tt-hint {
@extend .form-control;
background-color: $input-bg !important;
/*rtl:raw:
direction: rtl;
*/
}
.tt-menu {
@extend .dropdown-menu;
.tt-suggestion {
@extend .dropdown-item;
cursor: pointer;
}
}

View File

@@ -0,0 +1,148 @@
// npm package: jquery-steps
// github link: https://github.com/rstaib/jquery-steps/
.tabcontrol ul, .wizard ul {
display: flex;
@media(max-width: 676px) {
flex-wrap: wrap;
}
}
.wizard>.steps>ul>li {
width: auto;
display: flex;
flex-grow: 1;
}
.wizard>.steps .disabled a,
.wizard>.steps .disabled a:active,
.wizard>.steps .disabled a:hover {
background-color: lighten($input-bg, 5%);
color: $white;
border: 1px solid transparent;
}
.wizard>.steps .current a,
.wizard>.steps .current a:active,
.wizard>.steps .current a:hover {
background-color: $primary;
border: 1px solid transparent;
}
.wizard>.steps a,
.wizard>.steps a:active,
.wizard>.steps a:hover {
padding: $btn-padding-y $btn-padding-x;
border-radius: $input-border-radius;
width: 100%;
}
.wizard>.steps .done a,
.wizard>.steps .done a:active,
.wizard>.steps .done a:hover {
background-color: rgba($primary, .1);
color: $primary;
border: 1px solid $primary;
}
.wizard>.steps ul li {
a {
&, &:active, &:hover {
margin: 0 .5em .5em 0;
}
}
&:last-child {
a {
&, &:active, &:hover {
margin: 0 0 .5em 0;
}
}
}
}
.wizard>.steps .number {
font-size: inherit;
}
.wizard>.content {
background: $input-bg;
border: 1px solid $input-border-color;
min-height: 23em;
overflow: auto;
margin: .5em 0;
}
.wizard>.content>.body {
@media(max-width: 767px) {
width: 90%;
height: 90%;
padding: 5%;
}
}
.wizard>.actions {
/*rtl:raw:
text-align: left;
*/
}
.wizard>.actions>ul>li,
.wizard>.steps>ul>li {
/*rtl:raw:
float: right;
*/
}
.wizard.vertical>.steps {
/*rtl:raw:
float: right;
*/
}
.wizard>.actions a,
.wizard>.actions a:active,
.wizard>.actions a:hover {
@extend .btn;
@extend .btn-primary;
}
.wizard>.actions .disabled a,
.wizard>.actions .disabled a:active,
.wizard>.actions .disabled a:hover {
background: lighten($input-bg, 10%);
border-color: lighten($input-bg, 10%);
cursor: not-allowed;
}
.wizard>.actions>ul {
li {
margin-right: 0;
margin-left: .7em;
}
}
// vertical
.wizard.vertical {
>.steps ul {
flex-direction: column;
}
}
.wizard.vertical>.content {
margin: 0 0 .5em 2%;
width: 68%;
}
.wizard.vertical>.steps a,
.wizard.vertical>.steps a:active,
.wizard.vertical>.steps a:hover {
margin: 0 0 .5em 0;
}
.wizard.vertical>.actions {
margin: 0;
width: 100%;
}