1309 lines
29 KiB
SCSS
1309 lines
29 KiB
SCSS
//
|
|
// Theme
|
|
// --------------------------------------------------
|
|
|
|
@mixin color-theme(
|
|
$primary,
|
|
$primary-light,
|
|
$primary-lighter,
|
|
$primary-dark,
|
|
$primary-darker,
|
|
$body-bg,
|
|
$body-bg-dark,
|
|
$body-bg-light,
|
|
$body-color,
|
|
$body-color-dark,
|
|
$body-color-light,
|
|
$link-color,
|
|
$link-hover-color,
|
|
$input-btn-focus-color,
|
|
$input-btn-focus-box-shadow,
|
|
$input-bg,
|
|
$input-color,
|
|
$input-border-color,
|
|
$input-focus-bg,
|
|
$input-focus-color,
|
|
$input-focus-border-color,
|
|
$header-bg,
|
|
$header-dark-bg,
|
|
$sidebar-bg,
|
|
$sidebar-dark-bg,
|
|
$side-overlay-bg,
|
|
$main-nav-link-icon-color,
|
|
$main-nav-link-hover-bg,
|
|
$main-nav-submenu-bg,
|
|
$main-nav-link-icon-dark-color,
|
|
$main-nav-link-dark-hover-bg,
|
|
$main-nav-submenu-dark-bg
|
|
) {
|
|
// Scaffolding
|
|
body {
|
|
color: $body-color;
|
|
background-color: $light;
|
|
}
|
|
|
|
// Links
|
|
a {
|
|
color: $link-color;
|
|
|
|
&.link-fx::before {
|
|
background-color: $link-color;
|
|
}
|
|
|
|
&:hover {
|
|
color: $link-hover-color;
|
|
}
|
|
}
|
|
|
|
// Typography
|
|
.content-heading {
|
|
border-bottom-color: $body-bg-dark;
|
|
}
|
|
|
|
hr {
|
|
border-top-color: $body-bg-dark;
|
|
}
|
|
|
|
// Contextual text colors
|
|
@include text-emphasis-variant('.text-primary', $primary);
|
|
@include text-emphasis-variant('.text-primary-dark', $primary-dark);
|
|
@include text-emphasis-variant('.text-primary-darker', $primary-darker);
|
|
@include text-emphasis-variant('.text-primary-light', $primary-light);
|
|
@include text-emphasis-variant('.text-primary-lighter', $primary-lighter);
|
|
|
|
@include text-emphasis-variant('.text-body-bg', $light);
|
|
@include text-emphasis-variant('.text-body-bg-light', $body-bg-light);
|
|
@include text-emphasis-variant('.text-body-bg-dark', $body-bg-dark);
|
|
|
|
@include text-emphasis-variant('.text-body-color', $body-color);
|
|
@include text-emphasis-variant('.text-body-color-dark', $body-color-dark);
|
|
@include text-emphasis-variant('.text-body-color-light', $body-color-light);
|
|
|
|
// Contextual dual text colors (for dark header/sidebar)
|
|
@include text-emphasis-variant('.text-dual', $primary-dark);
|
|
|
|
.page-header-dark #page-header,
|
|
.sidebar-dark #sidebar,
|
|
html.dark #page-header,
|
|
html.dark #sidebar {
|
|
@include text-emphasis-variant('.text-dual', $body-color-light);
|
|
}
|
|
|
|
// Contextual background colors
|
|
@include bg-variant('.bg-primary', $primary);
|
|
@include bg-variant('.bg-primary-op', rgba($primary, .75));
|
|
@include bg-variant('.bg-primary-dark', $primary-dark);
|
|
@include bg-variant('.bg-primary-dark-op', rgba($primary-dark, .8));
|
|
@include bg-variant('.bg-primary-darker', $primary-darker);
|
|
@include bg-variant('.bg-primary-light', $primary-light);
|
|
@include bg-variant('.bg-primary-lighter', $primary-lighter);
|
|
@include bg-variant('.bg-body', $light);
|
|
@include bg-variant('.bg-body-light', $body-bg-light);
|
|
@include bg-variant('.bg-body-dark', $body-bg-dark);
|
|
|
|
// Elements
|
|
@include bg-variant('.bg-header-light', $header-bg);
|
|
@include bg-variant('.bg-header-dark', $header-dark-bg);
|
|
|
|
@include bg-variant('.bg-sidebar-light', $sidebar-bg);
|
|
@include bg-variant('.bg-sidebar-dark', $sidebar-dark-bg);
|
|
|
|
// Gradients
|
|
@include bg-gradient-variant-linear('.bg-gd-primary', 135deg, $primary, lighten($primary, 15%));
|
|
|
|
// Buttons
|
|
.btn-link {
|
|
color: $link-color;
|
|
|
|
&:hover {
|
|
color: $link-hover-color;
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
@include button-variant($primary, $primary);
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
@include button-outline-variant($primary);
|
|
}
|
|
|
|
.btn-alt-primary {
|
|
@include button-variant(tint-color($primary, 75%), tint-color($primary, 75%), shade-color($primary, 40%), tint-color($primary, 50%), tint-color($primary, 50%), shade-color($primary, 60%));
|
|
}
|
|
|
|
.btn-alt-secondary {
|
|
@include button-variant($body-bg, $body-bg, $body-color-dark, shade-color($body-bg, 10%), shade-color($body-bg, 10%), shade-color($body-color-dark, 15%));
|
|
}
|
|
|
|
// Hero variant buttons
|
|
.btn-hero {
|
|
&.btn-primary {
|
|
@include button-hero-variant($primary);
|
|
}
|
|
|
|
&.btn-lg {
|
|
@include button-size($btn-hero-padding-y-lg, $btn-hero-padding-x-lg, $font-size-sm, $btn-hero-border-radius);
|
|
}
|
|
|
|
&.btn-sm {
|
|
@include button-size($btn-hero-padding-y-sm, $btn-hero-padding-x-sm, $font-size-sm, $btn-hero-border-radius);
|
|
}
|
|
}
|
|
|
|
// Used for buttons that adapt to light/dark header and sidebar variations
|
|
.page-header-dark #page-header .btn-alt-secondary,
|
|
.sidebar-dark #sidebar .btn-alt-secondary,
|
|
#sidebar .bg-header-dark .content-header .btn-alt-secondary,
|
|
.page-header-dark.page-header-glass:not(.page-header-scroll) #page-header .btn-alt-secondary,
|
|
html.dark #page-header .btn-alt-secondary,
|
|
html.dark #sidebar .btn-alt-secondary,
|
|
html.dark #sidebar .content-header .btn-alt-secondary,
|
|
html.dark .page-header-glass:not(.page-header-scroll) #page-header .btn-alt-secondary {
|
|
@include button-variant(tint-color($header-dark-bg, 15%), tint-color($header-dark-bg, 15%), $white, tint-color($header-dark-bg, 25%), tint-color($header-dark-bg, 25%), $white);
|
|
}
|
|
|
|
// Alerts
|
|
.alert-primary {
|
|
@include alert-variant($primary-lighter, $primary-lighter, $primary-dark);
|
|
}
|
|
|
|
// Progress Bars
|
|
.progress-bar {
|
|
background-color: $primary;
|
|
}
|
|
|
|
// Nav links
|
|
.nav-link {
|
|
&:hover,
|
|
&:focus {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
// Nav Pills
|
|
.nav-pills {
|
|
.nav-link {
|
|
color: $primary;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $light;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.show > .nav-link {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
|
|
// Nav Tabs
|
|
.nav-tabs {
|
|
border-bottom-color: $body-bg-dark;
|
|
|
|
.nav-link {
|
|
color: $primary;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: $body-bg-dark $body-bg-dark $body-bg-dark;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
border-color: $body-bg-dark $body-bg-dark $white;
|
|
}
|
|
}
|
|
|
|
// Tabs block variation
|
|
.nav-tabs-block {
|
|
background-color: $body-bg-light;
|
|
|
|
.nav-link {
|
|
border-color: transparent;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $primary;
|
|
background-color: $light;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: $body-color;
|
|
background-color: $white;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
// Tabs block alternative variation
|
|
.nav-tabs-alt {
|
|
border-bottom-color: $body-bg-dark;
|
|
|
|
.nav-link {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $primary;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: inset 0 -3px $primary;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: $body-color;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: inset 0 -3px $primary;
|
|
}
|
|
}
|
|
|
|
// Various Items Navigation
|
|
.nav-items {
|
|
a {
|
|
border-bottom-color: $light;
|
|
|
|
&:hover {
|
|
background-color: $body-bg-light;
|
|
}
|
|
|
|
&:active {
|
|
background-color: $light;
|
|
}
|
|
}
|
|
|
|
> li:last-child > a {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
// Cards
|
|
.card {
|
|
&.card-borderless {
|
|
box-shadow: 0 1px 2px rgba(darken($body-bg-dark, 2.5%), .5), 0 1px 2px rgba(darken($body-bg-dark, 2.5%), .5);
|
|
}
|
|
|
|
> .card-header:not(.bg-transparent),
|
|
> .card-footer:not(.bg-transparent) {
|
|
background-color: $body-bg-light;
|
|
}
|
|
|
|
> .card-header:not(.border-bottom-0),
|
|
> .card-footer:not(.border-top-0) {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
&:not(.card-borderless) {
|
|
&,
|
|
> .card-header {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Pagination
|
|
.page-item {
|
|
&.active .page-link {
|
|
color: $white;
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
|
|
.page-link {
|
|
color: $body-color;
|
|
background-color: $light;
|
|
border-color: $light;
|
|
|
|
&:hover {
|
|
background-color: darken($body-bg-dark, 10%);
|
|
border-color: darken($body-bg-dark, 10%);
|
|
}
|
|
|
|
&:focus {
|
|
background-color: $body-bg-dark;
|
|
border-color: $body-bg-dark;
|
|
}
|
|
}
|
|
|
|
// List Group
|
|
.list-group-item-action {
|
|
color: $body-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $body-color;
|
|
background-color: $body-bg-light;
|
|
}
|
|
|
|
&:active {
|
|
color: $body-color;
|
|
background-color: $body-bg-dark;
|
|
}
|
|
}
|
|
|
|
.list-group-item {
|
|
border-color: $body-bg-dark;
|
|
|
|
&.active {
|
|
color: $white;
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
|
|
// Popovers
|
|
.popover {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
.bs-popover-top {
|
|
.popover-arrow::before {
|
|
border-top-color: fade-in($body-bg-dark, .05);
|
|
}
|
|
|
|
.popover-arrow::after {
|
|
border-top-color: $white;
|
|
}
|
|
}
|
|
|
|
.bs-popover-end {
|
|
.popover-arrow::before {
|
|
border-right-color: fade-in($body-bg-dark, .05);
|
|
}
|
|
|
|
.popover-arrow::after {
|
|
border-right-color: $white;
|
|
}
|
|
}
|
|
|
|
.bs-popover-bottom {
|
|
.popover-arrow::before {
|
|
border-bottom-color: fade-in($body-bg-dark, .05);
|
|
}
|
|
|
|
.popover-arrow::after {
|
|
border-bottom-color: $white;
|
|
}
|
|
}
|
|
|
|
.bs-popover-start {
|
|
.popover-arrow::before {
|
|
border-left-color: fade-in($body-bg-dark, .05);
|
|
}
|
|
|
|
.popover-arrow::after {
|
|
border-left-color: $white;
|
|
}
|
|
}
|
|
|
|
.bs-popover-auto {
|
|
&[x-placement^="top"] {
|
|
@extend .bs-popover-top;
|
|
}
|
|
&[x-placement^="right"] {
|
|
@extend .bs-popover-end;
|
|
}
|
|
&[x-placement^="bottom"] {
|
|
@extend .bs-popover-bottom;
|
|
}
|
|
&[x-placement^="left"] {
|
|
@extend .bs-popover-start;
|
|
}
|
|
}
|
|
|
|
// Modals
|
|
.modal-header {
|
|
border-bottom-color: $body-bg-dark;
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top-color: $body-bg-dark;
|
|
}
|
|
|
|
// Dropdowns
|
|
.dropdown-menu {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
.dropdown-divider {
|
|
border-top-color: $light;
|
|
}
|
|
|
|
.dropdown-item {
|
|
color: $body-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $body-color-dark;
|
|
background-color: $light;
|
|
}
|
|
|
|
&.active,
|
|
&:active {
|
|
color: $white;
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
|
|
// Tables
|
|
.table {
|
|
--#{$variable-prefix}table-striped-bg: #{lighten($body-bg, 1.5%)};
|
|
--#{$variable-prefix}table-active-bg: #{$body-bg};
|
|
--#{$variable-prefix}table-hover-bg: #{darken($body-bg, 1.5%)};
|
|
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
.table > :not(:last-child) > :last-child > * {
|
|
border-bottom-color: $body-bg-dark;
|
|
}
|
|
|
|
@include table-variant("primary", $primary-lighter);
|
|
|
|
// Forms
|
|
.form-control,
|
|
.form-select {
|
|
color: $input-color;
|
|
background-color: $input-bg;
|
|
border-color: $input-border-color;
|
|
|
|
&:focus {
|
|
color: $input-focus-color;
|
|
background-color: $input-focus-bg;
|
|
border-color: $input-focus-border-color;
|
|
box-shadow: $input-btn-focus-box-shadow;
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: $input-disabled-bg;
|
|
}
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: tint-color($body-color, 50%);
|
|
}
|
|
|
|
.form-select {
|
|
&:focus::-ms-value {
|
|
color: $input-color;
|
|
background-color: $input-bg;
|
|
}
|
|
}
|
|
|
|
.form-control.form-control-alt,
|
|
.form-select.form-control-alt {
|
|
border-color: $light;
|
|
background-color: $light;
|
|
|
|
&:focus {
|
|
border-color: $body-bg-dark;
|
|
background-color: $body-bg-dark;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@include form-validation-state("valid", $success, $form-feedback-icon-valid);
|
|
@include form-validation-state("invalid", $danger, $form-feedback-icon-invalid);
|
|
|
|
.input-group-text {
|
|
color: $input-color;
|
|
background-color: $light;
|
|
border-color: $input-border-color;
|
|
}
|
|
|
|
.input-group-text.input-group-text-alt {
|
|
background-color: $body-bg-dark;
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
.form-check-input {
|
|
border-color: darken($body-bg, 10%);
|
|
|
|
&:focus {
|
|
border-color: $primary;
|
|
box-shadow: 0 0 0 0.25rem rgba($primary, .25);
|
|
}
|
|
|
|
&:checked {
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
|
|
.form-switch .form-check-input {
|
|
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{darken($body-bg, 10%)}'/></svg>"));
|
|
|
|
&:focus {
|
|
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$primary}'/></svg>"));
|
|
}
|
|
|
|
&:checked {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
|
|
}
|
|
}
|
|
|
|
.form-block {
|
|
.form-check-label {
|
|
border-color: $body-bg-dark;
|
|
|
|
&:hover {
|
|
border-color: darken($body-bg-dark, 5%);
|
|
}
|
|
|
|
&::before {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
|
|
.form-check-input:checked ~ .form-check-label {
|
|
border-color: $primary;
|
|
}
|
|
|
|
.form-check-input:focus ~ .form-check-label {
|
|
border-color: $primary;
|
|
box-shadow: 0 0 0 0.25rem rgba($primary, .25);
|
|
}
|
|
|
|
.form-check-input:disabled:not([checked]) + .form-check-label:hover,
|
|
.form-check-input[readonly]:not([checked]) + .form-check-label:hover {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
}
|
|
|
|
.form-floating > .form-control::placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.form-floating > .form-control:focus ~ label::after,
|
|
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
|
|
.form-floating > .form-control-plaintext ~ label::after,
|
|
.form-floating > .form-select ~ label::after {
|
|
background-color: $input-bg;
|
|
}
|
|
|
|
// Border
|
|
.border {
|
|
border-color: $body-bg-dark !important;
|
|
}
|
|
.border-top {
|
|
border-top-color: $body-bg-dark !important;
|
|
}
|
|
.border-end {
|
|
border-right-color: $body-bg-dark !important;
|
|
}
|
|
.border-bottom {
|
|
border-bottom-color: $body-bg-dark !important;
|
|
}
|
|
.border-start {
|
|
border-left-color: $body-bg-dark !important;
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.border-#{$color} {
|
|
border-color: $value !important;
|
|
}
|
|
}
|
|
|
|
.border-primary {
|
|
border-color: $primary !important;
|
|
}
|
|
.border-white {
|
|
border-color: $white !important;
|
|
}
|
|
.border-white-op {
|
|
border-color: rgba($white, .1) !important;
|
|
}
|
|
.border-black-op {
|
|
border-color: rgba($black, .1) !important;
|
|
}
|
|
|
|
// Main Structure
|
|
#page-header {
|
|
background-color: $header-bg;
|
|
}
|
|
#sidebar {
|
|
background-color: $sidebar-bg;
|
|
}
|
|
#side-overlay {
|
|
background-color: $side-overlay-bg;
|
|
}
|
|
|
|
// Layout/Style variations based on #page-container classes
|
|
#page-container {
|
|
background-color: $body-bg;
|
|
|
|
// Page header
|
|
&.page-header-dark #page-header,
|
|
html.dark & #page-header {
|
|
color: darken($body-color-light, 8%);
|
|
background-color: $header-dark-bg;
|
|
}
|
|
|
|
&.page-header-glass {
|
|
#page-header {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&.page-header-fixed {
|
|
&.page-header-scroll #page-header {
|
|
background-color: rgba($header-bg, .9);
|
|
}
|
|
|
|
&.page-header-scroll.page-header-dark #page-header {
|
|
background-color: rgba($header-dark-bg, .9);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sidebar and Side Overlay
|
|
&.sidebar-dark #sidebar,
|
|
html.dark & #sidebar {
|
|
color: $body-color-light;
|
|
background-color: $sidebar-dark-bg;
|
|
}
|
|
}
|
|
|
|
// Sidebar
|
|
#sidebar.with-mini-nav {
|
|
.sidebar-mini-nav {
|
|
color: $body-color-light;
|
|
background-color: lighten($sidebar-dark-bg, 3%);
|
|
}
|
|
}
|
|
|
|
// Blocks
|
|
.block {
|
|
box-shadow: 0 1px 3px rgba(darken($body-bg-dark, 2.5%), .5), 0 1px 2px rgba(darken($body-bg-dark, 2.5%), .5);
|
|
}
|
|
|
|
.block-header-default {
|
|
background-color: $body-bg-light;
|
|
}
|
|
|
|
// Block Variations
|
|
.block {
|
|
&.block-bordered {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
&.block-themed > .block-header {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
|
|
// Block Modes
|
|
.block {
|
|
&.block-mode-loading {
|
|
&::after {
|
|
color: $primary;
|
|
}
|
|
|
|
&.block-mode-loading-dark::after {
|
|
background-color: $primary-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Block Links
|
|
a.block {
|
|
color: $body-color;
|
|
|
|
&:hover {
|
|
color: $body-color;
|
|
}
|
|
|
|
&.block-link-pop {
|
|
&:hover {
|
|
box-shadow: 0 .5rem 2rem darken($body-bg, 8%);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 .25rem .75rem darken($body-bg, 1%);
|
|
}
|
|
}
|
|
|
|
&.block-link-shadow {
|
|
&:hover {
|
|
box-shadow: 0 0 2.25rem darken($body-bg, 8%);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 1.125rem darken($body-bg, 4%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Block Effects
|
|
.block {
|
|
&.block-fx-shadow {
|
|
box-shadow: 0 0 2.25rem darken($body-bg, 8%);
|
|
}
|
|
|
|
&.block-fx-pop {
|
|
box-shadow: 0 .5rem 2rem darken($body-bg, 8%);
|
|
}
|
|
}
|
|
|
|
// Block Options
|
|
.btn-block-option {
|
|
color: $primary;
|
|
|
|
&:hover {
|
|
color: $primary-light;
|
|
}
|
|
|
|
@at-root {
|
|
a#{&}:focus,
|
|
.active > a#{&},
|
|
.show > button#{&} {
|
|
color: $primary-light;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
color: $primary-lighter;
|
|
}
|
|
}
|
|
|
|
// Page Loader
|
|
#page-loader {
|
|
background-color: $primary;
|
|
}
|
|
|
|
// Main Navigation
|
|
// Headings
|
|
.nav-main-heading {
|
|
color: lighten($body-color, 25%);
|
|
}
|
|
|
|
// Default links
|
|
.nav-main-link {
|
|
color: lighten($body-color, 5%);
|
|
|
|
.nav-main-link-icon {
|
|
color: $main-nav-link-icon-color;
|
|
}
|
|
|
|
&:hover,
|
|
&.active {
|
|
color: $black;
|
|
background-color: $main-nav-link-hover-bg;
|
|
}
|
|
}
|
|
|
|
// Sub menus
|
|
.nav-main-submenu {
|
|
background-color: $main-nav-submenu-bg;
|
|
|
|
.nav-main-link {
|
|
color: lighten($body-color, 20%);
|
|
|
|
&:hover,
|
|
&.active {
|
|
color: darken($body-color, 7.5%);
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Active sub menu
|
|
.nav-main-item.open {
|
|
> .nav-main-link-submenu {
|
|
color: $black;
|
|
background-color: $main-nav-link-hover-bg;
|
|
}
|
|
}
|
|
|
|
.nav-main-submenu .nav-main-item.open .nav-main-link {
|
|
background-color: transparent;
|
|
}
|
|
|
|
// Nav Main Horizontal
|
|
@include media-breakpoint-up(lg) {
|
|
.nav-main-horizontal {
|
|
// Menu variations
|
|
&.nav-main-hover {
|
|
.nav-main-item:hover {
|
|
> .nav-main-link-submenu {
|
|
color: $black;
|
|
background-color: $main-nav-link-hover-bg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dark Variation
|
|
.nav-main-dark,
|
|
.sidebar-dark #sidebar,
|
|
.page-header-dark #page-header,
|
|
html.dark #sidebar,
|
|
html.dark #page-header,
|
|
html.dark #side-overlay,
|
|
html.dark #main-container {
|
|
// Headings
|
|
.nav-main-heading {
|
|
color: lighten($sidebar-dark-bg, 30%);
|
|
}
|
|
|
|
// Default links
|
|
.nav-main-link {
|
|
color: lighten($sidebar-dark-bg, 55%);
|
|
|
|
> .nav-main-link-icon {
|
|
color: $main-nav-link-icon-dark-color;
|
|
}
|
|
|
|
&:hover,
|
|
&.active {
|
|
color: $white;
|
|
background-color: $main-nav-link-dark-hover-bg;
|
|
}
|
|
}
|
|
|
|
// Sub menus
|
|
.nav-main-submenu {
|
|
background-color: $main-nav-submenu-dark-bg;
|
|
|
|
.nav-main-link {
|
|
color: lighten($sidebar-dark-bg, 45%);
|
|
|
|
&:hover,
|
|
&.active {
|
|
color: $white;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Active sub menu
|
|
.nav-main-item.open {
|
|
> .nav-main-link-submenu {
|
|
color: $white;
|
|
background-color: $main-nav-link-dark-hover-bg;
|
|
}
|
|
|
|
> .nav-main-submenu {
|
|
background-color: $main-nav-submenu-dark-bg;
|
|
}
|
|
}
|
|
|
|
.nav-main-submenu .nav-main-item.open .nav-main-link {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
.nav-main-dark.nav-main-horizontal,
|
|
.sidebar-dark #sidebar .nav-main-horizontal,
|
|
.page-header-dark #page-header .nav-main-horizontal,
|
|
html.dark #sidebar .nav-main-horizontal,
|
|
html.dark #page-header .nav-main-horizontal,
|
|
html.dark #main-container .nav-main-horizontal {
|
|
.nav-main-heading {
|
|
color: rgba($white, .5);
|
|
}
|
|
|
|
.nav-main-link {
|
|
color: rgba($white, .75);
|
|
|
|
> .nav-main-link-icon {
|
|
color: rgba($white, .4);
|
|
}
|
|
|
|
&:hover,
|
|
&.active {
|
|
color: $white;
|
|
background-color: darken($sidebar-dark-bg, 5%);
|
|
}
|
|
}
|
|
|
|
.nav-main-item.open,
|
|
.nav-main-item:hover {
|
|
> .nav-main-link-submenu {
|
|
color: $white;
|
|
background-color: darken($sidebar-dark-bg, 5%);
|
|
}
|
|
|
|
> .nav-main-submenu {
|
|
background-color: darken($sidebar-dark-bg, 5%);
|
|
}
|
|
}
|
|
|
|
.nav-main-submenu .nav-main-item:hover .nav-main-link {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.page-header-dark #page-header .nav-main-horizontal {
|
|
.nav-main-link {
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($header-dark-bg, 5%);
|
|
}
|
|
}
|
|
|
|
.nav-main-item.open,
|
|
.nav-main-item:hover {
|
|
> .nav-main-link-submenu {
|
|
background-color: darken($header-dark-bg, 5%);
|
|
}
|
|
|
|
> .nav-main-submenu {
|
|
background-color: darken($header-dark-bg, 5%);
|
|
}
|
|
}
|
|
|
|
.nav-main-submenu .nav-main-item:hover .nav-main-link {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Various Items Navigation
|
|
.nav-items {
|
|
a {
|
|
border-bottom-color: $light;
|
|
|
|
&:hover {
|
|
background-color: $body-bg-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sidebar Mini Nav
|
|
.mini-nav-item {
|
|
color: darken($body-bg-dark, 15%);
|
|
|
|
&.active {
|
|
background-color: lighten($sidebar-dark-bg, 6%);
|
|
color: $white;
|
|
}
|
|
|
|
&:hover {
|
|
color: $white;
|
|
background-color: lighten($sidebar-dark-bg, 6%);
|
|
}
|
|
|
|
&:active {
|
|
color: darken($body-bg-dark, 15%);
|
|
}
|
|
}
|
|
|
|
// Activity
|
|
.list-activity {
|
|
> li {
|
|
border-bottom-color: $light;
|
|
}
|
|
}
|
|
|
|
// Timeline
|
|
.timeline-event-icon {
|
|
box-shadow: 0 .375rem 1.5rem darken($body-bg, 8%);
|
|
}
|
|
|
|
// Ribbons
|
|
.ribbon-light {
|
|
@include ribbon-variation($body-bg-dark, $body-color);
|
|
}
|
|
|
|
.ribbon-primary {
|
|
@include ribbon-variation($primary, $white);
|
|
}
|
|
|
|
// Bootstrap Datepicker
|
|
.datepicker table tr td.active:hover,
|
|
.datepicker table tr td.active:hover:hover,
|
|
.datepicker table tr td.active.disabled:hover,
|
|
.datepicker table tr td.active.disabled:hover:hover,
|
|
.datepicker table tr td.active:focus,
|
|
.datepicker table tr td.active:hover:focus,
|
|
.datepicker table tr td.active.disabled:focus,
|
|
.datepicker table tr td.active.disabled:hover:focus,
|
|
.datepicker table tr td.active:active,
|
|
.datepicker table tr td.active:hover:active,
|
|
.datepicker table tr td.active.disabled:active,
|
|
.datepicker table tr td.active.disabled:hover:active,
|
|
.datepicker table tr td.active.active,
|
|
.datepicker table tr td.active:hover.active,
|
|
.datepicker table tr td.active.disabled.active,
|
|
.datepicker table tr td.active.disabled:hover.active,
|
|
.open .dropdown-toggle.datepicker table tr td.active,
|
|
.open .dropdown-toggle.datepicker table tr td.active:hover,
|
|
.open .dropdown-toggle.datepicker table tr td.active.disabled,
|
|
.open .dropdown-toggle.datepicker table tr td.active.disabled:hover,
|
|
.datepicker table tr td span.active:hover,
|
|
.datepicker table tr td span.active:hover:hover,
|
|
.datepicker table tr td span.active.disabled:hover,
|
|
.datepicker table tr td span.active.disabled:hover:hover,
|
|
.datepicker table tr td span.active:focus,
|
|
.datepicker table tr td span.active:hover:focus,
|
|
.datepicker table tr td span.active.disabled:focus,
|
|
.datepicker table tr td span.active.disabled:hover:focus,
|
|
.datepicker table tr td span.active:active,
|
|
.datepicker table tr td span.active:hover:active,
|
|
.datepicker table tr td span.active.disabled:active,
|
|
.datepicker table tr td span.active.disabled:hover:active,
|
|
.datepicker table tr td span.active.active,
|
|
.datepicker table tr td span.active:hover.active,
|
|
.datepicker table tr td span.active.disabled.active,
|
|
.datepicker table tr td span.active.disabled:hover.active,
|
|
.open .dropdown-toggle.datepicker table tr td span.active,
|
|
.open .dropdown-toggle.datepicker table tr td span.active:hover,
|
|
.open .dropdown-toggle.datepicker table tr td span.active.disabled,
|
|
.open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
|
|
background-color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
|
|
// CKEditor
|
|
.cke_chrome,
|
|
.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused),
|
|
.ck.ck-toolbar {
|
|
border-color: $body-bg-dark !important;
|
|
}
|
|
|
|
.cke_top,
|
|
.ck.ck-toolbar {
|
|
border-bottom-color: $body-bg-dark !important;
|
|
background: $body-bg-light !important;
|
|
}
|
|
|
|
.ck.ck-toolbar .ck.ck-toolbar__separator {
|
|
background: $body-bg-dark !important;
|
|
}
|
|
|
|
.cke_bottom {
|
|
border-top-color: $body-bg-dark !important;
|
|
background: $body-bg-light !important;
|
|
}
|
|
|
|
// DropzoneJS
|
|
.dropzone {
|
|
background-color: $body-bg-light;
|
|
border-color: $input-border-color;
|
|
|
|
.dz-message {
|
|
color: $body-color;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $white;
|
|
border-color: $primary;
|
|
|
|
.dz-message {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
// FullCalendar
|
|
.fc.fc-theme-standard {
|
|
a {
|
|
color: $body-color;
|
|
}
|
|
|
|
.fc-button-primary {
|
|
color: $body-color;
|
|
background-color: $body-bg-dark;
|
|
border-color: $body-bg-dark;
|
|
|
|
&:not(:disabled):hover {
|
|
color: $body-color;
|
|
background-color: $light;
|
|
border-color: $light;
|
|
}
|
|
|
|
&:not(:disabled).fc-button-active,
|
|
&:not(:disabled):active {
|
|
color: $body-color;
|
|
background-color: $body-bg-light;
|
|
border-color: $body-bg-light;
|
|
}
|
|
|
|
&:focus,
|
|
&:not(:disabled).fc-button-active:focus,
|
|
&:not(:disabled):active:focus {
|
|
box-shadow: 0 0 0 .2rem rgba($primary, .4)
|
|
}
|
|
}
|
|
|
|
th,
|
|
td,
|
|
.fc-scrollgrid,
|
|
.fc-list {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
.fc-h-event {
|
|
background-color: $primary;
|
|
border: $primary;
|
|
}
|
|
|
|
.fc-col-header-cell,
|
|
.fc-list-day-cushion {
|
|
background-color: $body-bg-light;
|
|
}
|
|
}
|
|
|
|
// Ion Range Slider
|
|
.irs.irs--round {
|
|
.irs-min,
|
|
.irs-max,
|
|
.irs-line,
|
|
.irs-grid-pol {
|
|
background: $light;
|
|
}
|
|
|
|
.irs-handle {
|
|
border-color: $primary;
|
|
}
|
|
|
|
.irs-from:before,
|
|
.irs-to:before,
|
|
.irs-single:before {
|
|
border-top-color: $primary;
|
|
}
|
|
|
|
.irs-bar,
|
|
.irs-from,
|
|
.irs-to,
|
|
.irs-single {
|
|
background: $primary;
|
|
}
|
|
}
|
|
|
|
// Select2
|
|
.select2-container--default {
|
|
.select2-selection--single {
|
|
border-color: $input-border-color;
|
|
}
|
|
|
|
.select2-selection--multiple {
|
|
border-color: $input-border-color;
|
|
}
|
|
|
|
&.select2-container--focus .select2-selection--multiple,
|
|
&.select2-container--focus .select2-selection--single,
|
|
&.select2-container--open .select2-selection--multiple,
|
|
&.select2-container--open .select2-selection--single {
|
|
border-color: $input-focus-border-color;
|
|
box-shadow: $input-btn-focus-box-shadow;
|
|
}
|
|
|
|
.select2-selection--multiple {
|
|
.select2-selection__choice {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
|
|
.select2-search--dropdown .select2-search__field {
|
|
border-color: $input-border-color;
|
|
}
|
|
|
|
.select2-results__option--highlighted[aria-selected] {
|
|
background-color: $primary;
|
|
}
|
|
|
|
.select2-dropdown .select2-search__field:focus {
|
|
border-color: $input-focus-border-color;
|
|
box-shadow: $input-btn-focus-box-shadow;
|
|
}
|
|
}
|
|
|
|
// Simple Bar
|
|
.simplebar-scrollbar::before {
|
|
background: rgba(darken($primary-darker, 10%), .75);
|
|
}
|
|
|
|
// Slick
|
|
.slick-slider {
|
|
.slick-prev,
|
|
.slick-next {
|
|
&::before {
|
|
color: $primary-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Simple MDE
|
|
.editor-toolbar {
|
|
border-color: $body-bg-dark;
|
|
background-color: $body-bg-light;
|
|
}
|
|
|
|
.CodeMirror {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
// Nestable2
|
|
.dd-handle {
|
|
color: $body-color;
|
|
background: $body-bg-light;
|
|
border-color: $body-bg-dark;
|
|
|
|
&:hover {
|
|
color: $body-color-dark;
|
|
}
|
|
}
|
|
|
|
.dd-empty,
|
|
.dd-placeholder {
|
|
border-color: $primary-darker;
|
|
background: $primary-lighter;
|
|
}
|
|
|
|
// Flatpickr
|
|
.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 {
|
|
border-color: $primary;
|
|
background: $primary;
|
|
}
|
|
|
|
.flatpickr-months .flatpickr-prev-month:hover svg,
|
|
.flatpickr-months .flatpickr-next-month:hover svg {
|
|
fill: $primary;
|
|
}
|
|
|
|
// jVectorMap
|
|
.jvectormap-tip {
|
|
background: $primary-dark;
|
|
}
|
|
|
|
.jvectormap-zoomin,
|
|
.jvectormap-zoomout,
|
|
.jvectormap-goback {
|
|
background: $primary-dark;
|
|
}
|
|
|
|
// DataTables
|
|
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
|
|
box-shadow: inset 0 0 0 9999px lighten($body-bg, 1.5%);
|
|
}
|
|
}
|