Ümit Tunç
1263 lines
31 KiB
SCSS
1263 lines
31 KiB
SCSS
//
|
|
// Theme
|
|
// --------------------------------------------------
|
|
|
|
@mixin color-theme($brand-primary,
|
|
$brand-light,
|
|
$brand-lighter,
|
|
$brand-dark,
|
|
$brand-darker,
|
|
$body-bg,
|
|
$body-bg-dark,
|
|
$body-bg-light,
|
|
$body-color,
|
|
$body-color-dark,
|
|
$body-color-light,
|
|
$link-color,
|
|
$link-hover-color,
|
|
$headings-color,
|
|
$headings-small-color,
|
|
$header-bg,
|
|
$header-inverse-bg,
|
|
$sidebar-bg,
|
|
$sidebar-inverse-bg,
|
|
$side-overlay-bg,
|
|
$input-color,
|
|
$input-focus-color,
|
|
$input-border-color,
|
|
$input-focus-border-color,
|
|
$input-bg,
|
|
$input-focus-bg) {
|
|
// Scaffolding
|
|
body {
|
|
color: $body-color;
|
|
background-color: $body-bg;
|
|
}
|
|
|
|
// Links
|
|
a {
|
|
color: $link-color;
|
|
|
|
&.link-effect::before {
|
|
background-color: $link-color;
|
|
}
|
|
|
|
@include hover {
|
|
color: $link-hover-color;
|
|
}
|
|
}
|
|
|
|
// Typography
|
|
h1, h2, h3, h4, h5, h6,
|
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
color: $headings-color;
|
|
}
|
|
|
|
small,
|
|
.small {
|
|
color: $headings-small-color;
|
|
}
|
|
|
|
.content-heading {
|
|
border-bottom-color: $body-bg-dark;
|
|
}
|
|
|
|
hr {
|
|
border-top-color: $body-bg;
|
|
}
|
|
|
|
// Contextual colors
|
|
@include text-emphasis-variant('.text-primary', $brand-primary);
|
|
@include text-emphasis-variant('.text-primary-dark', $brand-dark);
|
|
@include text-emphasis-variant('.text-primary-darker', $brand-darker);
|
|
@include text-emphasis-variant('.text-primary-light', $brand-light);
|
|
@include text-emphasis-variant('.text-primary-lighter', $brand-lighter);
|
|
@include text-emphasis-variant('.text-body-bg', $body-bg);
|
|
@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 inverse header/sidebar)
|
|
@include text-emphasis-variant('.text-dual-primary-dark', $brand-dark);
|
|
|
|
.page-header-inverse #page-header,
|
|
.sidebar-inverse #sidebar {
|
|
@include text-emphasis-variant('.text-dual-primary-dark', $body-color-light);
|
|
}
|
|
|
|
// Contextual colors
|
|
@include bg-variant('.bg-primary', $brand-primary);
|
|
@include bg-variant('.bg-primary-op', rgba($brand-primary, .75));
|
|
@include bg-variant('.bg-primary-dark', $brand-dark);
|
|
@include bg-variant('.bg-primary-dark-op', rgba($brand-dark, .8));
|
|
@include bg-variant('.bg-primary-darker', $brand-darker);
|
|
@include bg-variant('.bg-primary-light', $brand-light);
|
|
@include bg-variant('.bg-primary-lighter', $brand-lighter);
|
|
@include bg-variant('.bg-body', $body-bg);
|
|
@include bg-variant('.bg-body-light', $body-bg-light);
|
|
@include bg-variant('.bg-body-dark', $body-bg-dark);
|
|
|
|
// Gradients
|
|
@include bg-gradient-variant('.bg-gd-primary', 135deg, darken($brand-primary, 15%), lighten($brand-primary, 5%));
|
|
|
|
// Buttons
|
|
.btn-link {
|
|
color: $link-color;
|
|
|
|
@include hover-focus {
|
|
color: $link-hover-color;
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
@include button-variant($brand-primary, $brand-primary);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@include button-variant($body-bg, $body-bg);
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
@include button-outline-variant($brand-primary);
|
|
}
|
|
|
|
.btn-outline-secondary {
|
|
@include button-outline-variant(darken($body-bg-dark, 40%));
|
|
}
|
|
|
|
.btn-alt-primary {
|
|
@include button-alt-variant($brand-primary, $brand-lighter);
|
|
}
|
|
|
|
.btn-alt-secondary {
|
|
@include button-alt-variant($body-color, $body-bg-dark);
|
|
}
|
|
|
|
// Used for buttons that adapt to light/dark header and sidebar variations
|
|
.btn-dual-secondary {
|
|
@include button-dual-variant(darken($body-color, 22%), darken($body-bg, 10%));
|
|
}
|
|
|
|
.page-header-inverse #page-header .btn-dual-secondary,
|
|
.sidebar-inverse #sidebar .btn-dual-secondary {
|
|
@include button-dual-variant($white, $brand-darker);
|
|
}
|
|
|
|
// Alerts
|
|
.alert-primary {
|
|
@include alert-variant($brand-lighter, darken($brand-lighter, 10%), $brand-dark);
|
|
}
|
|
|
|
// Badges
|
|
.badge-primary {
|
|
@include badge-variant($brand-primary);
|
|
}
|
|
|
|
// Progress Bars
|
|
.progress-bar {
|
|
background-color: $brand-primary;
|
|
}
|
|
|
|
// Nav links
|
|
.nav-link {
|
|
color: $body-color;
|
|
|
|
@include hover-focus {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
// Nav Tabs
|
|
.nav-tabs {
|
|
border-bottom-color: $body-bg-dark;
|
|
|
|
.nav-link {
|
|
@include hover-focus {
|
|
border-color: $body-bg-dark $body-bg-dark $body-bg-dark;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: $body-color;
|
|
border-color: $body-bg-dark $body-bg-dark $white;
|
|
}
|
|
}
|
|
|
|
.nav-tabs-block {
|
|
background-color: $body-bg-light;
|
|
|
|
.nav-link {
|
|
border-color: transparent;
|
|
|
|
@include hover-focus {
|
|
color: $brand-primary;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: $body-color;
|
|
background-color: $white;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.nav-tabs-alt {
|
|
border-bottom-color: $body-bg-dark;
|
|
|
|
.nav-link {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
|
|
@include hover-focus {
|
|
color: $brand-primary;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: inset 0 -2px $brand-primary;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: inset 0 -2px $brand-primary;
|
|
}
|
|
}
|
|
|
|
// Nav Pills
|
|
.nav-pills {
|
|
.nav-link {
|
|
color: $body-color;
|
|
|
|
@include hover-focus {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: $white;
|
|
background-color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
// Pagination
|
|
.page-item {
|
|
&.active .page-link {
|
|
background-color: $brand-primary;
|
|
border-color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
.page-link {
|
|
color: $body-color-dark;
|
|
background-color: $body-bg;
|
|
border-color: $body-bg;
|
|
|
|
@include hover-focus {
|
|
color: $body-color-dark;
|
|
background-color: $body-bg-dark;
|
|
border-color: $body-bg-dark;
|
|
}
|
|
}
|
|
|
|
// List Group
|
|
.list-group-item-action {
|
|
color: $body-color;
|
|
|
|
@include 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: $brand-primary;
|
|
border-color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
// Breadcrumb
|
|
.breadcrumb {
|
|
background-color: $body-bg;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
&.active {
|
|
color: $body-color-dark;
|
|
}
|
|
}
|
|
|
|
// Tooltip
|
|
.tooltip {
|
|
&.bs-tooltip-top {
|
|
.arrow::before {
|
|
border-top-color: $brand-dark;
|
|
}
|
|
}
|
|
|
|
&.bs-tooltip-right {
|
|
.arrow::before {
|
|
border-right-color: $brand-dark;
|
|
}
|
|
}
|
|
|
|
&.bs-tooltip-bottom {
|
|
.arrow::before {
|
|
border-bottom-color: $brand-dark;
|
|
}
|
|
}
|
|
|
|
&.bs-tooltip-left {
|
|
.arrow::before {
|
|
border-left-color: $brand-dark;
|
|
}
|
|
}
|
|
|
|
&.bs-tooltip-auto {
|
|
&[x-placement^="top"] {
|
|
@extend .bs-tooltip-top;
|
|
}
|
|
&[x-placement^="right"] {
|
|
@extend .bs-tooltip-right;
|
|
}
|
|
&[x-placement^="bottom"] {
|
|
@extend .bs-tooltip-bottom;
|
|
}
|
|
&[x-placement^="left"] {
|
|
@extend .bs-tooltip-left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip-inner {
|
|
background-color: $brand-dark;
|
|
}
|
|
|
|
// Popovers
|
|
.popover {
|
|
border-color: $body-bg-dark;
|
|
border-radius: 2px;
|
|
box-shadow: 0 15px 25px rgba(0,0,0,.05);
|
|
|
|
&.bs-popover-top {
|
|
.arrow::before {
|
|
border-top-color: $body-bg-dark;
|
|
}
|
|
|
|
.arrow::after {
|
|
border-top-color: $white;
|
|
}
|
|
}
|
|
|
|
&.bs-popover-right {
|
|
.arrow::before {
|
|
border-right-color: $body-bg-dark;
|
|
}
|
|
|
|
.arrow::after {
|
|
border-right-color: $white;
|
|
}
|
|
}
|
|
|
|
&.bs-popover-bottom {
|
|
.arrow::before {
|
|
border-bottom-color: $body-bg-dark;
|
|
}
|
|
|
|
.arrow::after {
|
|
border-bottom-color: $white;
|
|
}
|
|
}
|
|
|
|
&.bs-popover-left {
|
|
.arrow::before {
|
|
border-left-color: $body-bg-dark;
|
|
}
|
|
|
|
.arrow::after {
|
|
border-left-color: $white;
|
|
}
|
|
}
|
|
|
|
&.bs-popover-auto {
|
|
&[x-placement^="top"] {
|
|
@extend .bs-popover-top;
|
|
}
|
|
&[x-placement^="right"] {
|
|
@extend .bs-popover-right;
|
|
}
|
|
&[x-placement^="bottom"] {
|
|
@extend .bs-popover-bottom;
|
|
}
|
|
&[x-placement^="left"] {
|
|
@extend .bs-popover-left;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Modals
|
|
.modal-header {
|
|
border-bottom-color: $body-bg-dark;
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top-color: $body-bg-dark;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
background-color: darken($brand-primary, 45%);
|
|
}
|
|
|
|
// Dropdowns
|
|
.dropdown-menu {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
.dropdown-header {
|
|
color: $headings-color;
|
|
}
|
|
|
|
.dropdown-item {
|
|
color: $body-color;
|
|
|
|
@include hover-focus {
|
|
color: $body-color;
|
|
background-color: $body-bg;
|
|
}
|
|
|
|
&.active,
|
|
&:active {
|
|
color: $body-color;
|
|
background-color: $body-bg-dark;
|
|
}
|
|
}
|
|
|
|
.dropdown-divider {
|
|
border-top-color: $body-bg;
|
|
}
|
|
|
|
// Tables
|
|
.table {
|
|
th,
|
|
td {
|
|
border-top-color: $body-bg-dark;
|
|
}
|
|
|
|
tbody + tbody {
|
|
border-top-color: $body-bg-dark;
|
|
}
|
|
|
|
.thead-dark {
|
|
th {
|
|
background-color: $brand-dark;
|
|
}
|
|
}
|
|
|
|
.thead-light {
|
|
th {
|
|
background-color: $body-bg-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-bordered {
|
|
&,
|
|
th,
|
|
td {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
}
|
|
|
|
@include table-row-variant("active", $body-bg);
|
|
@include table-row-variant("primary", $brand-lighter);
|
|
|
|
.table-dark {
|
|
background-color: $brand-dark;
|
|
|
|
th,
|
|
td,
|
|
thead th {
|
|
border-color: lighten($brand-dark, 5%);
|
|
}
|
|
}
|
|
|
|
.table-responsive,
|
|
[class*="table-responsive-"] {
|
|
> .table.table-bordered thead th {
|
|
border-top: 1px solid $body-bg-dark;
|
|
}
|
|
}
|
|
|
|
// Forms
|
|
.form-control,
|
|
.input-group-text {
|
|
color: $input-color;
|
|
background-color: $input-bg;
|
|
border-color: $input-border-color;
|
|
}
|
|
|
|
.input-group-text {
|
|
background-color: $body-bg-light;
|
|
}
|
|
|
|
.form-control:focus {
|
|
color: $input-focus-color;
|
|
background-color: $input-focus-bg;
|
|
border-color: $input-focus-border-color;
|
|
}
|
|
|
|
select.form-control {
|
|
&:focus::-ms-value {
|
|
color: $input-color;
|
|
background-color: $input-focus-bg;
|
|
}
|
|
}
|
|
|
|
// Custom Forms
|
|
.custom-checkbox,
|
|
.custom-radio {
|
|
.custom-control-input {
|
|
&:checked ~ .custom-control-label::before {
|
|
background-color: $brand-primary;
|
|
}
|
|
|
|
&:focus ~ .custom-control-label::before {
|
|
box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary;
|
|
}
|
|
|
|
&:active ~ .custom-control-label::before {
|
|
background-color: lighten($brand-primary, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-checkbox {
|
|
.custom-control-input:indeterminate ~ .custom-control-label::before {
|
|
background-color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
.custom-select {
|
|
border-color: $input-border-color;
|
|
|
|
&:focus {
|
|
border-color: $input-focus-border-color;
|
|
|
|
&::-ms-value {
|
|
color: $input-color;
|
|
background-color: $input-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-file-control {
|
|
border-color: $input-border-color;
|
|
|
|
&::before {
|
|
color: $body-color;
|
|
background-color: $body-bg;
|
|
border-color: $input-border-color;
|
|
}
|
|
}
|
|
|
|
// Form feedback
|
|
@include form-validation-state("valid", $brand-success);
|
|
@include form-validation-state("invalid", $brand-danger);
|
|
|
|
// Material Forms
|
|
.form-material {
|
|
// Form controls and input addons
|
|
> .form-control {
|
|
border-color: transparent;
|
|
box-shadow: 0 1px 0 $input-border-color;
|
|
|
|
~ .input-group-append {
|
|
box-shadow: 0 1px 0 $input-border-color;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0 2px 0 $input-focus-border-color;
|
|
|
|
+ label {
|
|
color: $body-color;
|
|
}
|
|
|
|
~ .input-group-append {
|
|
box-shadow: 0 2px 0 $input-focus-border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Form Focus Variations
|
|
&.form-material-primary > .form-control {
|
|
@include form-control-material-focus-variant($brand-primary);
|
|
}
|
|
}
|
|
|
|
@include form-validation-state-material("valid", $brand-success);
|
|
@include form-validation-state-material("invalid", $brand-danger);
|
|
|
|
// CSS Radios
|
|
.css-radio {
|
|
&:hover .css-control-input ~ .css-control-indicator {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
// Color Variations
|
|
&.css-control-primary .css-control-input:checked ~ .css-control-indicator::after { background-color: $brand-primary; }
|
|
}
|
|
|
|
// CSS Checkboxes
|
|
.css-checkbox {
|
|
&:hover .css-control-input ~ .css-control-indicator {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
// Color Variations
|
|
&.css-control-primary .css-control-input:checked ~ .css-control-indicator {
|
|
background-color: $brand-primary;
|
|
border-color: darken($brand-primary, 15%);
|
|
}
|
|
}
|
|
|
|
// CSS Switches
|
|
.css-switch {
|
|
// Color Variations
|
|
&.css-control-primary .css-control-input:checked ~ .css-control-indicator { background-color: $brand-primary; }
|
|
}
|
|
|
|
// Border
|
|
.border {
|
|
border-color: $body-bg-dark !important;
|
|
|
|
&-t { border-top-color: $body-bg-dark !important; }
|
|
&-r { border-right-color: $body-bg-dark !important; }
|
|
&-b { border-bottom-color: $body-bg-dark !important; }
|
|
&-l { border-left-color: $body-bg-dark !important; }
|
|
}
|
|
|
|
.border-light {
|
|
border-color: $body-bg-light !important;
|
|
|
|
&-t { border-top-color: $body-bg-light !important; }
|
|
&-r { border-right-color: $body-bg-light !important; }
|
|
&-b { border-bottom-color: $body-bg-light !important; }
|
|
&-l { border-left-color: $body-bg-light !important; }
|
|
}
|
|
|
|
// Main Structure
|
|
#page-overlay {
|
|
background: rgba(darken($brand-primary, 45%), .4);
|
|
background: linear-gradient(to right, rgba(darken($brand-primary, 45%), 0), rgba(darken($brand-primary, 45%), .6));
|
|
|
|
.sidebar-r & {
|
|
background: linear-gradient(to right, rgba(darken($brand-primary, 45%),.6), rgba(darken($brand-primary, 45%),0));
|
|
}
|
|
}
|
|
|
|
#page-header {
|
|
background-color: $header-bg;
|
|
}
|
|
|
|
.content-side {
|
|
&-user {
|
|
background-color: $body-bg-light;
|
|
}
|
|
}
|
|
|
|
#sidebar {
|
|
background-color: $sidebar-bg;
|
|
}
|
|
|
|
#side-overlay {
|
|
background-color: $side-overlay-bg;
|
|
}
|
|
|
|
// Layout/Style variations based on #page-container classes
|
|
#page-container {
|
|
// Page header related
|
|
@include media-breakpoint-up(lg) {
|
|
&.page-header-modern #page-header {
|
|
background-color: $body-bg;
|
|
}
|
|
}
|
|
|
|
&.page-header-inverse #page-header {
|
|
color: darken($body-color-light, 8%);
|
|
background-color: $header-inverse-bg;
|
|
}
|
|
|
|
&.page-header-glass {
|
|
#page-header {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&.page-header-fixed {
|
|
&.page-header-scroll #page-header {
|
|
background-color: $header-bg;
|
|
}
|
|
|
|
&.page-header-scroll.page-header-inverse #page-header {
|
|
background-color: $header-inverse-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sidebar and side overlay related
|
|
@include media-breakpoint-up(lg) {
|
|
&.page-header-modern #sidebar {
|
|
box-shadow: 5px 0 10px $body-bg-dark;
|
|
}
|
|
|
|
&.page-header-modern.sidebar-r #sidebar {
|
|
box-shadow: -5px 0 10px $body-bg-dark;
|
|
}
|
|
}
|
|
|
|
&.sidebar-inverse #sidebar {
|
|
color: $body-color-light;
|
|
background-color: $sidebar-inverse-bg;
|
|
|
|
.content-side-user {
|
|
background-color: darken($sidebar-inverse-bg, 3%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Blocks
|
|
.block {
|
|
box-shadow: 0 1px 1px $body-bg-dark;
|
|
|
|
&.block-transparent {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.block-header {
|
|
&-default {
|
|
background-color: $body-bg-light;
|
|
}
|
|
}
|
|
|
|
.block-title {
|
|
small {
|
|
color: $headings-small-color;
|
|
}
|
|
}
|
|
|
|
// Block Variations
|
|
.block {
|
|
&.block-bordered {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
&.block-themed > .block-header {
|
|
background-color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
// Block Modes
|
|
.block {
|
|
&.block-mode-loading {
|
|
&::after {
|
|
color: $brand-dark;
|
|
box-shadow: 0 0 15px 15px rgba($brand-dark,.05);
|
|
}
|
|
|
|
&.block-mode-hidden::after {
|
|
box-shadow: 0 0 8px 8px rgba($brand-dark,.05);
|
|
}
|
|
|
|
&.block-mode-loading-inverse::after {
|
|
background-color: $brand-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Block Links
|
|
a.block {
|
|
color: $body-color;
|
|
|
|
@include hover-focus {
|
|
color: $body-color;
|
|
}
|
|
|
|
&.block-link-pop {
|
|
&:hover {
|
|
box-shadow: 0 2px 30px darken($body-bg, 8%);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 2px 10px darken($body-bg, 1%);
|
|
}
|
|
}
|
|
|
|
&.block-link-shadow {
|
|
&:hover {
|
|
box-shadow: 0 0 36px darken($body-bg, 8%);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 10px darken($body-bg, 4%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Block Effects
|
|
.block {
|
|
&.block-fx-pop {
|
|
box-shadow: 0 2px 30px darken($body-bg, 8%);
|
|
}
|
|
|
|
&.block-fx-shadow {
|
|
box-shadow: 0 0 36px darken($body-bg, 8%);
|
|
}
|
|
}
|
|
|
|
// Page Loader
|
|
#page-loader {
|
|
background-color: $brand-primary;
|
|
}
|
|
|
|
// Main Sidebar Navigation
|
|
.nav-main {
|
|
// Default links
|
|
a {
|
|
color: rgba($body-color, .9);
|
|
|
|
@at-root .sidebar-inverse #sidebar & {
|
|
color: rgba($body-color-light, .75);
|
|
}
|
|
|
|
> i {
|
|
color: rgba($brand-dark, .75);
|
|
|
|
@at-root .sidebar-inverse #sidebar & {
|
|
color: $body-color-light;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
> i {
|
|
color: $brand-primary;
|
|
|
|
@at-root .sidebar-inverse #sidebar & {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sub menus
|
|
ul {
|
|
a {
|
|
color: rgba($body-color, .6);
|
|
}
|
|
}
|
|
|
|
// Active sub menu
|
|
li.open {
|
|
> a.nav-submenu {
|
|
> i {
|
|
color: $brand-primary;
|
|
|
|
@at-root .sidebar-inverse #sidebar & {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
> ul {
|
|
background-color: $body-bg-light;
|
|
|
|
@at-root .sidebar-inverse #sidebar & {
|
|
background-color: darken($sidebar-inverse-bg, 3%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Main Navigation (Header)
|
|
.nav-main-header {
|
|
@include media-breakpoint-up(lg) {
|
|
// Handle menu colors
|
|
a {
|
|
color: lighten($body-color, 10%);
|
|
}
|
|
|
|
ul a {
|
|
color: lighten($body-color, 22%);
|
|
}
|
|
|
|
a:hover,
|
|
a:focus,
|
|
a.active,
|
|
li.open > a.nav-submenu,
|
|
li:hover > a.nav-submenu {
|
|
color: $black;
|
|
background-color: $body-bg-dark;
|
|
}
|
|
|
|
ul,
|
|
> li:hover > a.nav-submenu {
|
|
background-color: darken($body-bg-dark, 3%);
|
|
}
|
|
|
|
@at-root {
|
|
.page-header-inverse #page-header &,
|
|
.page-header-inverse.page-header-glass.page-header-scroll #page-header & {
|
|
a {
|
|
color: darken($body-color-light, 9%);
|
|
}
|
|
|
|
ul a {
|
|
color: darken($body-color-light, 18%);
|
|
}
|
|
|
|
a:hover,
|
|
a:focus,
|
|
a.active,
|
|
li.open > a.nav-submenu,
|
|
li:hover > a.nav-submenu {
|
|
color: $white;
|
|
background-color: rgba(0,0,0,.25);
|
|
}
|
|
|
|
ul,
|
|
> li:hover > a.nav-submenu {
|
|
background-color: $brand-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
@at-root .page-header-inverse.page-header-glass #page-header & {
|
|
ul,
|
|
> li:hover > a.nav-submenu {
|
|
background-color: darken($brand-dark, 5%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// User Navigation
|
|
.nav-users {
|
|
a {
|
|
border-color: $body-bg;
|
|
|
|
@include hover {
|
|
background-color: $body-bg-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Timeline
|
|
.list-timeline {
|
|
.list-timeline-time {
|
|
background-color: $body-bg-light;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
.list-timeline-modern {
|
|
&::before {
|
|
background-color: $body-bg-light;
|
|
}
|
|
|
|
.list-timeline-time {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Activity
|
|
.list-activity {
|
|
> li {
|
|
border-bottom-color: $body-bg;
|
|
}
|
|
}
|
|
|
|
// Ribbons
|
|
.ribbon {
|
|
// Colors
|
|
&-primary {
|
|
@include ribbon-variation($brand-primary);
|
|
}
|
|
}
|
|
|
|
// 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: $brand-primary;
|
|
border-color: $brand-primary;
|
|
}
|
|
|
|
// DropzoneJS
|
|
.dropzone {
|
|
background-color: $body-bg-light;
|
|
border-color: $input-border-color;
|
|
|
|
.dz-message {
|
|
color: $body-color;
|
|
}
|
|
|
|
@include hover {
|
|
border-color: $brand-primary;
|
|
|
|
.dz-message {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
// FullCalendar
|
|
.fc-event {
|
|
color: $body-color-dark;
|
|
|
|
@include hover {
|
|
color: $body-color;
|
|
}
|
|
}
|
|
|
|
.fc-state-default {
|
|
color: $body-color-dark;
|
|
background-color: $body-bg;
|
|
border-color: darken($body-bg-dark, 5%);
|
|
}
|
|
|
|
.fc-state-hover,
|
|
.fc-state-down,
|
|
.fc-state-active,
|
|
.fc-state-disabled {
|
|
background-color: darken($body-bg, 12%);
|
|
border-color: darken($body-bg-dark, 18%);
|
|
}
|
|
|
|
.fc-state-hover {
|
|
color: $body-color-dark;
|
|
}
|
|
|
|
.fc-state-down,
|
|
.fc-state-active {
|
|
background-color: darken($body-bg, 12%);
|
|
border-color: darken($body-bg-dark, 18%);
|
|
}
|
|
|
|
.fc thead th.fc-widget-header {
|
|
background-color: $body-bg-light;
|
|
}
|
|
|
|
.fc-unthemed .fc-content,
|
|
.fc-unthemed .fc-divider,
|
|
.fc-unthemed .fc-list-heading td,
|
|
.fc-unthemed .fc-list-view,
|
|
.fc-unthemed .fc-popover,
|
|
.fc-unthemed .fc-row,
|
|
.fc-unthemed tbody,
|
|
.fc-unthemed td,
|
|
.fc-unthemed th,
|
|
.fc-unthemed thead {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
.fc-unthemed .fc-divider,
|
|
.fc-unthemed .fc-list-heading td,
|
|
.fc-unthemed .fc-popover .fc-header {
|
|
background: $body-bg;
|
|
}
|
|
|
|
.fc-unthemed .fc-today {
|
|
background: $body-bg-light;
|
|
}
|
|
|
|
// Ion Range Slider
|
|
.irs {
|
|
&-line {
|
|
background: $body-bg;
|
|
}
|
|
|
|
&-bar {
|
|
background: $brand-primary;
|
|
|
|
&-edge {
|
|
background: $brand-primary;
|
|
}
|
|
}
|
|
|
|
&-from,
|
|
&-to,
|
|
&-single {
|
|
background: $brand-primary;
|
|
}
|
|
|
|
&-grid-pol {
|
|
background: $brand-primary;
|
|
}
|
|
}
|
|
|
|
// jQuery AutoComplete
|
|
.autocomplete-suggestions {
|
|
border-color: $body-bg-dark;
|
|
}
|
|
|
|
.autocomplete-suggestion {
|
|
color: $body-color;
|
|
|
|
b {
|
|
color: $brand-primary;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: $body-bg;
|
|
}
|
|
}
|
|
|
|
// jQuery Tags Input
|
|
div.tagsinput {
|
|
border-color: $input-border-color;
|
|
|
|
.form-material & {
|
|
border-bottom: 1px solid $input-border-color;
|
|
}
|
|
|
|
span.tag {
|
|
background-color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
// Draggable (jQueryUI)
|
|
.draggable {
|
|
&-placeholder {
|
|
background-color: darken($body-bg, 1%);
|
|
border-color: darken($body-bg-dark, 10%);
|
|
}
|
|
}
|
|
|
|
// jVectorMap
|
|
.jvectormap-tip {
|
|
background: $brand-darker;
|
|
}
|
|
|
|
// Select2
|
|
.select2-container {
|
|
.select2-dropdown {
|
|
border-color: $input-border-color;
|
|
}
|
|
}
|
|
|
|
.select2-container--default {
|
|
.select2-selection--single {
|
|
border-color: $input-border-color;
|
|
|
|
.form-material & {
|
|
border-bottom-color: $input-border-color;
|
|
}
|
|
}
|
|
|
|
.select2-selection--multiple {
|
|
border-color: $input-border-color;
|
|
|
|
.form-material & {
|
|
border-bottom-color: $input-border-color;
|
|
}
|
|
}
|
|
|
|
&.select2-container--focus .select2-selection--multiple,
|
|
&.select2-container--focus .select2-selection--single {
|
|
border-color: $input-focus-border-color;
|
|
|
|
.form-material & {
|
|
border-bottom-color: $input-focus-border-color;
|
|
}
|
|
}
|
|
|
|
.select2-selection--multiple {
|
|
.select2-selection__choice {
|
|
background-color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
.select2-search--dropdown .select2-search__field {
|
|
border-color: $input-border-color;
|
|
}
|
|
|
|
.select2-results__option--highlighted[aria-selected] {
|
|
background-color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
// Simple Bar
|
|
.simplebar-scrollbar::before {
|
|
background: $brand-darker;
|
|
|
|
.sidebar-inverse #sidebar & {
|
|
background: $brand-lighter;
|
|
}
|
|
}
|
|
|
|
// Slick
|
|
.slick-slider {
|
|
.slick-prev,
|
|
.slick-next {
|
|
&::before {
|
|
color: $brand-dark;
|
|
}
|
|
}
|
|
}
|
|
}
|