Add theme assets;
This commit is contained in:
337
public/assets/scss/theme-light/_variables.scss
Normal file
337
public/assets/scss/theme-light/_variables.scss
Normal file
@@ -0,0 +1,337 @@
|
||||
// Light 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: #f9fafb !default;
|
||||
$body-color: $black !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: $gray-200 !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: $gray-200 !default;
|
||||
$table-active-bg: $gray-300 !default;
|
||||
$table-hover-bg: $gray-200 !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: $white !default;
|
||||
$input-border-color: $border-color !default;
|
||||
$input-focus-border-color: $gray-400 !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-radius: .15em !default;
|
||||
|
||||
// Input-group
|
||||
$input-group-addon-padding-x: .563rem !default;
|
||||
$input-group-addon-bg: $gray-100 !default;
|
||||
|
||||
|
||||
|
||||
// Navs
|
||||
$nav-tabs-link-bg: $gray-100; // custom variable
|
||||
$nav-tabs-link-border-color: $border-color $border-color $gray-300; // custom variable
|
||||
$nav-tabs-link-active-bg: $white;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
$dropdown-border-color: #f2f4f9;
|
||||
$dropdown-box-shadow: 0 5px 10px 0 rgba(183,192,206,.2);
|
||||
|
||||
|
||||
// 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;
|
||||
$pagination-active-bg: $primary;
|
||||
$pagination-active-border-color: $primary;
|
||||
|
||||
|
||||
// Cards
|
||||
$card-box-shadow: 0 0 10px 0 rgba(183,192,206,.2); // custom variable
|
||||
$card-spacer-y: 1.5rem !default;
|
||||
$card-spacer-x: 1.5rem !default;
|
||||
$card-title-spacer-y: .875rem !default;
|
||||
$card-border-color: #f2f4f9 !default;
|
||||
$card-cap-padding-y: .875rem !default;
|
||||
$card-cap-padding-x: $card-spacer-x !default;
|
||||
$card-cap-bg: rgba($black, .01) !default;
|
||||
|
||||
|
||||
// Accordion
|
||||
$accordion-bg: $white !default;
|
||||
$accordion-border-color: $border-color !default;
|
||||
$accordion-icon-width: .875rem !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
$popover-border-color: $border-color !default;
|
||||
$popover-header-bg: $gray-200 !default;
|
||||
|
||||
|
||||
|
||||
// Badges
|
||||
$badge-font-size: .8em !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
|
||||
|
||||
// Modals
|
||||
$modal-content-border-color: $border-color !default;
|
||||
$modal-fade-transform: scale(.8) !default;
|
||||
$modal-transition: transform .4s ease !default;
|
||||
// Modals
|
||||
|
||||
|
||||
// List group
|
||||
$list-group-item-padding-y: .75rem !default;
|
||||
$list-group-item-padding-x: 1.25rem !default;
|
||||
|
||||
|
||||
// Close
|
||||
$btn-close-width: .8em !default;
|
||||
$btn-close-color: $black !default;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
// 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,
|
||||
.apexcharts-yaxistooltip-right:before {
|
||||
border-left-color: $dropdown-border-color;
|
||||
}
|
||||
.apexcharts-yaxistooltip-left:after,
|
||||
.apexcharts-yaxistooltip-right:after {
|
||||
border-left-color: rgba($dropdown-bg, .8);
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-marker {
|
||||
/*rtl:raw:
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
*/
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
// 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;
|
||||
margin-left: -19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
&.dataTables_paginate {
|
||||
ul {
|
||||
&.pagination {
|
||||
@extend .justify-content-center;
|
||||
@extend .justify-content-md-end;
|
||||
@extend .mt-3;
|
||||
@extend .mt-md-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
*/
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// npm package: dropify
|
||||
// github link: https://github.com/JeremyFagis/dropify
|
||||
|
||||
.dropify-wrapper {
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
.dropify-message {
|
||||
span {
|
||||
&.file-icon {
|
||||
font-size: .875rem;
|
||||
color: $text-muted;
|
||||
&::before {
|
||||
font-family: feather;
|
||||
content: '\e8e3';
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
// npm package: dropify
|
||||
// github link: https://github.com/dropzone/dropzone
|
||||
|
||||
.dropzone {
|
||||
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,
|
||||
&.dz-file-preview {
|
||||
.dz-image {
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
// 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: $input-border-radius $input-border-radius 0 0;
|
||||
&, &:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
button {
|
||||
color: rgba($body-color, .7) !important;
|
||||
&:hover {
|
||||
background: $gray-200;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
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-preview-side {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
.editor-toolbar button.active,.editor-toolbar button:hover {
|
||||
background: $gray-200;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
// npm package: flatpickr
|
||||
// github link: https://github.com/flatpickr/flatpickr
|
||||
|
||||
.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:hover svg,
|
||||
.flatpickr-months .flatpickr-next-month:hover svg {
|
||||
fill: $primary;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-month {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months {
|
||||
font-size: 1rem;
|
||||
border-radius: $input-border-radius;
|
||||
padding: .3rem .5rem;
|
||||
}
|
||||
|
||||
.flatpickr-weekdays {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dayContainer {
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
// 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-toolbar {
|
||||
@media(max-width: 767px) {
|
||||
flex-direction: column;
|
||||
.fc-toolbar-chunk {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// npm package: peity
|
||||
// github link: https://github.com/benpickles/peity
|
||||
|
||||
.peity-custom {
|
||||
svg {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// npm package: perfect-scrollbar
|
||||
// github link: https://github.com/mdbootstrap/perfect-scrollbar
|
||||
|
||||
.ps__thumb-x {
|
||||
background-color: darken($card-bg, 15%);
|
||||
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: darken($card-bg, 30%);
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.ps__rail-x {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: darken($card-bg, 15%);
|
||||
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: darken($card-bg, 30%);
|
||||
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: $light;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// npm package: select2
|
||||
// github link: https://github.com/select2/select2
|
||||
|
||||
.select2-container--default {
|
||||
.select2-selection--single,
|
||||
.select2-selection--multiple {
|
||||
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-dropdown {
|
||||
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] {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// npm package: sweetalert2
|
||||
// github link: https://github.com/sweetalert2/sweetalert2
|
||||
|
||||
.swal2-popup {
|
||||
font-size: $font-size-base;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
// 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;
|
||||
span.tag {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
border: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
// 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: $gray-200;
|
||||
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: $gray-200;
|
||||
color: $body-color;
|
||||
}
|
||||
.tox-mbtn:focus:not(:disabled),
|
||||
.tox-mbtn--active {
|
||||
background: $gray-200;
|
||||
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: $input-disabled-bg;
|
||||
}
|
||||
.tox-split-button:hover {
|
||||
box-shadow: 0 0 0 1px $input-border-color inset;
|
||||
}
|
||||
.tox-split-button:focus {
|
||||
background: $gray-200;
|
||||
}
|
||||
.tox-tbtn--enabled,
|
||||
.tox-tbtn--enabled:hover,
|
||||
.tox-tbtn:focus {
|
||||
background: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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: $white;
|
||||
}
|
||||
.tox-collection--list .tox-collection__group {
|
||||
border-color: $border-color;
|
||||
}
|
||||
.tox-collection--toolbar .tox-collection__item--active {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
.tox-collection--list .tox-collection__item--active {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
.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: $white;
|
||||
}
|
||||
.tox-button--naked:hover:not(:disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.tox-button--naked.tox-button--icon:hover:not(:disabled) {
|
||||
color: lighten($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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
// 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: $gray-200;
|
||||
color: $body-color;
|
||||
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, .2);
|
||||
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: $gray-200;
|
||||
border-color: $gray-200;
|
||||
cursor: not-allowed;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.wizard>.actions .disabled a:focus {
|
||||
box-shadow: none;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.wizard.vertical>.actions>ul>li {
|
||||
margin: 0 0 0 .7em;
|
||||
}
|
||||
Reference in New Issue
Block a user