Clean up
This commit is contained in:
Olu Amey
@@ -3,8 +3,8 @@ PORT=3000
|
||||
REACT_APP_BASE_LAYOUT_CONFIG_KEY='metronic-react-demo1-8150'
|
||||
REACT_APP_API_URL=https://preview.keenthemes.com/metronic8/laravel/api
|
||||
REACT_APP_VERSION=v8.1.5
|
||||
REACT_APP_THEME_NAME=Metornic
|
||||
REACT_APP_THEME_DEMO=demo1
|
||||
REACT_APP_THEME_NAME=WrenchBoard
|
||||
REACT_APP_THEME_DEMO=dashboard
|
||||
REACT_APP_BOOTSTRAP_DOCS_LINK=https://getbootstrap.com/docs/5.0
|
||||
REACT_APP_SASS_PATH=src/_metronic/assets/sass/core/components
|
||||
REACT_APP_SASS_VARIABLES_PATH=src/_metronic/assets/sass/core/components/_variables.scss
|
||||
|
||||
+8
-2
@@ -1,12 +1,12 @@
|
||||
version: '3'
|
||||
services:
|
||||
metronic-dash:
|
||||
wrenchboard-dash:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: docker/Dockerfile
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- 3800:3000
|
||||
- 3811:3000
|
||||
# - 3800:3011
|
||||
extra_hosts:
|
||||
- backend.wrenchboard.api.live:10.10.33.15
|
||||
@@ -17,5 +17,11 @@ services:
|
||||
- apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
|
||||
environment:
|
||||
- CHOKIDAR_USEPOLLING=true
|
||||
# volumes:
|
||||
# - ./:/app
|
||||
# - /app/node_modules
|
||||
tty: true
|
||||
stdin_open: true
|
||||
# working_dir: /app
|
||||
volumes:
|
||||
src:
|
||||
|
||||
+2
-2
@@ -7,7 +7,7 @@
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Metronic React Demo 1" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700">
|
||||
<title>Metronic Theme | Keenthemes</title>
|
||||
<title>WrenchBoard</title>
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/media/logos/favicon.ico" />
|
||||
<link rel="stylesheet" id="layout-styles-anchor" href="%PUBLIC_URL%/splash-screen.css" />
|
||||
</head>
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
<div id="root"></div>
|
||||
<div id="splash-screen" class="splash-screen">
|
||||
<img src="%PUBLIC_URL%/media/logos/default-small.svg" alt="Metronic logo" />
|
||||
<img src="%PUBLIC_URL%/media/logos/default-small.svg" alt="WrenchBoard" />
|
||||
<span>Loading ...</span>
|
||||
</div>
|
||||
<div id="root-modals"></div>
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
//
|
||||
// Main init file of global bootstrap and theme functions, mixins, variables and config
|
||||
//
|
||||
|
||||
|
||||
// Custom functions & mixins
|
||||
@import "./core/base/functions";
|
||||
@import "./core/base/mixins";
|
||||
@import "./core/components/mixins";
|
||||
@import "./core/vendors/plugins/mixins";
|
||||
|
||||
// Custom variables
|
||||
@import "components/variables.custom";
|
||||
@import "./core/components/variables";
|
||||
|
||||
// Bootstrap initializaton
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/maps";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
@import "~bootstrap/scss/utilities";
|
||||
|
||||
// 3rd-Party plugins variables
|
||||
@import "./core/vendors/plugins/variables";
|
||||
|
||||
// Custom layout variables
|
||||
@import "./core/layout/base/variables";
|
||||
@import "layout/variables.custom";
|
||||
@@ -0,0 +1,136 @@
|
||||
//
|
||||
// Landing elements
|
||||
//
|
||||
|
||||
// Variables
|
||||
$landing-dark-color: #13263C;
|
||||
$landing-header-height: 100px;
|
||||
$landing-header-height-tablet-and-mobile: 70px;
|
||||
$landing-header-sticky-height: 70px;
|
||||
$landing-header-sticky-height-tablet-and-mobile: 70px;
|
||||
|
||||
// Utility classes
|
||||
.landing-dark-bg {
|
||||
background-color: $landing-dark-color;
|
||||
}
|
||||
|
||||
.landing-dark-color {
|
||||
color: $landing-dark-color;
|
||||
}
|
||||
|
||||
.landing-dark-border {
|
||||
border:1px dashed #2C3F5B;
|
||||
}
|
||||
|
||||
.landing-dark-separator {
|
||||
border-top:1px dashed #2C3F5B;
|
||||
}
|
||||
|
||||
.landing-curve {
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
top: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Landing header
|
||||
.landing-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $landing-header-height;
|
||||
|
||||
// Logos
|
||||
.logo-default {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-sticky {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Menu
|
||||
.menu {
|
||||
// Menu link
|
||||
.menu-link {
|
||||
&.active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Header menu sticky mode
|
||||
[data-kt-sticky-landing-header="on"] & {
|
||||
// Menu link
|
||||
.menu-link {
|
||||
&.active {
|
||||
color: $primary;
|
||||
background-color: rgba(#EFF2F5, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sticky header modes
|
||||
[data-kt-sticky-landing-header="on"] & {
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background-color: $white;
|
||||
box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
|
||||
height: $landing-header-sticky-height;
|
||||
|
||||
// Logos
|
||||
.logo-sticky {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-default {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix body padding top when Landing sticky header is on
|
||||
body[data-kt-sticky-landing-header="on"] {
|
||||
padding-top: $landing-header-height;
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
// Landing header
|
||||
.landing-header {
|
||||
height: $landing-header-height-tablet-and-mobile;
|
||||
|
||||
// Menu wrapper
|
||||
.landing-menu-wrapper {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Sticky header modes
|
||||
[data-kt-sticky-landing-header="on"] & {
|
||||
height: $landing-header-sticky-height-tablet-and-mobile;
|
||||
}
|
||||
|
||||
// Menu
|
||||
.menu {
|
||||
// Menu link
|
||||
.menu-link {
|
||||
&.active {
|
||||
color: $primary;
|
||||
background-color: rgba(#EFF2F5, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix body padding top when Landing sticky header is on
|
||||
body[data-kt-sticky-landing-header="on"] {
|
||||
padding-top: $landing-header-height-tablet-and-mobile;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
//
|
||||
// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
|
||||
// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss
|
||||
// are not accessible in this file but you can override any global variable as shown below:
|
||||
//
|
||||
|
||||
// Bootstrap color system
|
||||
$white: #ffffff;
|
||||
|
||||
// Theme colors
|
||||
// Primary
|
||||
$primary: #009ef7;
|
||||
$primary-active: #0095e8;
|
||||
$primary-light: #f1faff;
|
||||
$primary-light-dark: #212e48;
|
||||
$primary-inverse: $white;
|
||||
|
||||
// Success
|
||||
$success: #50cd89;
|
||||
$success-active: #47be7d;
|
||||
$success-light: #e8fff3;
|
||||
$success-light-dark: #1c3238;
|
||||
$success-inverse: $white;
|
||||
|
||||
// Info
|
||||
$info: #7239ea;
|
||||
$info-active: #5014d0;
|
||||
$info-light: #f8f5ff;
|
||||
$info-light-dark: #2f264f;
|
||||
$info-inverse: $white;
|
||||
|
||||
// Danger
|
||||
$danger: #f1416c;
|
||||
$danger-active: #d9214e;
|
||||
$danger-light: #fff5f8;
|
||||
$danger-light-dark: #3a2434;
|
||||
$danger-inverse: $white;
|
||||
|
||||
// Warning
|
||||
$warning: #ffc700;
|
||||
$warning-active: #f1bc00;
|
||||
$warning-light: #fff8dd;
|
||||
$warning-light-dark: #392f28;
|
||||
$warning-inverse: $white;
|
||||
@@ -0,0 +1,7 @@
|
||||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "stepper/multistep";
|
||||
@import "landing";
|
||||
@@ -0,0 +1,42 @@
|
||||
//
|
||||
// Multistep stepper
|
||||
//
|
||||
|
||||
// Custom
|
||||
.stepper.stepper-pills.stepper-multistep {
|
||||
--kt-stepper-pills-size: 46px;
|
||||
--kt-stepper-icon-border-radius: 9px;
|
||||
--kt-stepper-icon-check-size: 1.25rem;
|
||||
|
||||
--kt-stepper-icon-bg-color: rgba(255, 255, 255, 0.03);
|
||||
--kt-stepper-icon-bg-color-current: var(--kt-success);
|
||||
--kt-stepper-icon-bg-color-completed: rgba(255, 255, 255, 0.03);
|
||||
|
||||
--kt-stepper-icon-border: 1px dashed rgba(255, 255, 255, 0.3);
|
||||
--kt-stepper-icon-border-current: 0;
|
||||
--kt-stepper-icon-border-completed: 1px dashed rgba(255, 255, 255, 0.3);
|
||||
|
||||
--kt-stepper-icon-number-color: var(--kt-white);
|
||||
--kt-stepper-icon-number-color-current: var(--kt-white);
|
||||
--kt-stepper-icon-number-color-completed: var(--kt-white);
|
||||
|
||||
--kt-stepper-icon-check-color-completed: var(--kt-success);
|
||||
|
||||
--kt-stepper-label-title-opacity: 0.7;
|
||||
--kt-stepper-label-title-opacity-current: 1;
|
||||
--kt-stepper-label-title-opacity-completed: 1;
|
||||
|
||||
--kt-stepper-label-title-color: var(--kt-white);
|
||||
--kt-stepper-label-title-color-current: var(--kt-white);
|
||||
--kt-stepper-label-title-color-completed: var(--kt-white);
|
||||
|
||||
--kt-stepper-label-desc-opacity: 0.7;
|
||||
--kt-stepper-label-desc-opacity-current: 0.7;
|
||||
--kt-stepper-label-desc-opacity-completed: 0.7;
|
||||
|
||||
--kt-stepper-label-desc-color: var(--kt-white);
|
||||
--kt-stepper-label-desc-color-current: var(--kt-white);
|
||||
--kt-stepper-label-desc-color-completed: var(--kt-white);
|
||||
|
||||
--kt-stepper-line-border: 1px dashed rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
//
|
||||
// Functions
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "functions/get";
|
||||
@import "functions/set";
|
||||
@import "functions/math";
|
||||
@import "functions/valueif";
|
||||
@import "functions/theme-colors";
|
||||
@@ -0,0 +1,11 @@
|
||||
//
|
||||
// Mixins
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "mixins/property";
|
||||
@import "mixins/browsers";
|
||||
@import "mixins/fixes";
|
||||
@import "mixins/reset";
|
||||
@import "mixins/placeholder";
|
||||
@import "mixins/breakpoints";
|
||||
@@ -0,0 +1,82 @@
|
||||
//
|
||||
// Get
|
||||
//
|
||||
|
||||
@function get($map, $keys...) {
|
||||
@if length($keys) == 1 {
|
||||
$keys: nth($keys, 1);
|
||||
}
|
||||
|
||||
@if type-of($map) != 'map' or $map == null {
|
||||
//@return false;
|
||||
}
|
||||
|
||||
$warn: "#{nth($keys, 1)}";
|
||||
$length: length($keys);
|
||||
$get: map-get($map, nth($keys, 1));
|
||||
|
||||
@if $length > 1 {
|
||||
@for $i from 2 through $length {
|
||||
@if $get != null and type-of($get) == 'map' {
|
||||
$warn: $warn + "->#{nth($keys, $i)}";
|
||||
$get: map-get($get, nth($keys, $i));
|
||||
|
||||
@if $get == null {
|
||||
@return null;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@return get-warning($warn, $get, nth($keys, $i));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $get;
|
||||
}
|
||||
|
||||
@function has($map, $keys...) {
|
||||
@if length($keys) == 1 {
|
||||
$keys: nth($keys, 1);
|
||||
}
|
||||
|
||||
@if type-of($map) != 'map' or $map == null {
|
||||
//@return false;
|
||||
}
|
||||
|
||||
$warn: "#{nth($keys, 1)}";
|
||||
$length: length($keys);
|
||||
$get: map-get($map, nth($keys, 1));
|
||||
|
||||
@if $length > 1 {
|
||||
@for $i from 2 through $length {
|
||||
@if $get != null and type-of($get) == 'map' {
|
||||
$warn: $warn + "->#{nth($keys, $i)}";
|
||||
$get: map-get($get, nth($keys, $i));
|
||||
|
||||
@if $get == null {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $get != null {
|
||||
@return true;
|
||||
}
|
||||
@else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@function get-warning($warn, $get, $key) {
|
||||
@if $get == null {
|
||||
@warn "Map has no value for key search `#{$warn}`";
|
||||
}
|
||||
@else if type-of($get) != 'map' {
|
||||
@warn "Non-map value found for key search `#{$warn}`, cannot search for key `#{$key}`";
|
||||
}
|
||||
@return null;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// Math
|
||||
//
|
||||
|
||||
@function sqrt($r) {
|
||||
$x0: 1;
|
||||
$x1: $x0;
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
$x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
|
||||
$x0: $x1;
|
||||
}
|
||||
|
||||
@return $x1;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/// Deep set function to set a value in nested maps
|
||||
|
||||
@function set($map, $keys, $value) {
|
||||
$maps: ($map,);
|
||||
$result: null;
|
||||
|
||||
// If the last key is a map already
|
||||
// Warn the user we will be overriding it with $value
|
||||
@if type-of(nth($keys, -1)) == "map" {
|
||||
@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
|
||||
}
|
||||
|
||||
// If $keys is a single key
|
||||
// Just merge and return
|
||||
@if length($keys) == 1 {
|
||||
@return map-merge($map, ($keys: $value));
|
||||
}
|
||||
|
||||
// Loop from the first to the second to last key from $keys
|
||||
// Store the associated map to this key in the $maps list
|
||||
// If the key doesn't exist, throw an error
|
||||
@for $i from 1 through length($keys) - 1 {
|
||||
$current-key: nth($keys, $i);
|
||||
$current-map: nth($maps, -1);
|
||||
$current-get: map-get($current-map, $current-key);
|
||||
@if $current-get == null {
|
||||
@error "Key `#{$key}` doesn't exist at current level in map.";
|
||||
}
|
||||
$maps: append($maps, $current-get);
|
||||
}
|
||||
|
||||
// Loop from the last map to the first one
|
||||
// Merge it with the previous one
|
||||
@for $i from length($maps) through 1 {
|
||||
$current-map: nth($maps, $i);
|
||||
$current-key: nth($keys, $i);
|
||||
$current-val: if($i == length($maps), $value, $result);
|
||||
$result: map-merge($current-map, ($current-key: $current-val));
|
||||
}
|
||||
|
||||
// Return result
|
||||
@return $result;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// Bootstrap extended functions
|
||||
//
|
||||
|
||||
@function theme-inverse-color($key: "primary") {
|
||||
@return get($theme-inverse-colors, $key);
|
||||
}
|
||||
|
||||
@function theme-active-color($key: "primary") {
|
||||
@return get($theme-active-colors, $key);
|
||||
}
|
||||
|
||||
@function theme-light-color($key: "primary") {
|
||||
@return get($theme-light-colors, $key);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
//
|
||||
// valueif
|
||||
//
|
||||
|
||||
@function valueif($check, $trueValue, $falseValue: null) {
|
||||
@if $check {
|
||||
@return $trueValue;
|
||||
} @else if $falseValue != null {
|
||||
@return $falseValue;
|
||||
} @else {
|
||||
@return null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
// Media of at most the maximum and minimum breakpoint widths. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint.
|
||||
|
||||
@mixin media-breakpoint-direction($direction, $name, $breakpoints: $grid-breakpoints) {
|
||||
@if $direction == up {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
|
||||
} @else if $direction == down {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
//
|
||||
// Browsers
|
||||
//
|
||||
|
||||
@mixin for-edge {
|
||||
// Microsoft Edge
|
||||
@supports (-ms-ime-align:auto) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// Fixes
|
||||
//
|
||||
|
||||
|
||||
@mixin fix-fixed-position-lags() {
|
||||
// webkit hack for smooth font view on fixed positioned elements
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
}
|
||||
|
||||
@mixin fix-animation-lags() {
|
||||
transform: translateZ(0);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
//
|
||||
// Input placeholder color
|
||||
//
|
||||
|
||||
@mixin placeholder($color) {
|
||||
// Chrome, Firefox, Opera, Safari 10.1+
|
||||
&::placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: $color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
//
|
||||
// CSS Property
|
||||
//
|
||||
|
||||
@mixin property($attr, $value, $important: '') {
|
||||
@if $value != null and $value != false {
|
||||
#{$attr}: #{$value} #{$important};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
//
|
||||
// Reset
|
||||
//
|
||||
|
||||
@mixin button-reset() {
|
||||
appearance: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
outline: none !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@mixin input-reset() {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
outline: none !important;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
//
|
||||
// Accordion
|
||||
//
|
||||
|
||||
// Base
|
||||
.accordion {
|
||||
--#{$prefix}accordion-color: var(--kt-accordion-color);
|
||||
--#{$prefix}accordion-bg: var(--kt-accordion-bg);
|
||||
--#{$prefix}accordion-border-color: var(--kt-accordion-border-color);
|
||||
--#{$prefix}accordion-btn-color: var(--kt-accordion-color);
|
||||
--#{$prefix}accordion-btn-bg: var(--kt-accordion-button-bg);
|
||||
--#{$prefix}accordion-btn-icon: var(--kt-accordion-button-icon);
|
||||
--#{$prefix}accordion-btn-active-icon: var(--kt-accordion-button-active-icon);
|
||||
--#{$prefix}accordion-btn-focus-border-color: var(--kt-accordion-button-focus-border-color);
|
||||
--#{$prefix}accordion-btn-focus-box-shadow: var(--kt-accordion-button-focus-box-shadow);
|
||||
--#{$prefix}accordion-active-color: var(--kt-accordion-button-active-color);
|
||||
--#{$prefix}accordion-active-bg: var(--kt-accordion-button-active-bg);
|
||||
|
||||
// According heading
|
||||
.accordion-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Icon toggle mode
|
||||
&.accordion-icon-toggle {
|
||||
// Accordion icon expaned mode
|
||||
.accordion-icon {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
transition: $transition-base;
|
||||
transform: rotate(90deg);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i,
|
||||
.svg-icon {
|
||||
color: var(--kt-primary);
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion icon collapsed mode
|
||||
.collapsed {
|
||||
.accordion-icon {
|
||||
transition: $transition-base;
|
||||
transform: rotate(0);
|
||||
|
||||
i,
|
||||
.svg-icon {
|
||||
color: var(--kt-text-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset accordion item border
|
||||
&.accordion-borderless {
|
||||
// According item
|
||||
.accordion-item {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset accordion item border, border radiues and background color
|
||||
&.accordion-flush {
|
||||
// According item
|
||||
.accordion-item {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// Alert
|
||||
//
|
||||
|
||||
@each $name, $value in $theme-colors {
|
||||
.alert-#{$name} {
|
||||
color: var(--kt-#{$name});
|
||||
border-color: var(--kt-#{$name});
|
||||
background-color: var(--kt-#{$name}-light);
|
||||
|
||||
.alert-link {
|
||||
color: var(--kt-#{$name});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
//
|
||||
// Anchor
|
||||
//
|
||||
|
||||
.anchor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content:flex-start;
|
||||
height: 1em;
|
||||
width: 1.25em;
|
||||
margin-left: -1.25em;
|
||||
font-weight: 500;
|
||||
font-size: 0.8em;
|
||||
color: var(--kt-text-muted);
|
||||
transition: $transition-base;
|
||||
|
||||
&:before {
|
||||
content: '#';
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
color: var(--kt-primary);
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
//
|
||||
// Animation
|
||||
//
|
||||
|
||||
// Base
|
||||
.animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
// Slide In Down
|
||||
@keyframes animationSlideInDown {
|
||||
from {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.animation-slide-in-down {
|
||||
animation-name: animationSlideInDown;
|
||||
}
|
||||
|
||||
// Slide In Up
|
||||
@keyframes animationSlideInUp {
|
||||
from {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.animation-slide-in-up {
|
||||
animation-name: animationSlideInUp;
|
||||
}
|
||||
|
||||
// Fade In
|
||||
@keyframes animationFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animation-fade-in {
|
||||
animation-name: animationFadeIn;
|
||||
}
|
||||
|
||||
// Fade Out
|
||||
@keyframes animationFadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.animation-fade-out {
|
||||
animation-name: animationFadeOut;
|
||||
}
|
||||
|
||||
// Blink
|
||||
.animation-blink {
|
||||
animation: animationBlink 1s steps(5, start) infinite;
|
||||
}
|
||||
|
||||
@keyframes animationBlink {
|
||||
to {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
//
|
||||
// Badge
|
||||
//
|
||||
|
||||
.badge {
|
||||
--#{$prefix}badge-color: var(--kt-badge-color);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
// Fixed size
|
||||
&.badge-circle,
|
||||
&.badge-square {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $badge-size;
|
||||
min-width: $badge-size;
|
||||
padding: 0 0.1rem;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
// Circle
|
||||
&.badge-circle {
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
min-width: unset;
|
||||
width: $badge-size;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.badge-sm {
|
||||
min-width: $badge-size-sm;
|
||||
font-size: $badge-font-size-sm;
|
||||
|
||||
&.badge-square {
|
||||
height: $badge-size-sm;
|
||||
}
|
||||
|
||||
&.badge-circle {
|
||||
width: $badge-size-sm;
|
||||
height: $badge-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&.badge-lg {
|
||||
min-width: $badge-size-lg;
|
||||
font-size: $badge-font-size-lg;
|
||||
|
||||
&.badge-square {
|
||||
height: $badge-size-lg;
|
||||
}
|
||||
|
||||
&.badge-circle {
|
||||
width: $badge-size-lg;
|
||||
height: $badge-size-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $value in $theme-colors {
|
||||
.badge-#{$name} {
|
||||
color: var(--kt-#{$name}-inverse);
|
||||
background-color: var(--kt-#{$name});
|
||||
|
||||
&.badge-outline {
|
||||
border: 1px solid var(--kt-#{$name});
|
||||
color: var(--kt-#{$name});
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-light-#{$name} {
|
||||
color: var(--kt-#{$name});
|
||||
background-color: var(--kt-#{$name}-light);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
//
|
||||
// BlockUI
|
||||
//
|
||||
|
||||
|
||||
.blockui {
|
||||
position: relative;
|
||||
|
||||
.blockui-overlay {
|
||||
transition: all 0.3s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--kt-blockui-overlay-bg);
|
||||
|
||||
.spinner-border {
|
||||
height: 1.35rem;
|
||||
width: 1.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
.blockui-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include border-radius($border-radius);
|
||||
box-shadow: var(--kt-dropdown-box-shadow);
|
||||
background-color: var(--kt-tooltip-bg);
|
||||
color: var(--kt-gray-700);
|
||||
font-weight: $font-weight-bold;
|
||||
margin: 0 !important;
|
||||
width: auto;
|
||||
padding: 0.85rem 1.75rem !important;
|
||||
|
||||
.spinner-border {
|
||||
margin-right: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
//
|
||||
// Breadcrumb
|
||||
//
|
||||
|
||||
// Breadcrumb
|
||||
.breadcrumb {
|
||||
--#{$prefix}breadcrumb-bg: var(--kt-breadcrumb-bg);
|
||||
--#{$prefix}breadcrumb-divider-color: var(--kt-breadcrumb-divider-color);
|
||||
--#{$prefix}breadcrumb-item-active-color: var(--kt-breadcrumb-item-active-color);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
// Item breadcrumb
|
||||
.breadcrumb-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
padding-right: $breadcrumb-item-padding-x;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "/";
|
||||
//padding-left: $breadcrumb-item-padding-x;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb line style
|
||||
.breadcrumb-line {
|
||||
.breadcrumb-item {
|
||||
&:after {
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb dot style
|
||||
.breadcrumb-dot {
|
||||
.breadcrumb-item {
|
||||
&:after {
|
||||
content: "\2022";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb separatorless style
|
||||
.breadcrumb-separatorless {
|
||||
.breadcrumb-item {
|
||||
&:after {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
//
|
||||
// Bullet
|
||||
//
|
||||
|
||||
// Base
|
||||
.bullet {
|
||||
display: inline-block;
|
||||
background-color: var(--kt-bullet-bg-color);
|
||||
@include border-radius($bullet-bar-border-radius);
|
||||
width: $bullet-bar-width;
|
||||
height: $bullet-bar-height;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Dot bullet
|
||||
.bullet-dot {
|
||||
width: $bullet-dot-size;
|
||||
height: $bullet-dot-size;
|
||||
border-radius: 100% !important;
|
||||
}
|
||||
|
||||
// Vertical bullet
|
||||
.bullet-vertical {
|
||||
width: $bullet-bar-height;
|
||||
height: $bullet-bar-width;
|
||||
}
|
||||
|
||||
// Vertical line
|
||||
.bullet-line {
|
||||
width: $bullet-line-width;
|
||||
height: $bullet-line-height;
|
||||
border-radius: 0;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
|
||||
|
||||
// The clickable button for toggling the menu
|
||||
// Set the same inset shadow as the :active state
|
||||
.btn-group.show .dropdown-toggle {
|
||||
@include box-shadow(var(--kt-btn-active-box-shadow));
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
//
|
||||
// Buttons
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "buttons/base";
|
||||
@import "buttons/theme";
|
||||
@@ -0,0 +1,291 @@
|
||||
//
|
||||
// Card
|
||||
//
|
||||
|
||||
// Base
|
||||
.card {
|
||||
@if ($card-border-enabled) {
|
||||
border: $card-border-width $card-border-style var(--kt-card-border-color);
|
||||
} @else {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
box-shadow: var(--kt-card-box-shadow);
|
||||
background-color: var(--kt-card-bg);
|
||||
|
||||
// Header
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
min-height: $card-header-height;
|
||||
padding: 0 $card-px;
|
||||
color: var(--kt-card-cap-color);
|
||||
background-color: var(--kt-card-cap-bg);
|
||||
border-bottom: $card-border-width $card-border-style var(--kt-card-border-color);
|
||||
|
||||
// Title
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: $card-header-py;
|
||||
margin-left: 0;
|
||||
|
||||
&.flex-column {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
margin-right: 0.75rem;
|
||||
line-height: 0;
|
||||
|
||||
i {
|
||||
font-size: 1.25rem;
|
||||
color: var(--kt-gray-600);
|
||||
line-height: 0;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
color: var(--kt-gray-600);
|
||||
@include svg-icon-size(24px);
|
||||
}
|
||||
}
|
||||
|
||||
&,
|
||||
.card-label {
|
||||
font-weight: 500;
|
||||
font-size: 1.275rem;
|
||||
color: var(--kt-text-dark);
|
||||
}
|
||||
|
||||
.card-label {
|
||||
margin: 0 0.75rem 0 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// Description
|
||||
small {
|
||||
color: var(--kt-text-muted);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Toolbar
|
||||
.card-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: $card-header-py 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Body
|
||||
.card-body {
|
||||
padding: $card-py $card-px;
|
||||
color: var(--kt-card-color);
|
||||
}
|
||||
|
||||
// Footer
|
||||
.card-footer {
|
||||
padding: $card-py $card-px;
|
||||
color: var(--kt-card-cap-color);
|
||||
background-color: var(--kt-card-cap-bg);
|
||||
border-top: $card-border-width $card-border-style var(--kt-card-border-color);
|
||||
}
|
||||
|
||||
// Scroll
|
||||
.card-scroll {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Reset padding x
|
||||
&.card-px-0 {
|
||||
.card-header,
|
||||
.card-body,
|
||||
.card-footer {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-py-0 {
|
||||
.card-header,
|
||||
.card-body,
|
||||
.card-footer {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-p-0 {
|
||||
.card-header,
|
||||
.card-body,
|
||||
.card-footer {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dashed style
|
||||
&.card-dashed {
|
||||
box-shadow: none;
|
||||
border: $card-border-width dashed var(--kt-card-border-dashed-color);
|
||||
|
||||
> .card-header {
|
||||
border-bottom: 1px dashed var(--kt-card-border-dashed-color);
|
||||
}
|
||||
|
||||
> .card-footer {
|
||||
border-top: 1px dashed var(--kt-card-border-dashed-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Bordered style
|
||||
&.card-bordered {
|
||||
box-shadow: none;
|
||||
border: $card-border-width $card-border-style var(--kt-card-border-color);
|
||||
}
|
||||
|
||||
// Flush header and footer borders
|
||||
&.card-flush {
|
||||
> .card-header {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
> .card-footer {
|
||||
border-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Enable shadow
|
||||
&.card-shadow {
|
||||
box-shadow: var(--kt-card-box-shadow);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Reset styles
|
||||
&.card-reset {
|
||||
border: 0 !important;
|
||||
box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
> .card-header {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
> .card-footer {
|
||||
border-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive stretch heights
|
||||
.card {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Stretch
|
||||
&.card#{$infix}-stretch {
|
||||
height: calc(100% - var(--bs-gutter-y));
|
||||
}
|
||||
|
||||
// Stretch 75
|
||||
&.card#{$infix}-stretch-75 {
|
||||
height: calc(75% - var(--bs-gutter-y));
|
||||
}
|
||||
|
||||
// Stretch 50
|
||||
&.card#{$infix}-stretch-50 {
|
||||
height: calc(50% - var(--bs-gutter-y));
|
||||
}
|
||||
|
||||
// Stretch 33
|
||||
&.card#{$infix}-stretch-33 {
|
||||
height: calc(33.333% - var(--bs-gutter-y));
|
||||
}
|
||||
|
||||
// Stretch 25
|
||||
&.card#{$infix}-stretch-25 {
|
||||
height: calc(25% - var(--bs-gutter-y));
|
||||
}
|
||||
|
||||
// Header stretch
|
||||
.card-header#{$infix}-stretch {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
align-items: stretch;
|
||||
|
||||
.card-toolbar {
|
||||
margin: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
.card-p {
|
||||
padding: $card-py $card-px !important;
|
||||
}
|
||||
|
||||
.card-px {
|
||||
padding-left: $card-px !important;
|
||||
padding-right: $card-px !important;
|
||||
}
|
||||
|
||||
.card-shadow {
|
||||
box-shadow: var(--kt-card-box-shadow);
|
||||
}
|
||||
|
||||
.card-py {
|
||||
padding-top: $card-py !important;
|
||||
padding-bottom: $card-py !important;
|
||||
}
|
||||
|
||||
.card-rounded {
|
||||
border-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card-rounded-start {
|
||||
border-top-left-radius: $card-border-radius;
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card-rounded-end {
|
||||
border-top-right-radius: $card-border-radius;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card-rounded-top {
|
||||
border-top-left-radius: $card-border-radius;
|
||||
border-top-right-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card-rounded-bottom {
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
// Mobile mode
|
||||
@include media-breakpoint-down(md) {
|
||||
.card {
|
||||
> .card-header:not(.flex-nowrap) {
|
||||
padding-top: $card-header-py;
|
||||
padding-bottom: $card-header-py;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
//
|
||||
// Carousel
|
||||
//
|
||||
|
||||
|
||||
.carousel-custom {
|
||||
// Indicators
|
||||
.carousel-indicators {
|
||||
align-items: center;
|
||||
position: static;
|
||||
z-index: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
|
||||
&.active {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Dots style
|
||||
&.carousel-indicators-dots {
|
||||
li {
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
height: $carousel-custom-dots-indicator-active-size;
|
||||
width: $carousel-custom-dots-indicator-active-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
@include border-radius(50%);
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
background-color: var(--kt-carousel-custom-indicator-default-bg-color);
|
||||
height: $carousel-custom-dots-indicator-default-size;
|
||||
width: $carousel-custom-dots-indicator-default-size;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
|
||||
&:after {
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
height: $carousel-custom-dots-indicator-active-size;
|
||||
width: $carousel-custom-dots-indicator-active-size;
|
||||
background-color: var(--kt-carousel-custom-indicator-active-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bullet style
|
||||
&.carousel-indicators-bullet {
|
||||
li {
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
background-color: transparent;
|
||||
border-radius: $carousel-custom-bullet-indicator-default-size;
|
||||
height: $carousel-custom-bullet-indicator-default-size;
|
||||
width: $carousel-custom-bullet-indicator-default-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
background-color: var(--kt-carousel-custom-bullet-indicator-default-bg-color);
|
||||
border-radius: $carousel-custom-bullet-indicator-default-size;
|
||||
height: $carousel-custom-bullet-indicator-default-size;
|
||||
width: $carousel-custom-bullet-indicator-default-size;
|
||||
}
|
||||
|
||||
&.active {
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
background-color: transparent;
|
||||
height: $carousel-custom-bullet-indicator-default-size;
|
||||
width: $carousel-custom-bullet-indicator-active-width;
|
||||
|
||||
&:after {
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
height: $carousel-custom-bullet-indicator-default-size;
|
||||
width: $carousel-custom-bullet-indicator-active-width;
|
||||
background-color: var(--kt-carousel-custom-bullet-indicator-active-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Theme colors
|
||||
@each $name, $value in $theme-colors {
|
||||
.carousel-indicators-active-#{$name} {
|
||||
li.active:after {
|
||||
background-color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stretch mode
|
||||
&.carousel-stretch {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.carousel-inner {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carousel-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// Close
|
||||
//
|
||||
|
||||
.btn-close {
|
||||
color: var(--kt-btn-close-color);
|
||||
background-image: var(--kt-btn-close-bg);
|
||||
background-position: center;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: var(--kt-btn-close-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// Code
|
||||
//
|
||||
|
||||
code:not([class*="language-"]) {
|
||||
font-weight: $code-font-weight;
|
||||
color: var(--kt-code-color);
|
||||
line-height: inherit;
|
||||
font-size: inherit;
|
||||
background-color: var(--kt-code-bg);
|
||||
padding: $code-padding;
|
||||
margin: $code-margin;
|
||||
box-shadow: var(--kt-code-box-shadow);
|
||||
@include border-radius($code-border-radius);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// Cookie Alert
|
||||
//
|
||||
|
||||
.cookiealert{
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
//
|
||||
// Drawer
|
||||
//
|
||||
|
||||
// Drawer
|
||||
.drawer {
|
||||
display: flex !important;
|
||||
overflow: auto;
|
||||
z-index: $drawer-z-index;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--kt-drawer-bg-color);
|
||||
transition: transform $drawer-transition-speed ease-in-out !important;
|
||||
|
||||
&.drawer-start {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&.drawer-end {
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
&.drawer-on {
|
||||
transform: none;
|
||||
box-shadow: var(--kt-drawer-box-shadow);
|
||||
transition: transform $drawer-transition-speed ease-in-out !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Drawer Overlay
|
||||
.drawer-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
z-index: $drawer-z-index - 1;
|
||||
background-color: var(--kt-drawer-overlay-bg-color);
|
||||
animation: animation-drawer-fade-in $drawer-overlay-animation-speed ease-in-out 1;
|
||||
}
|
||||
|
||||
// Initial state
|
||||
[data-kt-drawer="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Animation
|
||||
@keyframes animation-drawer-fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
// Tablet & Mobile Modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
body[data-kt-drawer="on"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
--#{$prefix}dropdown-color: var(--kt-dropdown-color);
|
||||
--#{$prefix}dropdown-bg: var(--kt-dropdown-bg);
|
||||
--#{$prefix}dropdown-border-color: var(--kt-dropdown-border-color);
|
||||
--#{$prefix}dropdown-divider-bg: var(--kt-dropdown-divider-bg);
|
||||
--#{$prefix}dropdown-box-shadow: var(--kt-dropdown-box-shadow);
|
||||
--#{$prefix}dropdown-link-color: var(--kt-dropdown-link-color);
|
||||
--#{$prefix}dropdown-link-hover-color: var(--kt-dropdown-link-hover-color);
|
||||
--#{$prefix}dropdown-link-hover-bg: var(--kt-dropdown-link-hover-bg);
|
||||
--#{$prefix}dropdown-link-active-color: var(--kt-dropdown-link-active-color);
|
||||
--#{$prefix}dropdown-link-active-bg: var(--kt-dropdown-link-active-bg);
|
||||
--#{$prefix}dropdown-link-disabled-color: var(--kt-dropdown-link-disabled-color);
|
||||
--#{$prefix}dropdown-header-color: var(--kt-dropdown-header-color);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
//
|
||||
// Engage panel(used for demo product demo)
|
||||
//
|
||||
|
||||
.engage-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px !important;
|
||||
|
||||
@include button-custom-variant(
|
||||
$color: var(--kt-engage-btn-color),
|
||||
$icon-color: var(--kt-engage-btn-color),
|
||||
$border-color: var(--kt-engage-btn-bg),
|
||||
$bg-color: var(--kt-engage-btn-bg),
|
||||
$color-active: var(--kt-engage-btn-color-active),
|
||||
$icon-color-active: var(--kt-engage-btn-color-active),
|
||||
$border-color-active: var(--kt-engage-btn-bg),
|
||||
$bg-color-active: var(--kt-engage-btn-bg)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
//
|
||||
// Explore(used for demo product demo)
|
||||
//
|
||||
|
||||
$explore-primary: #00B2FF;
|
||||
$explore-primary-light: #F1FAFF;
|
||||
$explore-primary-active: #0098DA;
|
||||
$explore-primary-inverse: $white;
|
||||
|
||||
$explore-success: #50CD89;
|
||||
$explore-success-light: #E8FFF3;
|
||||
$explore-success-active: #47BE7D;
|
||||
$explore-success-inverse: $white;
|
||||
|
||||
$explore-warning: #FFC700;
|
||||
$explore-warning-inverse: $white;
|
||||
|
||||
$explore-danger: #F1416C;
|
||||
$explore-warning-inverse: $white;
|
||||
|
||||
.explore-btn-toggle {
|
||||
color: var(--kt-gray-600);
|
||||
background-color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $explore-primary-inverse;
|
||||
background-color: $explore-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-btn-dismiss {
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
i,
|
||||
.svg-icon {
|
||||
color: $explore-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explore-btn-primary {
|
||||
border: 0;
|
||||
color: $explore-primary-inverse;
|
||||
background-color: $explore-primary;
|
||||
|
||||
&:hover {
|
||||
color: $explore-primary-inverse;
|
||||
background-color: $explore-primary-active;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-btn-secondary {
|
||||
border: 0;
|
||||
color: var(--kt-gray-600);
|
||||
background-color: var(--kt-gray-100);
|
||||
|
||||
&:hover {
|
||||
color: var(--kt-gray-800);
|
||||
background-color: var(--kt-gray-200);
|
||||
}
|
||||
}
|
||||
|
||||
.explore-btn-outline {
|
||||
border: 1px dashed var(--kt-gray-300) !important;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
border: 1px dashed $explore-success !important;
|
||||
background-color: $explore-success-light;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-link {
|
||||
color: $explore-primary;
|
||||
|
||||
&:hover {
|
||||
color: $explore-primary-active;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-link-hover:hover {
|
||||
color: $explore-primary !important;
|
||||
}
|
||||
|
||||
.explore-icon-success {
|
||||
color: $explore-success;
|
||||
}
|
||||
|
||||
.explore-icon-danger {
|
||||
color: $explore-danger;
|
||||
}
|
||||
|
||||
.explore-label-free {
|
||||
color: $explore-warning-inverse;
|
||||
background-color: $explore-warning;
|
||||
}
|
||||
|
||||
.explore-label-pro {
|
||||
color: $explore-success-inverse;
|
||||
background-color: $explore-success;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
//
|
||||
// Loading
|
||||
//
|
||||
|
||||
.feedback {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.feedback-popup {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
position: fixed;
|
||||
z-index: $feedback-popup-z-index;
|
||||
box-shadow: var(--kt-feedback-popup-box-shadow);
|
||||
background-color: var(--kt-feedback-popup-background-color);
|
||||
border-radius: $feedback-popup-border-radius;
|
||||
padding: $feedback-popup-padding;
|
||||
}
|
||||
|
||||
// Placement
|
||||
.feedback-top-center {
|
||||
display: flex;
|
||||
transition: top $feedback-popup-transition-speed ease;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@include border-top-start-radius(0);
|
||||
@include border-top-end-radius(0);
|
||||
|
||||
&.feedback-shown {
|
||||
top: 0px;
|
||||
transition: top $feedback-popup-transition-speed ease;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
//
|
||||
// Fixed
|
||||
//
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.fixed-top#{$infix} {
|
||||
position: fixed;
|
||||
z-index: $fixed-z-index;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "forms/labels";
|
||||
@import "forms/form-text";
|
||||
@import "forms/form-control";
|
||||
@import "forms/form-select";
|
||||
@import "forms/form-check";
|
||||
@import "forms/floating-labels";
|
||||
@import "forms/input-group";
|
||||
|
||||
@import "forms/form-control-solid";
|
||||
@import "forms/form-select-solid";
|
||||
@import "forms/form-check-solid";
|
||||
@import "forms/input-group-solid";
|
||||
@import "forms/floating-labels";
|
||||
@import "forms/required";
|
||||
@@ -0,0 +1,12 @@
|
||||
//
|
||||
// Helpers
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "helpers/background";
|
||||
@import "helpers/borders";
|
||||
@import "helpers/flex";
|
||||
@import "helpers/shadow";
|
||||
@import "helpers/text";
|
||||
@import "helpers/opacity";
|
||||
@import "helpers/transform";
|
||||
@@ -0,0 +1,48 @@
|
||||
//
|
||||
// Hover effects
|
||||
//
|
||||
|
||||
.hover-elevate-up {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-elevate-down {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(5%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-rotate-end {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(4deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-rotate-start {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-4deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
//
|
||||
// Avatar
|
||||
//
|
||||
|
||||
|
||||
// Base
|
||||
.image-input {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@include border-radius($border-radius);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
// Empty state
|
||||
&:not(.image-input-empty) {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
// Wrapper
|
||||
.image-input-wrapper {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
@include border-radius($border-radius);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
// Actions
|
||||
[data-kt-image-input-action] {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
// Change Button
|
||||
[data-kt-image-input-action="change"] {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
|
||||
input {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Cancel & Remove Buttons
|
||||
[data-kt-image-input-action="cancel"],
|
||||
[data-kt-image-input-action="remove"] {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
[data-kt-image-input-action="cancel"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Input Changed State
|
||||
&.image-input-changed {
|
||||
[data-kt-image-input-action="cancel"] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-kt-image-input-action="remove"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Input Empty State
|
||||
&.image-input-empty {
|
||||
[data-kt-image-input-action="remove"],
|
||||
[data-kt-image-input-action="cancel"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Circle style
|
||||
&.image-input-circle {
|
||||
border-radius: 50%;
|
||||
|
||||
// Wrapper
|
||||
.image-input-wrapper {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Change Control
|
||||
[data-kt-image-input-action="change"] {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
transform: translate(-100%, 0%);
|
||||
}
|
||||
|
||||
// Cancel & Remove Buttons
|
||||
[data-kt-image-input-action="cancel"],
|
||||
[data-kt-image-input-action="remove"] {
|
||||
left: 100%;
|
||||
top: 100%;
|
||||
transform: translate(-100%,-100%);
|
||||
}
|
||||
}
|
||||
|
||||
// Bordered style
|
||||
&.image-input-outline {
|
||||
.image-input-wrapper {
|
||||
border: 3px solid var(--kt-body-bg);
|
||||
box-shadow: var(--kt-box-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
.img-thumbnail {
|
||||
background-color: var(--kt-thumbnail-bg);
|
||||
border: $thumbnail-border-width solid var(--kt-thumbnail-border-color);
|
||||
@include box-shadow(var(--kt-thumbnail-box-shadow));
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
color: var(--kt-figure-caption-color);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// Indicator
|
||||
//
|
||||
|
||||
.indicator-progress {
|
||||
display: none;
|
||||
|
||||
[data-kt-indicator="on"] > & {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-label {
|
||||
[data-kt-indicator="on"] > & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
//
|
||||
// List group
|
||||
//
|
||||
|
||||
.list-group {
|
||||
--#{$prefix}list-group-color: var(--kt-list-group-color);
|
||||
--#{$prefix}list-group-bg: var(--kt-list-group-bg);
|
||||
--#{$prefix}list-group-border-color: var(--kt-list-group-border-color);
|
||||
--#{$prefix}list-group-action-color: var(--kt-list-group-action-color);
|
||||
--#{$prefix}list-group-action-hover-color: var(--kt-list-group-action-hover-color);
|
||||
--#{$prefix}list-group-action-hover-bg: var(--kt-list-group-hover-bg);
|
||||
--#{$prefix}list-group-action-active-color: var(--kt-list-group-action-active-color);
|
||||
--#{$prefix}list-group-action-active-bg: var(--kt-list-group-action-active-bg);
|
||||
--#{$prefix}list-group-disabled-color: var(--kt-list-group-disabled-color);
|
||||
--#{$prefix}list-group-disabled-bg: var(--kt-list-group-disabled-bg);
|
||||
--#{$prefix}list-group-active-color: var(--kt-list-group-active-color);
|
||||
--#{$prefix}list-group-active-bg: var(--kt-list-group-active-bg);
|
||||
--#{$prefix}list-group-active-border-color: var(--kt-list-group-active-border-color);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
//
|
||||
// Menu
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "menu/base";
|
||||
@import "menu/theme";
|
||||
@@ -0,0 +1,16 @@
|
||||
//
|
||||
// Mixins
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "mixins/theme-mode";
|
||||
@import "mixins/menu";
|
||||
@import "mixins/tooltip";
|
||||
@import "mixins/popover";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/ki";
|
||||
@import "mixins/symbol";
|
||||
@import "mixins/svg-icon";
|
||||
@import "mixins/svg-bg-icon";
|
||||
@import "mixins/scroll";
|
||||
@import "mixins/shape";
|
||||
@@ -0,0 +1,65 @@
|
||||
//
|
||||
// Modal
|
||||
//
|
||||
|
||||
.modal {
|
||||
--#{$prefix}modal-color: var(--kt-modal-content-color);
|
||||
--#{$prefix}modal-bg: var(--kt-modal-content-bg);
|
||||
--#{$prefix}modal-border-color: var(--kt-modal-content-border-color);
|
||||
--#{$prefix}modal-box-shadow: var(--kt-modal-content-box-shadow-xs);
|
||||
--#{$prefix}modal-header-border-color: var(--kt-modal-header-border-color);
|
||||
--#{$prefix}modal-footer-bg: var(--kt-modal-footer-bg);
|
||||
--#{$prefix}modal-footer-border-color: var(--kt-modal-footer-border-color);
|
||||
}
|
||||
|
||||
// Mobile dialog
|
||||
.modal-dialog {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
// Modal header
|
||||
.modal-header {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@include border-top-radius($modal-content-border-radius);
|
||||
border-bottom: $modal-header-border-width solid var(--kt-modal-header-border-color);
|
||||
|
||||
// Headings
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal content
|
||||
.modal-content {
|
||||
color: var(--kt-modal-color);
|
||||
background-color: var(--kt-modal-bg);
|
||||
border: $modal-content-border-width solid var(--kt-modal-border-color);
|
||||
@include box-shadow(var(--kt-modal-box-shadow));
|
||||
}
|
||||
|
||||
// Modal footer
|
||||
.modal-footer {
|
||||
background-color: var(--kt-modal-footer-bg);
|
||||
border-top: $modal-footer-border-width solid var(--#{$prefix}modal-footer-border-color);
|
||||
}
|
||||
|
||||
// Modal background
|
||||
.modal-backdrop {
|
||||
--#{$prefix}backdrop-bg: var(--kt-modal-backdrop-bg);
|
||||
--#{$prefix}backdrop-opacity: var(--kt-modal-backdrop-opacity);
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@include media-breakpoint-up(sm) {
|
||||
.modal-content {
|
||||
@include box-shadow(var(--kt-modal-box-shadow-sm-up));
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
.modal-rounded {
|
||||
@if $enable-rounded {
|
||||
border-radius: $modal-content-border-radius !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
//
|
||||
// Nav
|
||||
//
|
||||
|
||||
// Line tabs
|
||||
.nav-line-tabs {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: var(--kt-border-color);
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: -1px;
|
||||
|
||||
// Base link
|
||||
.nav-link {
|
||||
color: var(--kt-gray-500);
|
||||
border: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: $transition-link;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
// First Item
|
||||
&:first-child {
|
||||
.nav-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Last Item
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Hover States
|
||||
.nav-item .nav-link.active,
|
||||
.nav-item.show .nav-link,
|
||||
.nav-item .nav-link:hover:not(.disabled) {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--kt-primary);
|
||||
transition: $transition-link;
|
||||
}
|
||||
|
||||
// 2x Line
|
||||
&.nav-line-tabs-2x {
|
||||
border-bottom-width: 2px;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: -2px;
|
||||
|
||||
.nav-link {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Hover States
|
||||
.nav-item .nav-link.active,
|
||||
.nav-item.show .nav-link,
|
||||
.nav-item .nav-link:hover:not(.disabled) {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
//
|
||||
// Custom Nav Pills
|
||||
//
|
||||
|
||||
.nav.nav-pills.nav-pills-custom {
|
||||
// States
|
||||
.show > .nav-link,
|
||||
.nav-link{
|
||||
border: 1px dashed var(--kt-border-dashed-color);
|
||||
@include border-radius($border-radius-lg);
|
||||
|
||||
&.nav-link-border-solid {
|
||||
border: 3px solid var(--kt-border-dashed-color);
|
||||
|
||||
&.active {
|
||||
border: 3px solid var(--kt-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
img {
|
||||
width: 30px;
|
||||
transition: $transition-link;
|
||||
|
||||
&.default {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--kt-border-dashed-color);
|
||||
transition-duration: 1ms;
|
||||
position: relative;
|
||||
|
||||
.nav-text {
|
||||
color: var(--kt-gray-800) !important;
|
||||
transition: $transition-link;
|
||||
}
|
||||
|
||||
.bullet-custom {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.bullet-custom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-pills-active-custom {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&:not(:active) {
|
||||
span:nth-child(1) {
|
||||
color: #B5B5C3;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #3F4254;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span:nth-child(1) {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
span:nth-child(1) {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
//
|
||||
// Nav
|
||||
//
|
||||
|
||||
// Basic
|
||||
.nav {
|
||||
--#{$prefix}nav-link-color: var(--kt-nav-link-color);
|
||||
--#{$prefix}nav-link-hover-color: var(--kt-nav-link-hover-color);
|
||||
--#{$prefix}nav-link-disabled-color: var(--kt-nav-link-disabled-color);
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.nav-tabs {
|
||||
--#{$prefix}nav-tabs-border-color: var(--kt-nav-tabs-border-color);
|
||||
--#{$prefix}nav-tabs-link-hover-border-color: var(--kt-nav-tabs-link-hover-border-color);
|
||||
--#{$prefix}nav-tabs-link-active-color: var(--kt-nav-tabs-link-active-color);
|
||||
--#{$prefix}nav-tabs-link-active-bg: var(--kt-nav-tabs-link-active-bg);
|
||||
--#{$prefix}nav-tabs-link-active-border-color: var(--kt-nav-tabs-link-active-border-color);
|
||||
}
|
||||
|
||||
// Pills
|
||||
.nav-pills {
|
||||
--#{$prefix}nav-pills-link-active-color: var(--kt-nav-pills-link-active-color);
|
||||
--#{$prefix}nav-pills-link-active-bg: var(--kt-nav-pills-link-active-bg);
|
||||
}
|
||||
|
||||
// Nav pills
|
||||
.nav-pills {
|
||||
.nav-item {
|
||||
margin-right: 0.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stretch items
|
||||
.nav-stretch {
|
||||
align-items: stretch;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Nav group
|
||||
.nav-group {
|
||||
padding: 0.35rem;
|
||||
@include border-radius($border-radius);
|
||||
background-color: var(--kt-gray-100);
|
||||
|
||||
// Outline nav group
|
||||
&.nav-group-outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--kt-border-color);
|
||||
}
|
||||
|
||||
// Fluid option
|
||||
&.nav-group-fluid {
|
||||
display: flex;
|
||||
|
||||
> label,
|
||||
> .btn {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
> label {
|
||||
margin-right: 0.1rem;
|
||||
|
||||
> .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
%offcanvas-css-vars {
|
||||
--#{$prefix}offcanvas-color: var(--kt-offcanvas-color);
|
||||
--#{$prefix}offcanvas-bg: var(--kt-offcanvas-bg-color);
|
||||
--#{$prefix}offcanvas-border-color: var(--kt-offcanvas-border-color);
|
||||
--#{$prefix}offcanvas-box-shadow: var(--kt-offcanvas-box-shadow);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
//
|
||||
// Demo
|
||||
//
|
||||
|
||||
|
||||
.overlay {
|
||||
position: relative;
|
||||
|
||||
.overlay-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--kt-overlay-bg);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.overlay-show,
|
||||
&.overlay-block,
|
||||
&:hover {
|
||||
.overlay-layer {
|
||||
transition: all 0.3s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.overlay-block {
|
||||
cursor: wait;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
//
|
||||
// Page loader(used by the previous layout system)
|
||||
//
|
||||
|
||||
// CSS3 Transitions only after page load(.page-loading class added to body tag and remove with JS on page load)
|
||||
[data-kt-app-page-loading="on"] *,
|
||||
.page-loading * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
// Base
|
||||
.page-loader {
|
||||
background: var(--kt-body-bg);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
|
||||
[data-kt-app-page-loading="on"] &,
|
||||
.page-loading & {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
//
|
||||
// Pagination
|
||||
//
|
||||
|
||||
.pagination {
|
||||
--#{$prefix}pagination-color: var(--kt-pagination-color);
|
||||
--#{$prefix}pagination-bg: var(--kt-pagination-bg);
|
||||
--#{$prefix}pagination-border-color: var(--kt-pagination-border-color);
|
||||
--#{$prefix}pagination-hover-color: var(--kt-pagination-hover-color);
|
||||
--#{$prefix}pagination-hover-bg: var(--kt-pagination-hover-bg);
|
||||
--#{$prefix}pagination-hover-border-color: var(--kt-pagination-hover-border-color);
|
||||
--#{$prefix}pagination-focus-color: var(--kt-pagination-focus-color);
|
||||
--#{$prefix}pagination-focus-bg: var(--kt-pagination-focus-bg);
|
||||
--#{$prefix}pagination-focus-box-shadow: var(--kt-pagination-focus-box-shadow);
|
||||
--#{$prefix}pagination-active-color: var(--kt-pagination-active-color);
|
||||
--#{$prefix}pagination-active-bg: var(--kt-pagination-active-bg);
|
||||
--#{$prefix}pagination-active-border-color: var(--kt-pagination-active-border-color);
|
||||
--#{$prefix}pagination-disabled-color: var(--kt-pagination-disabled-color);
|
||||
--#{$prefix}pagination-disabled-bg: var(--kt-pagination-disabled-bg);
|
||||
--#{$prefix}pagination-disabled-border-color: var(--kt-pagination-disabled-border-color);
|
||||
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
|
||||
// Pagination circle
|
||||
&.pagination-circle {
|
||||
.page-link {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination outline
|
||||
&.pagination-outline {
|
||||
.page-link {
|
||||
border: 1px solid var(--kt-border-color);
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&:hover:not(.disabled),
|
||||
&.active {
|
||||
.page-link {
|
||||
border-color: var(--kt-primary-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
margin-right: $pagination-item-space;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: $btn-border-radius;
|
||||
height: $pagination-item-height;
|
||||
min-width: $pagination-item-height;
|
||||
font-weight: $pagination-font-weight;
|
||||
font-size: $pagination-font-size;
|
||||
|
||||
i {
|
||||
font-size: $pagination-icon-font-size;
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.previous,
|
||||
.next {
|
||||
display: block;
|
||||
height: $pagination-icon-height;
|
||||
width: $pagination-icon-height;
|
||||
|
||||
/*rtl:raw:transform: rotateZ(-180deg);*/
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
.previous {
|
||||
@include svg-bg-icon(arrow-start, $pagination-color);
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.next {
|
||||
@include svg-bg-icon(arrow-end, $pagination-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.page-link {
|
||||
color: var(--kt-pagination-focus-color);
|
||||
|
||||
.svg-icon,
|
||||
i {
|
||||
color: var(--kt-pagination-focus-color);
|
||||
}
|
||||
|
||||
.previous {
|
||||
@include svg-bg-icon(arrow-start, var(--kt-pagination-focus-color));
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.next {
|
||||
@include svg-bg-icon(arrow-end, var(--kt-pagination-focus-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.active):not(.offset):not(.disabled) {
|
||||
.page-link {
|
||||
color: var(--kt-pagination-hover-color);
|
||||
|
||||
&.page-text {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.svg-icon,
|
||||
i {
|
||||
color: var(--kt-pagination-hover-color);
|
||||
}
|
||||
|
||||
.previous {
|
||||
@include svg-bg-icon(arrow-start, var(--kt-pagination-hover-color));
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.next {
|
||||
@include svg-bg-icon(arrow-end, var(--kt-pagination-hover-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.page-link {
|
||||
color: var(--kt-pagination-active-color);
|
||||
|
||||
&.page-text {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.svg-icon,
|
||||
i {
|
||||
color: var(--kt-pagination-active-color);;
|
||||
}
|
||||
|
||||
.previous {
|
||||
@include svg-bg-icon(arrow-start, var(--kt-pagination-active-color));
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.next {
|
||||
@include svg-bg-icon(arrow-end, var(--kt-pagination-active-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.page-link {
|
||||
color: var(--kt-pagination-disabled-color);
|
||||
|
||||
.svg-icon,
|
||||
i {
|
||||
color: var(--kt-pagination-disabled-color);
|
||||
}
|
||||
|
||||
.previous {
|
||||
@include svg-bg-icon(arrow-start, var(--kt-pagination-disabled-color));
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.next {
|
||||
@include svg-bg-icon(arrow-end, var(--kt-pagination-disabled-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
.page-item {
|
||||
margin-right: $pagination-item-space-tablet-and-mobile;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
//
|
||||
// Popover
|
||||
//
|
||||
|
||||
|
||||
// Base
|
||||
.popover {
|
||||
--#{$prefix}popover-bg: var(--kt-popover-bg);
|
||||
--#{$prefix}popover-border-color: var(--kt-popover-border-color);
|
||||
--#{$prefix}popover-box-shadow: var(--kt-popover-box-shadow);
|
||||
--#{$prefix}popover-header-color: var(--kt-popover-header-color);
|
||||
--#{$prefix}popover-header-bg: var(--kt-popover-header-bg);
|
||||
--#{$prefix}popover-body-color: var(--kt-popover-body-color);
|
||||
--#{$prefix}popover-arrow-border: var(--kt-popover-bg);
|
||||
|
||||
.popover-header {
|
||||
font-size: $popover-header-font-size;
|
||||
font-weight: $popover-header-font-weight;
|
||||
border-bottom: 1px solid var(--kt-popover-header-border-color);
|
||||
}
|
||||
|
||||
.popover-dismiss {
|
||||
position: absolute;
|
||||
top: $popover-dissmis-btn-top;
|
||||
right: $popover-dissmis-btn-end;
|
||||
height: $popover-dissmis-btn-height;
|
||||
width: $popover-dissmis-btn-height;
|
||||
@include svg-bg-icon(close, var(--kt-gray-500)); // todo: revise
|
||||
mask-size: 50%;
|
||||
-webkit-mask-size: 50%;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--kt-primary);
|
||||
}
|
||||
|
||||
& + .popover-header {
|
||||
padding-right: $popover-body-padding-x + $popover-dissmis-btn-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inverse
|
||||
.popover-inverse {
|
||||
@include popover-theme(
|
||||
$bg-color: var(--kt-gray-900),
|
||||
$border-color: var(--kt-gray-800),
|
||||
$header-bg-color: var(--kt-gray-900),
|
||||
$header-color: var(--kt-gray-200),
|
||||
$body-color: var(--kt-gray-400),
|
||||
$arrow-outer-color: var(--kt-gray-100),
|
||||
$arrow-color: var(--kt-gray-900)
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
//
|
||||
// Print Mode
|
||||
//
|
||||
|
||||
// Add .print-content-only class to body element in order to allow printing only the content area
|
||||
@media print {
|
||||
.print-content-only {
|
||||
padding: 0 !important;
|
||||
background: none !important;
|
||||
|
||||
.wrapper,
|
||||
.page,
|
||||
.page-title
|
||||
.content,
|
||||
.container,
|
||||
.container-xxl,
|
||||
.container-fluid {
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.aside,
|
||||
.sidebar,
|
||||
.scrolltop,
|
||||
.header,
|
||||
.footer,
|
||||
.toolbar,
|
||||
.drawer,
|
||||
.btn {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
//
|
||||
// Progress
|
||||
//
|
||||
|
||||
// Base
|
||||
.progress {
|
||||
--#{$prefix}progress-bg: var(--kt-progress-bg);
|
||||
--#{$prefix}progress-box-shadow: var(--kt-progress-box-shadow);
|
||||
--#{$prefix}progress-bar-color: var(--kt-progress-bar-color);
|
||||
--#{$prefix}progress-bar-bg: var(--kt-progress-bar-bg);
|
||||
}
|
||||
|
||||
// Vertical Position
|
||||
.progress-vertical {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
@include border-radius($border-radius);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 8px;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
//
|
||||
// Pulse
|
||||
//
|
||||
|
||||
|
||||
// Base
|
||||
.pulse {
|
||||
position: relative;
|
||||
|
||||
// Theme Colors
|
||||
@each $name, $color in $theme-colors {
|
||||
&.pulse-#{$name} {
|
||||
.pulse-ring {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-ring {
|
||||
display: block;
|
||||
border-radius: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
animation: animation-pulse 3.5s ease-out;
|
||||
animation-iteration-count: infinite;
|
||||
opacity: 0;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: var(--kt-gray-500);
|
||||
}
|
||||
|
||||
@keyframes animation-pulse {
|
||||
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
|
||||
60% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
|
||||
65% {opacity: 1;}
|
||||
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
//
|
||||
// Rating
|
||||
//
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rating-input {
|
||||
position: absolute !important;
|
||||
left: -9999px !important;
|
||||
|
||||
&[disabled] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rating-label {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
& > i,
|
||||
& > .svg-icon {
|
||||
line-height: 1;
|
||||
color: var(--kt-rating-color-default);
|
||||
}
|
||||
}
|
||||
|
||||
label.rating-label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.rating-label.checked,
|
||||
label.rating-label {
|
||||
& > i,
|
||||
& > .svg-icon {
|
||||
color: var(--kt-rating-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
.rating-input:checked ~ .rating-label {
|
||||
& > i,
|
||||
& > .svg-icon {
|
||||
color: var(--kt-rating-color-default);
|
||||
}
|
||||
}
|
||||
|
||||
.rating:hover label.rating-label {
|
||||
& > i,
|
||||
& > .svg-icon {
|
||||
color: var(--kt-rating-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
label.rating-label:hover ~ .rating-label {
|
||||
& > i,
|
||||
& > .svg-icon {
|
||||
color: var(--kt-rating-color-default);
|
||||
}
|
||||
color: var(--kt-rating-color-default);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// Reboot
|
||||
//
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--kt-headings-color);
|
||||
outline: 0;
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
//
|
||||
// Ribbon
|
||||
//
|
||||
|
||||
// Base
|
||||
.ribbon {
|
||||
position: relative;
|
||||
|
||||
// Ribbon target
|
||||
.ribbon-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color: var(--kt-ribbon-label-bg);
|
||||
box-shadow: var(--kt-ribbon-label-box-shadow);
|
||||
color: var(--kt-primary-inverse);
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateX(5px) translateY(-50%);
|
||||
|
||||
> .ribbon-inner {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: var(--kt-ribbon-label-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical aligment
|
||||
&-vertical {
|
||||
.ribbon-label {
|
||||
padding: 5px 10px;
|
||||
min-width: 36px;
|
||||
min-height: 46px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-top {
|
||||
.ribbon-label {
|
||||
top: 0;
|
||||
transform: translateX(-15px) translateY(-4px);
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-bottom {
|
||||
.ribbon-label {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-start {
|
||||
.ribbon-label {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: auto;
|
||||
transform: translateX(-5px) translateY(-50%);
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-end {
|
||||
.ribbon-label {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Clip style
|
||||
.ribbon.ribbon-clip {
|
||||
&.ribbon-start {
|
||||
.ribbon-label {
|
||||
left: -5px;
|
||||
|
||||
.ribbon-inner {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-color: transparent !important;
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-width: 0 10px 10px 0;
|
||||
border-right-color: var(--kt-ribbon-clip-bg) !important;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-end {
|
||||
.ribbon-label {
|
||||
right: -5px;
|
||||
|
||||
.ribbon-inner {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-color: transparent !important;
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-width: 0 0 10px 10px;
|
||||
border-left-color: var(--kt-ribbon-clip-bg) !important;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Triangle style
|
||||
.ribbon.ribbon-triangle {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
// Top start position
|
||||
&.ribbon-top-start {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-bottom: solid 2rem transparent !important;
|
||||
border-left: solid 2rem transparent;
|
||||
border-right: solid 2rem transparent !important;
|
||||
border-top: solid 2rem transparent;
|
||||
}
|
||||
|
||||
// Top end position
|
||||
&.ribbon-top-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-bottom: solid 2rem transparent !important;
|
||||
border-left: solid 2rem transparent !important;
|
||||
border-right: solid 2rem transparent;
|
||||
border-top: solid 2rem transparent;
|
||||
}
|
||||
|
||||
// Botton start position
|
||||
&.ribbon-bottom-start {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-bottom: solid 2rem transparent;
|
||||
border-left: solid 2rem transparent;
|
||||
border-right: solid 2rem transparent !important;
|
||||
border-top: solid 2rem transparent !important;
|
||||
}
|
||||
|
||||
// Botton end position
|
||||
&.ribbon-bottom-end {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-bottom: solid 2rem transparent;
|
||||
border-right: solid 2rem transparent;
|
||||
border-left: solid 2rem transparent !important;
|
||||
border-top: solid 2rem transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
//
|
||||
// CSS Variables
|
||||
//
|
||||
|
||||
[data-theme="dark"] {
|
||||
@each $color, $value in $grays-dark {
|
||||
--#{$prefix}gray-#{$color}: #{$value};
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-dark {
|
||||
--#{$prefix}#{$color}: #{$value};
|
||||
}
|
||||
|
||||
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
|
||||
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
|
||||
|
||||
--#{$prefix}body-color: #{$body-color-dark};
|
||||
--#{$prefix}body-bg: #{$body-bg-dark};
|
||||
|
||||
--#{$prefix}border-color: #{$border-color-dark};
|
||||
|
||||
--#{$prefix}heading-color: #{$headings-color-dark};
|
||||
--#{$prefix}link-color: #{$link-color-dark};
|
||||
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
|
||||
|
||||
--#{$prefix}code-color: #{$code-color-dark};
|
||||
}
|
||||
@@ -0,0 +1,868 @@
|
||||
//
|
||||
// CSS Variables
|
||||
//
|
||||
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
// Breakpoints
|
||||
@each $breakpoint, $value in $grid-breakpoints {
|
||||
--kt-#{$breakpoint}:#{$value};
|
||||
}
|
||||
|
||||
// Bootstrap color system
|
||||
--kt-white: #{$white};
|
||||
--kt-white-bg-rgb: #{to-rgb($white)};
|
||||
--kt-black: #{$black};
|
||||
--kt-black-bg-rgb: #{to-rgb($black)};
|
||||
|
||||
// Bootstrap muted color
|
||||
--kt-text-muted: #{$text-muted};
|
||||
|
||||
// Grey colors
|
||||
@each $name, $value in $grays {
|
||||
--kt-gray-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
// Grey rgba colors
|
||||
@each $name, $value in $grays {
|
||||
--kt-gray-#{$name}-rgb: #{to-rgb($value)};
|
||||
}
|
||||
|
||||
// Contextual colors
|
||||
@each $name, $value in $theme-colors {
|
||||
--kt-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
// Contextual active state colors
|
||||
@each $name, $value in $theme-active-colors {
|
||||
--kt-#{$name}-active: #{$value};
|
||||
}
|
||||
|
||||
// Contextual light state colors
|
||||
@each $name, $value in $theme-light-colors {
|
||||
--kt-#{$name}-light: #{$value};
|
||||
}
|
||||
|
||||
// Contextual inverse state colors
|
||||
@each $name, $value in $theme-inverse-colors {
|
||||
--kt-#{$name}-inverse: #{$value};
|
||||
}
|
||||
|
||||
// Contextual rbg colors
|
||||
@each $name, $value in $theme-colors {
|
||||
--kt-#{$name}-rgb: #{to-rgb($value)};
|
||||
}
|
||||
|
||||
// Text colors
|
||||
@each $name, $value in $theme-text-colors {
|
||||
--kt-text-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
// Body
|
||||
--kt-body-bg: #{$body-bg};
|
||||
--kt-body-bg-rgb: #{to-rgb($body-bg)};
|
||||
--kt-body-color: #{$body-color};
|
||||
|
||||
// Links
|
||||
--kt-link-color: #{$link-color};
|
||||
--kt-link-hover-color: #{$link-hover-color};
|
||||
|
||||
// Components
|
||||
--kt-border-color: #{$border-color};
|
||||
--kt-border-dashed-color: #{$border-dashed-color};
|
||||
|
||||
--kt-component-active-color: #{$component-active-color};
|
||||
--kt-component-active-bg: #{$component-active-bg};
|
||||
--kt-component-hover-color: #{$component-hover-color};
|
||||
--kt-component-hover-bg: #{$component-hover-bg};
|
||||
--kt-component-checked-color: #{$component-checked-color};
|
||||
--kt-component-checked-bg: #{$component-checked-bg};
|
||||
|
||||
// Box shadow
|
||||
--kt-box-shadow-xs: #{$box-shadow-xs};
|
||||
--kt-box-shadow-sm: #{$box-shadow-sm};
|
||||
--kt-box-shadow: #{$box-shadow};
|
||||
--kt-box-shadow-lg: #{$box-shadow-lg};
|
||||
|
||||
// Typography
|
||||
--kt-headings-color: #{$headings-color};
|
||||
|
||||
// Tables
|
||||
--kt-table-color: #{$table-color};
|
||||
--kt-table-bg: #{$table-bg};
|
||||
--kt-table-striped-color: #{$table-striped-color};
|
||||
--kt-table-striped-bg: #{$table-striped-bg};
|
||||
--kt-table-accent-bg: #{$table-accent-bg};
|
||||
--kt-table-active-color: #{$table-active-color};
|
||||
--kt-table-active-bg: #{$table-active-bg};
|
||||
--kt-table-hover-colorr: #{$table-hover-color};
|
||||
--kt-table-hover-bg: #{$table-hover-bg};
|
||||
--kt-table-border-color: #{$table-border-color};
|
||||
--kt-table-caption-color: #{$table-caption-color};
|
||||
|
||||
--kt-table-loading-message-box-shadow: #{$table-loading-message-box-shadow};
|
||||
--kt-table-loading-message-bg: #{$table-loading-message-bg};
|
||||
--kt-table-loading-message-color: #{$table-loading-message-color};
|
||||
|
||||
// Buttons + Forms
|
||||
--kt-input-btn-focus-color: #{$input-btn-focus-color};
|
||||
--kt-input-btn-focus-box-shadow: #{$input-btn-focus-box-shadow};
|
||||
--kt-input-btn-focus-color-opacity: #{$input-btn-focus-color-opacity};
|
||||
|
||||
--kt-input-color: #{$input-color};
|
||||
--kt-input-placeholder-color: #{$input-placeholder-color};
|
||||
--kt-input-plaintext-color: #{$input-plaintext-color};
|
||||
|
||||
// Buttons
|
||||
--kt-btn-box-shadow: #{$btn-box-shadow};
|
||||
--kt-btn-focus-box-shadow: #{$btn-focus-box-shadow};
|
||||
--kt-btn-active-box-shadow: #{$btn-active-box-shadow};
|
||||
--kt-btn-disabled-opacity: #{$btn-disabled-opacity};
|
||||
|
||||
--kt-btn-link-color: #{$btn-link-color};
|
||||
--kt-btn-link-hover-color: #{$btn-link-hover-color};
|
||||
--kt-btn-link-disabled-color: #{$btn-link-disabled-color};
|
||||
|
||||
// Forms
|
||||
--kt-form-label-color: #{$form-label-color};
|
||||
--kt-form-text-color: #{$form-text-color};
|
||||
|
||||
--kt-input-bg: #{$input-bg};
|
||||
--kt-input-disabled-bg: #{$input-disabled-bg};
|
||||
--kt-input-disabled-color: #{$input-disabled-color};
|
||||
--kt-input-disabled-border-color: #{$input-disabled-border-color};
|
||||
|
||||
--kt-input-color: #{$input-color};
|
||||
--kt-input-border-color: #{$input-border-color};
|
||||
|
||||
--kt-input-focus-bg: #{$input-focus-bg};
|
||||
--kt-input-focus-border-color: #{$input-focus-border-color};
|
||||
--kt-input-focus-color: #{$input-focus-color};
|
||||
|
||||
// Keenthemes solid input style
|
||||
--kt-input-solid-bg: #{$input-solid-bg};
|
||||
--kt-input-solid-bg-focus: #{$input-solid-bg-focus};
|
||||
--kt-input-solid-placeholder-color: #{$input-solid-placeholder-color};
|
||||
--kt-input-solid-color: #{$input-solid-color};
|
||||
|
||||
// Form checks
|
||||
--kt-form-check-label-color: #{$form-check-label-color};
|
||||
--kt-form-check-label-color-checked: #{$form-check-label-color-checked};
|
||||
--kt-form-check-input-active-filter: #{$form-check-input-active-filter};
|
||||
|
||||
--kt-form-check-input-bg: #{$form-check-input-bg};
|
||||
--kt-form-check-input-bg-solid: #{$form-check-input-bg-solid};
|
||||
--kt-form-check-input-border: #{$form-check-input-border};
|
||||
--kt-form-check-input-focus-border: #{$form-check-input-focus-border};
|
||||
--kt-form-check-input-focus-box-shadow: #{$form-check-input-focus-box-shadow};
|
||||
|
||||
--kt-form-check-input-checked-color: #{$form-check-input-checked-color};
|
||||
--kt-form-check-input-checked-bg-color: #{$form-check-input-checked-bg-color};
|
||||
--kt-form-check-input-checked-bg-color-solid: #{$form-check-input-checked-bg-color-solid};
|
||||
--kt-form-check-input-checked-border-color: #{$form-check-input-checked-border-color};
|
||||
--kt-form-check-input-checked-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
|
||||
--kt-form-check-radio-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
|
||||
|
||||
--kt-form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color};
|
||||
--kt-form-check-input-indeterminate-bg-color: #{$form-check-input-indeterminate-bg-color};
|
||||
--kt-form-check-input-indeterminate-border-color: #{$form-check-input-indeterminate-border-color};
|
||||
--kt-form-check-input-indeterminate-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
|
||||
|
||||
--kt-form-check-input-disabled-opacity: #{$form-check-input-disabled-opacity};
|
||||
--kt-form-check-label-disabled-opacity: #{$form-check-label-disabled-opacity};
|
||||
--kt-form-check-btn-check-disabled-opacity: #{$form-check-btn-check-disabled-opacity};
|
||||
|
||||
--kt-form-switch-color: #{$form-switch-color};
|
||||
--kt-form-switch-color-solid: #{$form-switch-color-solid};
|
||||
--kt-form-switch-bg-image: #{escape-svg($form-switch-bg-image)};
|
||||
--kt-form-switch-bg-image-solid: #{escape-svg($form-switch-bg-image-solid)};
|
||||
--kt-form-switch-focus-color: #{$form-switch-focus-color};
|
||||
--kt-form-switch-focus-bg-image: #{escape-svg($form-switch-focus-bg-image)};
|
||||
--kt-form-switch-checked-color: #{$form-switch-checked-color};
|
||||
--kt-form-switch-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)};
|
||||
|
||||
// Input groups
|
||||
--kt-input-group-addon-color: #{$input-group-addon-color};
|
||||
--kt-input-group-addon-bg: #{$input-group-addon-bg};
|
||||
--kt-input-group-addon-border-color: #{$input-group-addon-border-color};
|
||||
|
||||
// Form select
|
||||
--kt-form-select-color: #{$form-select-color};
|
||||
--kt-form-select-bg: #{$form-select-bg};
|
||||
--kt-form-select-disabled-color: #{$form-select-disabled-color};
|
||||
--kt-form-select-disabled-bg: #{$form-select-disabled-bg};
|
||||
--kt-form-select-disabled-border-color: #{$form-select-disabled-border-color};
|
||||
--kt-form-select-indicator-color: #{$form-select-indicator-color};
|
||||
--kt-form-select-indicator: #{escape-svg($form-select-indicator)};
|
||||
--kt-form-select-border-color: #{$form-select-border-color};
|
||||
--kt-form-select-box-shadow: #{$form-select-box-shadow};
|
||||
--kt-form-select-focus-border-color: #{$form-select-focus-border-color};
|
||||
--kt-form-select-focus-box-shadow: #{$form-select-focus-box-shadow};
|
||||
|
||||
// Form file button
|
||||
--kt-form-file-button-color: #{$form-file-button-color};
|
||||
--kt-form-file-button-bg: #{$form-file-button-bg};
|
||||
--kt-form-file-button-hover-bg: #{$form-file-button-hover-bg};
|
||||
|
||||
// Navs
|
||||
--kt-nav-tabs-border-color: #{$nav-tabs-border-color};
|
||||
--kt-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
|
||||
--kt-nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
|
||||
--kt-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
|
||||
--kt-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
|
||||
|
||||
--kt-nav-pills-link-active-color: #{$nav-pills-link-active-color};
|
||||
--kt-nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
|
||||
|
||||
// Dropdowns
|
||||
--kt-dropdown-color: #{$dropdown-color};
|
||||
--kt-dropdown-bg: #{$dropdown-bg};
|
||||
--kt-dropdown-divider-bg: #{$dropdown-divider-bg};
|
||||
--kt-dropdown-box-shadow: #{$dropdown-box-shadow};
|
||||
--kt-dropdown-link-color: #{$dropdown-link-color};
|
||||
--kt-dropdown-link-hover-color: #{$dropdown-link-hover-color};
|
||||
--kt-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
|
||||
--kt-dropdown-link-active-color: #{$dropdown-link-active-color};
|
||||
--kt-dropdown-link-active-bg: #{$dropdown-link-active-bg};
|
||||
--kt-dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
|
||||
--kt-dropdown-header-color: #{$dropdown-header-color};
|
||||
|
||||
// Pagination
|
||||
--kt-pagination-item-bg: #{$pagination-item-bg};
|
||||
--kt-pagination-color: #{$pagination-color};
|
||||
--kt-pagination-bg: #{$pagination-bg};
|
||||
--kt-pagination-border-color: #{$pagination-border-color};
|
||||
--kt-pagination-focus-color: #{$pagination-focus-color};
|
||||
--kt-pagination-focus-bg: #{$pagination-focus-bg};
|
||||
--kt-pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
|
||||
--kt-pagination-focus-outline: #{$pagination-focus-outline};
|
||||
--kt-pagination-hover-color: #{$pagination-hover-color};
|
||||
--kt-pagination-hover-bg: #{$pagination-hover-bg};
|
||||
--kt-pagination-hover-border-color: #{$pagination-hover-border-color};
|
||||
--kt-pagination-active-color: #{$pagination-active-color};
|
||||
--kt-pagination-active-bg: #{$pagination-active-bg};
|
||||
--kt-pagination-active-border-color: #{$pagination-active-border-color};
|
||||
--kt-pagination-disabled-color: #{$pagination-disabled-color};
|
||||
--kt-pagination-disabled-bg: #{$pagination-disabled-bg};
|
||||
|
||||
// Card
|
||||
--kt-card-color: #{$card-color-dark};
|
||||
--kt-card-bg: #{$card-bg};
|
||||
--kt-card-box-shadow: #{$card-box-shadow};
|
||||
--kt-card-border-color: #{$card-border-color};
|
||||
--kt-card-border-dashed-color: #{$card-border-dashed-color};
|
||||
--kt-card-cap-bg: #{$card-cap-bg};
|
||||
|
||||
// Accordion
|
||||
--kt-accordion-color: #{$accordion-color};
|
||||
--kt-accordion-bg: #{$accordion-bg};
|
||||
--kt-accordion-border-color: #{$accordion-border-color};
|
||||
--kt-accordion-button-bg: #{$accordion-button-bg};
|
||||
--kt-accordion-button-color: #{$accordion-button-color};
|
||||
--kt-accordion-button-active-bg: #{$accordion-button-active-bg};
|
||||
--kt-accordion-button-active-color: #{$accordion-button-active-color};
|
||||
--kt-accordion-button-focus-border-color: #{$accordion-button-focus-border-color};
|
||||
--kt-accordion-button-focus-box-shadow: #{$accordion-button-focus-box-shadow};
|
||||
|
||||
--kt-accordion-icon-color: #{$accordion-icon-color};
|
||||
--kt-accordion-icon-active-color: #{$accordion-icon-active-color};
|
||||
--kt-accordion-button-icon: #{escape-svg($accordion-button-icon)};
|
||||
--kt-accordion-button-active-icon: #{escape-svg($accordion-button-active-icon)};
|
||||
|
||||
// Tooltips
|
||||
--kt-tooltip-color: #{$tooltip-color};
|
||||
--kt-tooltip-bg: #{$tooltip-bg};
|
||||
--kt-tooltip-opacity: #{$tooltip-opacity};
|
||||
--kt-tooltip-box-shadow: #{$tooltip-box-shadow};
|
||||
|
||||
// Popovers
|
||||
--kt-popover-bg: #{$popover-bg};
|
||||
--kt-popover-border-color: #{$popover-border-color};
|
||||
--kt-popover-box-shadow: #{$popover-box-shadow};
|
||||
--kt-popover-header-bg: #{$popover-header-bg};
|
||||
--kt-popover-header-color: #{$popover-header-color};
|
||||
--kt-popover-header-border-color: #{$popover-header-border-color};
|
||||
--kt-popover-body-color: #{$popover-body-color};
|
||||
|
||||
// Dropdowns
|
||||
--kt-dropdown-box-shadow: #{$dropdown-box-shadow};
|
||||
--kt-dropdown-bg: #{$dropdown-bg};
|
||||
|
||||
// Toasts
|
||||
--kt-toast-color: #{$toast-color};
|
||||
--kt-toast-background-color: #{$toast-background-color};
|
||||
--kt-toast-box-shadow: #{$toast-box-shadow};
|
||||
--kt-toast-header-color: #{$toast-header-color};
|
||||
--kt-toast-header-background-color: #{$toast-header-background-color};
|
||||
--kt-toast-header-border-color: #{$toast-header-border-color};
|
||||
|
||||
// Badges
|
||||
--kt-badge-color: #{$badge-color};
|
||||
|
||||
// Modals
|
||||
--kt-modal-bg: #{$modal-content-bg};
|
||||
--kt-modal-color: #{$modal-content-color};
|
||||
--kt-modal-border-color: #{$modal-content-border-color};
|
||||
--kt-modal-box-shadow: #{$modal-content-box-shadow};
|
||||
--kt-modal-content-color: #{$modal-content-color};
|
||||
--kt-modal-content-bg: #{$modal-content-bg};
|
||||
--kt-modal-content-border-color: #{$modal-content-border-color};
|
||||
--kt-modal-content-box-shadow: #{$modal-content-box-shadow};
|
||||
--kt-modal-content-box-shadow-xs: #{$modal-content-box-shadow-xs};
|
||||
--kt-modal-content-box-shadow-sm-up: #{$modal-content-box-shadow-sm-up};
|
||||
--kt-modal-header-border-color: #{$modal-header-border-color};
|
||||
--kt-modal-footer-border-color: #{$modal-footer-border-color};
|
||||
--kt-modal-backdrop-bg: #{$modal-backdrop-bg};
|
||||
--kt-modal-backdrop-opacity: #{$modal-backdrop-opacity};
|
||||
|
||||
// Progress bars
|
||||
--kt-progress-bg: #{$progress-bg};
|
||||
--kt-progress-box-shadow: #{$progress-box-shadow};
|
||||
|
||||
// List group
|
||||
--kt-list-group-color: #{$list-group-color};
|
||||
--kt-list-group-bg: #{$list-group-bg};
|
||||
--kt-list-group-border-color: #{$list-group-border-color};
|
||||
--kt-list-group-hover-bg: #{$list-group-hover-bg};
|
||||
--kt-list-group-active-color: #{$list-group-active-color};
|
||||
--kt-list-group-active-bg: #{$list-group-active-bg};
|
||||
--kt-list-group-active-border-colorg: #{$list-group-active-border-color};
|
||||
--kt-list-group-disabled-color: #{$list-group-disabled-color};
|
||||
--kt-list-group-disabled-bg: #{$list-group-disabled-bg};
|
||||
--kt-list-group-action-colorg: #{$list-group-action-color};
|
||||
--kt-list-group-action-hover-color: #{$list-group-action-hover-color};
|
||||
--kt-list-group-action-active-color: #{$list-group-action-active-color};
|
||||
--kt-list-group-action-active-bg: #{$list-group-action-active-bg};
|
||||
|
||||
// Image thumbnails
|
||||
--kt-thumbnail-bg: #{$thumbnail-bg};
|
||||
--kt-thumbnail-border-color: #{$thumbnail-border-color};
|
||||
--kt-thumbnail-box-shadow: #{$thumbnail-box-shadow};
|
||||
|
||||
// Figures
|
||||
--kt-figure-caption-color: #{$figure-caption-color};
|
||||
|
||||
// Breadcrumbs
|
||||
--kt-breadcrumb-bg: #{$breadcrumb-bg};
|
||||
--kt-breadcrumb-divider-color: #{$breadcrumb-divider-color};
|
||||
--kt-breadcrumb-active-color: #{$breadcrumb-active-color};
|
||||
|
||||
// Carousel
|
||||
--kt-carousel-custom-indicator-default-bg-color: #{$carousel-custom-indicator-default-bg-color};
|
||||
--kt-carousel-custom-indicator-active-bg-color: #{$carousel-custom-indicator-active-bg-color};
|
||||
--kt-carousel-custom-bullet-indicator-default-bg-color: #{$carousel-custom-bullet-indicator-default-bg-color};
|
||||
--kt-carousel-custom-bullet-indicator-active-bg-color: #{$carousel-custom-bullet-indicator-active-bg-color};
|
||||
|
||||
// Code
|
||||
--kt-code-bg: #{$code-bg};
|
||||
--kt-code-box-shadow: #{$code-box-shadow};
|
||||
--kt-code-color: #{$code-color};
|
||||
|
||||
// Close
|
||||
--kt-btn-close-color: #{$btn-close-color};
|
||||
--kt-btn-close-bg: #{escape-svg($btn-close-bg)};
|
||||
|
||||
// Offcanvas
|
||||
--kt-offcanvas-border-color: #{$offcanvas-border-color};
|
||||
--kt-offcanvas-bg-color: #{$offcanvas-bg-color};
|
||||
--kt-offcanvas-color: #{$offcanvas-color};
|
||||
--kt-offcanvas-box-shadow: #{$offcanvas-box-shadow};
|
||||
--kt-offcanvas-backdrop-bg: #{$offcanvas-backdrop-bg};
|
||||
--kt-offcanvas-backdrop-opacity: #{$offcanvas-backdrop-opacity};
|
||||
|
||||
// Symbol
|
||||
--kt-symbol-label-color: #{$symbol-label-color};
|
||||
--kt-symbol-label-bg: #{$symbol-label-bg};
|
||||
--kt-symbol-border-color: #{$symbol-border-color};
|
||||
|
||||
// Bullet
|
||||
--kt-bullet-bg-color: #{$bullet-bg-color};
|
||||
|
||||
// Scrolltop
|
||||
--kt-scrolltop-opacity: #{$scrolltop-opacity};
|
||||
--kt-scrolltop-opacity-on: #{$scrolltop-opacity-on};
|
||||
--kt-scrolltop-opacity-hover: #{$scrolltop-opacity-hover};
|
||||
--kt-scrolltop-box-shadow: #{$scrolltop-box-shadow};
|
||||
--kt-scrolltop-bg-color: #{$scrolltop-bg-color};
|
||||
--kt-scrolltop-bg-color-hover: #{$scrolltop-bg-color-hover};
|
||||
--kt-scrolltop-icon-color: #{$scrolltop-icon-color};
|
||||
--kt-scrolltop-icon-color-hover: #{$scrolltop-icon-color-hover};
|
||||
|
||||
// Keenthemes drawer component
|
||||
--kt-drawer-box-shadow: #{$drawer-box-shadow};
|
||||
--kt-drawer-bg-color: #{$drawer-bg-color};
|
||||
--kt-drawer-overlay-bg-color: #{$drawer-overlay-bg-color};
|
||||
|
||||
// Keenthemes menu component
|
||||
--kt-menu-dropdown-box-shadow: #{$menu-dropdown-box-shadow};
|
||||
--kt-menu-dropdown-bg-color: #{$menu-dropdown-bg-color};
|
||||
--kt-menu-heading-color: #{$menu-heading-color};
|
||||
--kt-menu-link-color-hover: #{$menu-link-color-hover};
|
||||
--kt-menu-link-color-show: #{$menu-link-color-show};
|
||||
--kt-menu-link-color-here: #{$menu-link-color-here};
|
||||
--kt-menu-link-color-active: #{$menu-link-color-active};
|
||||
--kt-menu-link-bg-color-hover: #{$menu-link-bg-color-hover};
|
||||
--kt-menu-link-bg-color-show: #{$menu-link-bg-color-show};
|
||||
--kt-menu-link-bg-color-here: #{$menu-link-bg-color-here};
|
||||
--kt-menu-link-bg-color-active: #{$menu-link-bg-color-active};
|
||||
|
||||
// Keenthemes feedback component
|
||||
--kt-feedback-popup-box-shadow: #{$feedback-popup-box-shadow};
|
||||
--kt-feedback-popup-background-color: #{$feedback-popup-background-color};
|
||||
|
||||
// Keenthemes scrollbar component
|
||||
--kt-scrollbar-color: #{$scrollbar-color};
|
||||
--kt-scrollbar-hover-color: #{$scrollbar-hover-color};
|
||||
--kt-scrollbar-width: #{$scrollbar-width};
|
||||
--kt-scrollbar-height: #{$scrollbar-height};
|
||||
--kt-scrollbar-space: #{$scrollbar-space};
|
||||
|
||||
// Keenthemes overlay component
|
||||
--kt-overlay-bg: #{$overlay-bg};
|
||||
|
||||
// Keenthemes blockui component
|
||||
--kt-blockui-overlay-bg: #{$blockui-overlay-bg};
|
||||
|
||||
// Keenthemes rating component
|
||||
--kt-rating-color-default: #{$rating-color-default};
|
||||
--kt-rating-color-active: #{$rating-color-active};
|
||||
|
||||
// Keenthemes ribbon component
|
||||
--kt-ribbon-label-box-shadow: #{$ribbon-label-box-shadow};
|
||||
--kt-ribbon-label-bg: #{$ribbon-label-bg};
|
||||
--kt-ribbon-label-border-color: #{$ribbon-label-border-color};
|
||||
--kt-ribbon-clip-bg: #{$ribbon-clip-bg};
|
||||
|
||||
// Engage panel
|
||||
--kt-engage-btn-bg: #{$engage-btn-bg};
|
||||
--kt-engage-btn-color: #{$engage-btn-color};
|
||||
--kt-engage-btn-color-active: #{$engage-btn-color-active};
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
// Bootstrap muted color
|
||||
--kt-text-muted: #{$text-muted-dark};
|
||||
|
||||
// Grey colors
|
||||
@each $name, $value in $grays-dark {
|
||||
--kt-gray-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
// Grey rgba colors
|
||||
@each $name, $value in $grays-dark {
|
||||
--kt-gray-#{$name}-rgb: #{to-rgb($value)};
|
||||
}
|
||||
|
||||
// Contextual colors
|
||||
@each $name, $value in $theme-colors-dark {
|
||||
--kt-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
// Contextual active state colors
|
||||
@each $name, $value in $theme-active-colors-dark {
|
||||
--kt-#{$name}-active: #{$value};
|
||||
}
|
||||
|
||||
// Contextual light state colors
|
||||
@each $name, $value in $theme-light-colors-dark {
|
||||
--kt-#{$name}-light: #{$value};
|
||||
}
|
||||
|
||||
// Contextual inverse state colors
|
||||
@each $name, $value in $theme-inverse-colors-dark {
|
||||
--kt-#{$name}-inverse: #{$value};
|
||||
}
|
||||
|
||||
// Contextual rbg colors
|
||||
@each $name, $value in $theme-colors-dark {
|
||||
--kt-#{$name}-rgb: #{to-rgb($value)};
|
||||
}
|
||||
|
||||
// Text colors
|
||||
@each $name, $value in $theme-text-colors-dark {
|
||||
--kt-text-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
// Body
|
||||
--kt-body-bg: #{$body-bg-dark};
|
||||
--kt-body-bg-rgb: #{to-rgb($body-bg-dark)};
|
||||
--kt-body-color: #{$body-color-dark};
|
||||
|
||||
// Links
|
||||
--kt-link-color: #{$link-color-dark};
|
||||
--kt-link-hover-color: #{$link-hover-color-dark};
|
||||
|
||||
// Components
|
||||
--kt-border-color: #{$border-color-dark};
|
||||
--kt-border-dashed-color: #{$border-dashed-color-dark};
|
||||
|
||||
--kt-component-active-color: #{$component-active-color-dark};
|
||||
--kt-component-active-bg: #{$component-active-bg-dark};
|
||||
--kt-component-hover-color: #{$component-hover-color-dark};
|
||||
--kt-component-hover-bg: #{$component-hover-bg-dark};
|
||||
--kt-component-checked-color: #{$component-checked-color-dark};
|
||||
--kt-component-checked-bg: #{$component-checked-bg-dark};
|
||||
|
||||
// Box shadow
|
||||
--kt-box-shadow-xs: #{$box-shadow-xs-dark};
|
||||
--kt-box-shadow-sm: #{$box-shadow-sm-dark};
|
||||
--kt-box-shadow: #{$box-shadow-dark};
|
||||
--kt-box-shadow-lg: #{$box-shadow-lg-dark};
|
||||
|
||||
// Typography
|
||||
--kt-headings-color: #{$headings-color-dark};
|
||||
|
||||
// Tables
|
||||
--kt-table-color: #{$table-color-dark};
|
||||
--kt-table-bg: #{$table-bg-dark};
|
||||
--kt-table-striped-color: #{$table-striped-color-dark};
|
||||
--kt-table-striped-bg: #{$table-striped-bg-dark};
|
||||
--kt-table-accent-bg: #{$table-accent-bg-dark};
|
||||
--kt-table-active-color: #{$table-active-color-dark};
|
||||
--kt-table-active-bg: #{$table-active-bg-dark};
|
||||
--kt-table-hover-colorr: #{$table-hover-color-dark};
|
||||
--kt-table-hover-bg: #{$table-hover-bg-dark};
|
||||
--kt-table-border-color: #{$table-border-color-dark};
|
||||
--kt-table-caption-color: #{$table-caption-color-dark};
|
||||
|
||||
--kt-table-loading-message-box-shadow: #{$table-loading-message-box-shadow-dark};
|
||||
--kt-table-loading-message-bg: #{$table-loading-message-bg-dark};
|
||||
--kt-table-loading-message-color: #{$table-loading-message-color-dark};
|
||||
|
||||
// Buttons + Forms
|
||||
--kt-input-btn-focus-color: #{$input-btn-focus-color-dark};
|
||||
--kt-input-btn-focus-box-shadow: #{$input-btn-focus-box-shadow-dark};
|
||||
--kt-input-btn-focus-color-opacity: #{$input-btn-focus-color-opacity-dark};
|
||||
|
||||
--kt-input-color: #{$input-color-dark};
|
||||
--kt-input-placeholder-color: #{$input-placeholder-color-dark};
|
||||
--kt-input-plaintext-color: #{$input-plaintext-color-dark};
|
||||
|
||||
// Buttons
|
||||
--kt-btn-box-shadow: #{$btn-box-shadow-dark};
|
||||
--kt-btn-focus-box-shadow: #{$btn-focus-box-shadow-dark};
|
||||
--kt-btn-active-box-shadow: #{$btn-active-box-shadow-dark};
|
||||
--kt-btn-disabled-opacity: #{$btn-disabled-opacity-dark};
|
||||
|
||||
--kt-btn-link-color: #{$btn-link-color-dark};
|
||||
--kt-btn-link-hover-color: #{$btn-link-hover-color-dark};
|
||||
--kt-btn-link-disabled-color: #{$btn-link-disabled-color-dark};
|
||||
|
||||
// Forms
|
||||
--kt-form-label-color: #{$form-label-color-dark};
|
||||
--kt-form-text-color: #{$form-text-color-dark};
|
||||
|
||||
--kt-input-bg: #{$input-bg-dark};
|
||||
--kt-input-disabled-bg: #{$input-disabled-bg-dark};
|
||||
--kt-input-disabled-color: #{$input-disabled-color-dark};
|
||||
--kt-input-disabled-border-color: #{$input-disabled-border-color-dark};
|
||||
|
||||
--kt-input-color: #{$input-color-dark};
|
||||
--kt-input-border-color: #{$input-border-color-dark};
|
||||
|
||||
--kt-input-focus-bg: #{$input-focus-bg-dark};
|
||||
--kt-input-focus-border-color: #{$input-focus-border-color-dark};
|
||||
--kt-input-focus-color: #{$input-focus-color-dark};
|
||||
|
||||
// Keenthemes solid input style
|
||||
--kt-input-solid-bg: #{$input-solid-bg-dark};
|
||||
--kt-input-solid-bg-focus: #{$input-solid-bg-focus-dark};
|
||||
--kt-input-solid-placeholder-color: #{$input-solid-placeholder-color-dark};
|
||||
--kt-input-solid-color: #{$input-solid-color-dark};
|
||||
|
||||
// Form checks
|
||||
--kt-form-check-label-color: #{$form-check-label-color-dark};
|
||||
--kt-form-check-label-color-checked: #{$form-check-label-color-checked-dark};
|
||||
--kt-form-check-input-active-filter: #{$form-check-input-active-filter-dark};
|
||||
|
||||
--kt-form-check-input-bg: #{$form-check-input-bg-dark};
|
||||
--kt-form-check-input-bg-solid: #{$form-check-input-bg-solid-dark};
|
||||
--kt-form-check-input-border: #{$form-check-input-border-dark};
|
||||
--kt-form-check-input-focus-border: #{$form-check-input-focus-border-dark};
|
||||
--kt-form-check-input-focus-box-shadow: #{$form-check-input-focus-box-shadow-dark};
|
||||
|
||||
--kt-form-check-input-checked-color: #{$form-check-input-checked-color-dark};
|
||||
--kt-form-check-input-checked-bg-color: #{$form-check-input-checked-bg-color-dark};
|
||||
--kt-form-check-input-checked-border-color: #{$form-check-input-checked-border-color-dark};
|
||||
--kt-form-check-input-checked-bg-image: #{escape-svg($form-check-input-checked-bg-image-dark)};
|
||||
--kt-form-check-radio-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image-dark)};
|
||||
|
||||
--kt-form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color-dark};
|
||||
--kt-form-check-input-indeterminate-bg-color: #{$form-check-input-indeterminate-bg-color-dark};
|
||||
--kt-form-check-input-indeterminate-border-color: #{$form-check-input-indeterminate-border-color-dark};
|
||||
--kt-form-check-input-indeterminate-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image-dark)};
|
||||
|
||||
--kt-form-check-input-disabled-opacity: #{$form-check-input-disabled-opacity-dark};
|
||||
--kt-form-check-label-disabled-opacity: #{$form-check-label-disabled-opacity-dark};
|
||||
--kt-form-check-btn-check-disabled-opacity: #{$form-check-btn-check-disabled-opacity-dark};
|
||||
|
||||
--kt-form-switch-color: #{$form-switch-color-dark};
|
||||
--kt-form-switch-color-solid: #{$form-switch-color-solid-dark};
|
||||
--kt-form-switch-bg-image: #{escape-svg($form-switch-bg-image-dark)};
|
||||
--kt-form-switch-bg-image-solid: #{escape-svg($form-switch-bg-image-solid-dark)};
|
||||
--kt-form-switch-focus-color: #{$form-switch-focus-color-dark};
|
||||
--kt-form-switch-focus-bg-image: #{escape-svg($form-switch-focus-bg-image-dark)};
|
||||
--kt-form-switch-checked-color: #{$form-switch-checked-color-dark};
|
||||
--kt-form-switch-checked-bg-image: #{escape-svg($form-switch-checked-bg-image-dark)};
|
||||
|
||||
// Input groups
|
||||
--kt-input-group-addon-color: #{$input-group-addon-color-dark};
|
||||
--kt-input-group-addon-bg: #{$input-group-addon-bg-dark};
|
||||
--kt-input-group-addon-border-color: #{$input-group-addon-border-color-dark};
|
||||
|
||||
// Form select
|
||||
--kt-form-select-color: #{$form-select-color-dark};
|
||||
--kt-form-select-bg: #{$form-select-bg-dark};
|
||||
--kt-form-select-disabled-color: #{$form-select-disabled-color-dark};
|
||||
--kt-form-select-disabled-bg: #{$form-select-disabled-bg-dark};
|
||||
--kt-form-select-disabled-border-color: #{$form-select-disabled-border-color-dark};
|
||||
--kt-form-select-indicator-color: #{$form-select-indicator-color-dark};
|
||||
--kt-form-select-indicator: #{escape-svg($form-select-indicator-dark)};
|
||||
--kt-form-select-border-color: #{$form-select-border-color-dark};
|
||||
--kt-form-select-box-shadow: #{$form-select-box-shadow-dark};
|
||||
--kt-form-select-focus-border-color: #{$form-select-focus-border-color-dark};
|
||||
--kt-form-select-focus-box-shadow: #{$form-select-focus-box-shadow-dark};
|
||||
|
||||
// Form file button
|
||||
--kt-form-file-button-color: #{$form-file-button-color-dark};
|
||||
--kt-form-file-button-bg: #{$form-file-button-bg-dark};
|
||||
--kt-form-file-button-hover-bg: #{$form-file-button-hover-bg-dark};
|
||||
|
||||
// Navs
|
||||
--kt-nav-tabs-border-color: #{$nav-tabs-border-color-dark};
|
||||
--kt-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color-dark};
|
||||
--kt-nav-tabs-link-active-color: #{$nav-tabs-link-active-color-dark};
|
||||
--kt-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg-dark};
|
||||
--kt-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color-dark};
|
||||
|
||||
--kt-nav-pills-link-active-color: #{$nav-pills-link-active-color-dark};
|
||||
--kt-nav-pills-link-active-bg: #{$nav-pills-link-active-bg-dark};
|
||||
|
||||
// Dropdowns
|
||||
--kt-dropdown-color: #{$dropdown-color-dark};
|
||||
--kt-dropdown-bg: #{$dropdown-bg-dark};
|
||||
--kt-dropdown-divider-bg: #{$dropdown-divider-bg-dark};
|
||||
--kt-dropdown-box-shadow: #{$dropdown-box-shadow-dark};
|
||||
--kt-dropdown-link-color: #{$dropdown-link-color-dark};
|
||||
--kt-dropdown-link-hover-color: #{$dropdown-link-hover-color-dark};
|
||||
--kt-dropdown-link-hover-bg: #{$dropdown-link-hover-bg-dark};
|
||||
--kt-dropdown-link-active-color: #{$dropdown-link-active-color-dark};
|
||||
--kt-dropdown-link-active-bg: #{$dropdown-link-active-bg-dark};
|
||||
--kt-dropdown-link-disabled-color: #{$dropdown-link-disabled-color-dark};
|
||||
--kt-dropdown-header-color: #{$dropdown-header-color-dark};
|
||||
|
||||
// Pagination
|
||||
--kt-pagination-item-bg: #{$pagination-item-bg-dark};
|
||||
--kt-pagination-color: #{$pagination-color-dark};
|
||||
--kt-pagination-bg: #{$pagination-bg-dark};
|
||||
--kt-pagination-border-color: #{$pagination-border-color-dark};
|
||||
--kt-pagination-focus-color: #{$pagination-focus-color-dark};
|
||||
--kt-pagination-focus-bg: #{$pagination-focus-bg-dark};
|
||||
--kt-pagination-focus-box-shadow: #{$pagination-focus-box-shadow-dark};
|
||||
--kt-pagination-focus-outline: #{$pagination-focus-outline-dark};
|
||||
--kt-pagination-hover-color: #{$pagination-hover-color-dark};
|
||||
--kt-pagination-hover-bg: #{$pagination-hover-bg-dark};
|
||||
--kt-pagination-hover-border-color: #{$pagination-hover-border-color-dark};
|
||||
--kt-pagination-active-color: #{$pagination-active-color-dark};
|
||||
--kt-pagination-active-bg: #{$pagination-active-bg-dark};
|
||||
--kt-pagination-active-border-color: #{$pagination-active-border-color-dark};
|
||||
--kt-pagination-disabled-color: #{$pagination-disabled-color-dark};
|
||||
--kt-pagination-disabled-bg: #{$pagination-disabled-bg-dark};
|
||||
|
||||
// Card
|
||||
--kt-card-bg: #{$card-bg-dark};
|
||||
--kt-card-color: #{$card-color-dark};
|
||||
--kt-card-box-shadow: #{$card-box-shadow-dark};
|
||||
--kt-card-border-color: #{$card-border-color-dark};
|
||||
--kt-card-border-dashed-color: #{$card-border-dashed-color-dark};
|
||||
--kt-card-cap-bg: #{$card-cap-bg-dark};
|
||||
|
||||
// Accordion
|
||||
--kt-accordion-color: #{$accordion-color-dark};
|
||||
--kt-accordion-bg: #{$accordion-bg-dark};
|
||||
--kt-accordion-border-color: #{$accordion-border-color-dark};
|
||||
--kt-accordion-button-color: #{$accordion-button-color-dark};
|
||||
--kt-accordion-button-bg: #{$accordion-button-bg-dark};
|
||||
--kt-accordion-button-active-bg: #{$accordion-button-active-bg-dark};
|
||||
--kt-accordion-button-active-color: #{$accordion-button-active-color-dark};
|
||||
--kt-accordion-button-focus-border-color: #{$accordion-button-focus-border-color-dark};
|
||||
--kt-accordion-button-focus-box-shadow: #{$accordion-button-focus-box-shadow-dark};
|
||||
|
||||
--kt-accordion-icon-color: #{$accordion-icon-color-dark};
|
||||
--kt-accordion-icon-active-color: #{$accordion-icon-active-color-dark};
|
||||
--kt-accordion-button-icon: #{escape-svg($accordion-button-icon-dark)};
|
||||
--kt-accordion-button-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
|
||||
|
||||
// Tooltips
|
||||
--kt-tooltip-color: #{$tooltip-color-dark};
|
||||
--kt-tooltip-bg: #{$tooltip-bg-dark};
|
||||
--kt-tooltip-opacity: #{$tooltip-opacity-dark};
|
||||
--kt-tooltip-box-shadow: #{$tooltip-box-shadow-dark};
|
||||
|
||||
// Popovers
|
||||
--kt-popover-bg: #{$popover-bg-dark};
|
||||
--kt-popover-border-color: #{$popover-border-color-dark};
|
||||
--kt-popover-box-shadow: #{$popover-box-shadow-dark};
|
||||
--kt-popover-header-bg: #{$popover-header-bg-dark};
|
||||
--kt-popover-header-color: #{$popover-header-color-dark};
|
||||
--kt-popover-header-border-color: #{$popover-header-border-color-dark};
|
||||
--kt-popover-body-color: #{$popover-body-color-dark};
|
||||
|
||||
// Dropdowns
|
||||
--kt-dropdown-box-shadow: #{$dropdown-box-shadow-dark};
|
||||
--kt-dropdown-bg: #{$dropdown-bg-dark};
|
||||
|
||||
// Toasts
|
||||
--kt-toast-color: #{$toast-color-dark};
|
||||
--kt-toast-background-color: #{$toast-background-color-dark};
|
||||
--kt-toast-box-shadow: #{$toast-box-shadow-dark};
|
||||
--kt-toast-header-color: #{$toast-header-color-dark};
|
||||
--kt-toast-header-background-color: #{$toast-header-background-color-dark};
|
||||
--kt-toast-header-border-color: #{$toast-header-border-color-dark};
|
||||
|
||||
// Badges
|
||||
--kt-badge-color: #{$badge-color-dark};
|
||||
|
||||
// Modals
|
||||
--kt-modal-bg: #{$modal-content-bg-dark};
|
||||
--kt-modal-color: #{$modal-content-color-dark};
|
||||
--kt-modal-border-color: #{$modal-content-border-color-dark};
|
||||
--kt-modal-box-shadow: #{$modal-content-box-shadow-dark};
|
||||
--kt-modal-content-color: #{$modal-content-color-dark};
|
||||
--kt-modal-content-bg: #{$modal-content-bg-dark};
|
||||
--kt-modal-content-border-color: #{$modal-content-border-color-dark};
|
||||
--kt-modal-content-box-shadow: #{$modal-content-box-shadow-dark};
|
||||
--kt-modal-content-box-shadow-xs: #{$modal-content-box-shadow-xs-dark};
|
||||
--kt-modal-content-box-shadow-sm-up: #{$modal-content-box-shadow-sm-up-dark};
|
||||
--kt-modal-header-border-color: #{$modal-header-border-color-dark};
|
||||
--kt-modal-footer-border-color: #{$modal-footer-border-color-dark};
|
||||
--kt-modal-backdrop-bg: #{$modal-backdrop-bg-dark};
|
||||
--kt-modal-backdrop-opacity: #{$modal-backdrop-opacity-dark};
|
||||
|
||||
// Progress bars
|
||||
--kt-progress-bg: #{$progress-bg-dark};
|
||||
--kt-progress-box-shadow: #{$progress-box-shadow-dark};
|
||||
|
||||
// List group
|
||||
--kt-list-group-color: #{$list-group-color-dark};
|
||||
--kt-list-group-bg: #{$list-group-bg-dark};
|
||||
--kt-list-group-border-color: #{$list-group-border-color-dark};
|
||||
--kt-list-group-hover-bg: #{$list-group-hover-bg-dark};
|
||||
--kt-list-group-active-color: #{$list-group-active-color-dark};
|
||||
--kt-list-group-active-bg: #{$list-group-active-bg-dark};
|
||||
--kt-list-group-active-border-colorg: #{$list-group-active-border-color-dark};
|
||||
--kt-list-group-disabled-color: #{$list-group-disabled-color-dark};
|
||||
--kt-list-group-disabled-bg: #{$list-group-disabled-bg-dark};
|
||||
--kt-list-group-action-colorg: #{$list-group-action-color-dark};
|
||||
--kt-list-group-action-hover-color: #{$list-group-action-hover-color-dark};
|
||||
--kt-list-group-action-active-color: #{$list-group-action-active-color-dark};
|
||||
--kt-list-group-action-active-bg: #{$list-group-action-active-bg-dark};
|
||||
|
||||
// Image thumbnails
|
||||
--kt-thumbnail-bg: #{$thumbnail-bg-dark};
|
||||
--kt-thumbnail-border-color: #{$thumbnail-border-color-dark};
|
||||
--kt-thumbnail-box-shadow: #{$thumbnail-box-shadow-dark};
|
||||
|
||||
// Figures
|
||||
--kt-figure-caption-color: #{$figure-caption-color-dark};
|
||||
|
||||
// Breadcrumbs
|
||||
--kt-breadcrumb-bg: #{$breadcrumb-bg-dark};
|
||||
--kt-breadcrumb-divider-color: #{$breadcrumb-divider-color-dark};
|
||||
--kt-breadcrumb-active-color: #{$breadcrumb-active-color-dark};
|
||||
|
||||
// Carousel
|
||||
--kt-carousel-custom-indicator-default-bg-color: #{$carousel-custom-indicator-default-bg-color-dark};
|
||||
--kt-carousel-custom-indicator-active-bg-color: #{$carousel-custom-indicator-active-bg-color-dark};
|
||||
--kt-arousel-custom-bullet-indicator-default-bg-color: #{$carousel-custom-bullet-indicator-default-bg-color-dark};
|
||||
--kt-carousel-custom-bullet-indicator-active-bg-color: #{$carousel-custom-bullet-indicator-active-bg-color-dark};
|
||||
|
||||
// Close
|
||||
--kt-btn-close-color: #{$btn-close-color-dark};
|
||||
--kt-btn-close-bg: #{escape-svg($btn-close-bg-dark)};
|
||||
|
||||
// Offcanvas
|
||||
--kt-code-bg: #{$code-bg-dark};
|
||||
--kt-code-box-shadow: #{$code-box-shadow-dark};
|
||||
--kt-code-color: #{$code-color-dark};
|
||||
|
||||
// Offcanvas
|
||||
--kt-offcanvas-border-color: #{$offcanvas-border-color-dark};
|
||||
--kt-offcanvas-bg-color: #{$offcanvas-bg-color-dark};
|
||||
--kt-offcanvas-color: #{$offcanvas-color-dark};
|
||||
--kt-offcanvas-box-shadow: #{$offcanvas-box-shadow-dark};
|
||||
--kt-offcanvas-backdrop-bg: #{$offcanvas-backdrop-bg-dark};
|
||||
--kt-offcanvas-backdrop-opacity: #{$offcanvas-backdrop-opacity-dark};
|
||||
|
||||
// Code
|
||||
--kt-code-bg: #{$code-bg-dark};
|
||||
--kt-code-box-shadow: #{$code-box-shadow-dark};
|
||||
--kt-code-color: #{$code-color-dark};
|
||||
|
||||
// Symbol
|
||||
--kt-symbol-label-color: #{$symbol-label-color-dark};
|
||||
--kt-symbol-label-bg: #{$symbol-label-bg-dark};
|
||||
--kt-symbol-border-color: #{$symbol-border-color-dark};
|
||||
|
||||
// Bullet
|
||||
--kt-bullet-bg-color: #{$bullet-bg-color-dark};
|
||||
|
||||
// Scrolltop
|
||||
--kt-scrolltop-opacity: #{$scrolltop-opacity-dark};
|
||||
--kt-scrolltop-opacity-on: #{$scrolltop-opacity-on-dark};
|
||||
--kt-scrolltop-opacity-hover: #{$scrolltop-opacity-hover-dark};
|
||||
--kt-scrolltop-box-shadow: #{$scrolltop-box-shadow-dark};
|
||||
--kt-scrolltop-bg-color: #{$scrolltop-bg-color-dark};
|
||||
--kt-scrolltop-bg-color-hover: #{$scrolltop-bg-color-hover-dark};
|
||||
--kt-scrolltop-icon-color: #{$scrolltop-icon-color-dark};
|
||||
--kt-scrolltop-icon-color-hover: #{$scrolltop-icon-color-hover-dark};
|
||||
|
||||
// Keenthemes drawer component
|
||||
--kt-drawer-box-shadow: #{$drawer-box-shadow-dark};
|
||||
--kt-drawer-bg-color: #{$drawer-bg-color-dark};
|
||||
--kt-drawer-overlay-bg-color: #{$drawer-overlay-bg-color-dark};
|
||||
|
||||
// Keenthemes menu component
|
||||
--kt-menu-dropdown-box-shadow: #{$menu-dropdown-box-shadow-dark};
|
||||
--kt-menu-dropdown-bg-color: #{$menu-dropdown-bg-color-dark};
|
||||
--kt-menu-heading-color: #{$menu-heading-color-dark};
|
||||
|
||||
--kt-menu-link-color-hover: #{$menu-link-color-hover-dark};
|
||||
--kt-menu-link-color-show: #{$menu-link-color-show-dark};
|
||||
--kt-menu-link-color-here: #{$menu-link-color-here-dark};
|
||||
--kt-menu-link-color-active: #{$menu-link-color-active-dark};
|
||||
--kt-menu-link-bg-color-hover: #{$menu-link-bg-color-hover-dark};
|
||||
--kt-menu-link-bg-color-show: #{$menu-link-bg-color-show-dark};
|
||||
--kt-menu-link-bg-color-here: #{$menu-link-bg-color-here-dark};
|
||||
--kt-menu-link-bg-color-active: #{$menu-link-bg-color-active-dark};
|
||||
|
||||
|
||||
// Keenthemes feedback component
|
||||
--kt-feedback-popup-box-shadow: #{$feedback-popup-box-shadow-dark};
|
||||
--kt-feedback-popup-background-color: #{$feedback-popup-background-color-dark};
|
||||
|
||||
// Keenthemes scrollbar component
|
||||
--kt-scrollbar-color: #{$scrollbar-color-dark};
|
||||
--kt-scrollbar-hover-color: #{$scrollbar-hover-color-dark};
|
||||
|
||||
// Keenthemes overlay component
|
||||
--kt-overlay-bg: #{$overlay-bg-dark};
|
||||
|
||||
// Keenthemes blockui component
|
||||
--kt-blockui-overlay-bg: #{$blockui-overlay-bg-dark};
|
||||
|
||||
// Keenthemes rating component
|
||||
--kt-rating-color-default: #{$rating-color-default-dark};
|
||||
--kt-rating-color-active: #{$rating-color-active-dark};
|
||||
|
||||
// Keenthemes ribbon component
|
||||
--kt-ribbon-label-box-shadow: #{$ribbon-label-box-shadow-dark};
|
||||
--kt-ribbon-label-bg: #{$ribbon-label-bg-dark};
|
||||
--kt-ribbon-label-border-color: #{$ribbon-label-border-color-dark};
|
||||
--kt-ribbon-clip-bg: #{$ribbon-clip-bg-dark};
|
||||
|
||||
// Engage panel
|
||||
--kt-engage-btn-bg: #{$engage-btn-bg-dark};
|
||||
--kt-engage-btn-color: #{$engage-btn-color-dark};
|
||||
--kt-engage-btn-color-active: #{$engage-btn-color-active-dark};
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
//
|
||||
// Rotate
|
||||
//
|
||||
|
||||
|
||||
$rotate-transition: transform 0.3s ease;
|
||||
|
||||
.rotate {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@each $value in (90, 180, 270) {
|
||||
.rotate-#{$value} {
|
||||
transition: $rotate-transition;
|
||||
backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
|
||||
.collapsible:not(.collapsed)> & ,
|
||||
.show > &,
|
||||
.active > & {
|
||||
transform: rotateZ(#{$value}deg);
|
||||
transition: $rotate-transition;
|
||||
|
||||
[direction="rtl"] & {
|
||||
transform: rotateZ(-#{$value}deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rotate-n#{$value} {
|
||||
transition: $rotate-transition;
|
||||
backface-visibility: hidden;
|
||||
will-change: transform;
|
||||
|
||||
.collapsible:not(.collapsed)> &,
|
||||
.show > &,
|
||||
.active > & {
|
||||
transform: rotateZ(-#{$value}deg);
|
||||
transition: $rotate-transition;
|
||||
|
||||
[direction="rtl"] & {
|
||||
transform: rotateZ(#{$value}deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
//
|
||||
// Scroll
|
||||
//
|
||||
|
||||
|
||||
// Customize native scrollbars only for desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
main,
|
||||
span,
|
||||
ol,
|
||||
ul,
|
||||
pre,
|
||||
div {
|
||||
// Firefox
|
||||
scrollbar-width: thin;
|
||||
|
||||
// Webkit
|
||||
&::-webkit-scrollbar {
|
||||
width: var(--kt-scrollbar-width);
|
||||
height: var(--kt-scrollbar-height);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@include border-radius($scrollbar-border-radius);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@include border-radius($scrollbar-border-radius);
|
||||
}
|
||||
|
||||
// Default color
|
||||
@include scrollbar-color(var(--kt-scrollbar-color), var(--kt-scrollbar-hover-color));
|
||||
}
|
||||
}
|
||||
|
||||
// Overflow scroll
|
||||
.scroll {
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-x {
|
||||
overflow-x: scroll;
|
||||
position: relative;
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-y {
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover overflow scroll
|
||||
.hover-scroll {
|
||||
position: relative;
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow: hidden;
|
||||
|
||||
border-right: var(--kt-scrollbar-width) solid transparent;
|
||||
border-bottom: var(--kt-scrollbar-height) transparent;
|
||||
margin-right: calc( -1 * var(--kt-scrollbar-width));
|
||||
margin-bottom: calc( -1 * var(--kt-scrollbar-height));
|
||||
|
||||
&:hover {
|
||||
overflow: scroll;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// Firefox hack
|
||||
@-moz-document url-prefix() {
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover overflow scroll y
|
||||
.hover-scroll-y {
|
||||
position: relative;
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow-y: hidden;
|
||||
border-right: var(--kt-scrollbar-width) solid transparent;
|
||||
margin-right: calc( -1 * var(--kt-scrollbar-width));
|
||||
|
||||
&:hover {
|
||||
overflow-y: scroll;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
// Firefox hack
|
||||
@-moz-document url-prefix() {
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover overflow scroll x
|
||||
.hover-scroll-x {
|
||||
position: relative;
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow-x: hidden;
|
||||
border-bottom: var(--kt-scrollbar-height) solid transparent;
|
||||
|
||||
&:hover {
|
||||
overflow-x: scroll;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// Firefox hack
|
||||
@-moz-document url-prefix() {
|
||||
overflow-x: scroll;
|
||||
position: relative;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover overflow overlay
|
||||
.hover-scroll-overlay {
|
||||
position: relative;
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow: hidden;
|
||||
|
||||
// Webkit
|
||||
&::-webkit-scrollbar {
|
||||
width: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-width) );
|
||||
height: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-width) );
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 0;
|
||||
background-clip: content-box;
|
||||
border-right: var(--kt-scrollbar-space) solid transparent;
|
||||
border-bottom: var(--kt-scrollbar-space) solid transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow: overlay;
|
||||
}
|
||||
|
||||
// Firefox hack
|
||||
@-moz-document url-prefix() {
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover overflow overlay y
|
||||
.hover-scroll-overlay-y {
|
||||
position: relative;
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow-y: hidden;
|
||||
|
||||
// Webkit
|
||||
&::-webkit-scrollbar {
|
||||
width: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-space));
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 0;
|
||||
background-clip: content-box;
|
||||
border-right: var(--kt-scrollbar-space) solid transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow-y: overlay;
|
||||
}
|
||||
|
||||
// Firefox hack
|
||||
@-moz-document url-prefix() {
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover overflow overlay x
|
||||
.hover-scroll-overlay-x {
|
||||
position: relative;
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow-x: hidden;
|
||||
|
||||
// Webkit
|
||||
&::-webkit-scrollbar {
|
||||
height: calc( var(--kt-scrollbar-width) + var(--kt-scrollbar-space) );
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 0;
|
||||
background-clip: content-box;
|
||||
border-bottom: var(--kt-scrollbar-space) solid transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow-x: overlay;
|
||||
}
|
||||
|
||||
// Firefox hack
|
||||
@-moz-document url-prefix() {
|
||||
overflow-x: scroll;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
.scroll-ps {
|
||||
padding-left: var(--kt-scrollbar-width) !important;
|
||||
}
|
||||
|
||||
.scroll-ms {
|
||||
margin-left: var(--kt-scrollbar-width) !important;
|
||||
}
|
||||
|
||||
.scroll-mb {
|
||||
margin-bottom: var(--kt-scrollbar-height) !important;
|
||||
}
|
||||
|
||||
.scroll-pe {
|
||||
padding-right: var(--kt-scrollbar-width) !important;
|
||||
}
|
||||
|
||||
.scroll-me {
|
||||
margin-right: var(--kt-scrollbar-width) !important;
|
||||
}
|
||||
|
||||
.scroll-px {
|
||||
padding-left: var(--kt-scrollbar-width) !important;
|
||||
padding-right: var(--kt-scrollbar-width) !important;
|
||||
}
|
||||
|
||||
.scroll-mx {
|
||||
margin-left: var(--kt-scrollbar-width) !important;
|
||||
margin-right: var(--kt-scrollbar-width) !important;
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
//
|
||||
// Scrolltop
|
||||
//
|
||||
|
||||
.scrolltop {
|
||||
position: fixed;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
z-index: $scrolltop-z-index;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: $scrolltop-size;
|
||||
height: $scrolltop-size;
|
||||
bottom: $scrolltop-bottom;
|
||||
right: $scrolltop-end;
|
||||
background-color: var(--kt-scrolltop-bg-color);
|
||||
box-shadow: var(--kt-scrolltop-box-shadow);
|
||||
opacity: $scrolltop-opacity;
|
||||
transition: $transition-link;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
.svg-icon {
|
||||
@include svg-icon-size(24px);
|
||||
color: var(--kt-scrolltop-icon-color);
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 1.3rem;
|
||||
color: var(--kt-scrolltop-icon-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--kt-scrolltop-bg-color-hover);
|
||||
|
||||
.svg-icon,
|
||||
i {
|
||||
color: var(--kt-scrolltop-icon-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
[data-kt-scrolltop="on"] & {
|
||||
opacity: var(--kt-scrolltop-opacity-on);
|
||||
animation: animation-scrolltop .4s ease-out 1;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
transition: $transition-link;
|
||||
opacity: var(--kt-scrolltop-opacity-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Tablet & Mobile Modess
|
||||
@include media-breakpoint-down(lg) {
|
||||
.scrolltop {
|
||||
bottom: $scrolltop-bottom-mobile;
|
||||
right: $scrolltop-end-mobile;
|
||||
width: $scrolltop-size-mobile;
|
||||
height: $scrolltop-size-mobile;
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes animation-scrolltop {
|
||||
from { margin-bottom: -15px; }
|
||||
to { margin-bottom: 0; }
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
//
|
||||
// Separator
|
||||
//
|
||||
|
||||
.separator {
|
||||
display: block;
|
||||
height: 0;
|
||||
border-bottom: 1px solid var(--kt-border-color);
|
||||
|
||||
&.separator-dotted {
|
||||
border-bottom-style: dotted;
|
||||
border-bottom-color: var(--kt-border-dashed-color);
|
||||
}
|
||||
|
||||
&.separator-dashed {
|
||||
border-bottom-style: dashed;
|
||||
border-bottom-color: var(--kt-border-dashed-color);
|
||||
}
|
||||
|
||||
&.separator-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 0;
|
||||
text-align: center;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: " ";
|
||||
width: 50%;
|
||||
border-bottom: 1px solid var(--kt-border-color);
|
||||
}
|
||||
|
||||
&::before{
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
&::after{
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
&.separator-dotted {
|
||||
&::before,
|
||||
&::after {
|
||||
border-bottom-style: dotted;
|
||||
border-bottom-color: var(--kt-border-dashed-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.separator-dashed {
|
||||
&::before,
|
||||
&::after {
|
||||
border-bottom-style: dashed;
|
||||
border-bottom-color: var(--kt-border-dashed-color);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.border-#{$color}{
|
||||
&::before,
|
||||
&::after {
|
||||
border-color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
//
|
||||
// Shape
|
||||
//
|
||||
|
||||
.xehagon {
|
||||
//$edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20
|
||||
@include shape(6);
|
||||
}
|
||||
|
||||
.octagon {
|
||||
//$edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20
|
||||
@include shape(8);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// Stepper
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "stepper/base";
|
||||
@import "stepper/pills";
|
||||
@import "stepper/links";
|
||||
@@ -0,0 +1,30 @@
|
||||
//
|
||||
// SVG Icon
|
||||
//
|
||||
|
||||
.svg-icon {
|
||||
line-height: 1;
|
||||
color: var(--kt-text-muted);
|
||||
@include svg-icon-size(get($font-sizes, 5));
|
||||
|
||||
// Theme colors
|
||||
@each $name, $color in $theme-text-colors {
|
||||
&.svg-icon-#{$name} {
|
||||
color: var(--kt-text-#{$name});
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive icon sizes
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Sizes
|
||||
@each $name, $value in $font-sizes {
|
||||
&.svg-icon#{$infix}-#{$name} {
|
||||
@include svg-icon-size($value, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
//
|
||||
// symbol
|
||||
//
|
||||
|
||||
// Base
|
||||
.symbol {
|
||||
display: inline-block;;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Label
|
||||
.symbol-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
color: var(--kt-symbol-label-color);
|
||||
background-color: var(--kt-symbol-label-bg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&:after {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Badge
|
||||
.symbol-badge {
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) !important;
|
||||
}
|
||||
|
||||
// Image
|
||||
> img {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Square
|
||||
&.symbol-square {
|
||||
&,
|
||||
> img,
|
||||
.symbol-label {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Circle
|
||||
&.symbol-circle {
|
||||
&,
|
||||
> img,
|
||||
.symbol-label {
|
||||
border-radius: 50%;
|
||||
|
||||
&:after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
@include symbol-size(get($symbol-sizes, default));
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $name, $value in $symbol-sizes {
|
||||
@if ($name != 'default') {
|
||||
&.symbol#{$infix}-#{$name} {
|
||||
@include symbol-size($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Group
|
||||
.symbol-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
|
||||
.symbol {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
margin-left: -10px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.symbol-badge {
|
||||
border: 2px solid var(--kt-body-bg);
|
||||
}
|
||||
|
||||
.symbol-label {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: " ";
|
||||
border-radius: inherit;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border: 2px solid var(--kt-symbol-border-color);
|
||||
-webkit-background-clip: padding-box; /* for Safari */
|
||||
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
|
||||
}
|
||||
}
|
||||
|
||||
&.symbol-hover {
|
||||
.symbol {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
//
|
||||
// Table
|
||||
//
|
||||
|
||||
// Table
|
||||
.table {
|
||||
--#{$prefix}table-color: var(--kt-table-color);
|
||||
--#{$prefix}table-bg: var(--kt-table-bg);
|
||||
--#{$prefix}table-border-color: var(--kt-table-border-color);
|
||||
--#{$prefix}table-accent-bg: var(--kt-table-accent-bg);
|
||||
--#{$prefix}table-striped-color: var(--kt-table-striped-color);
|
||||
--#{$prefix}table-striped-bg: var(--kt-table-striped-bg);
|
||||
--#{$prefix}table-active-color: var(--kt-table-active-color);
|
||||
--#{$prefix}table-active-bg: var(--kt-table-active-bg);
|
||||
--#{$prefix}table-hover-color: var(--kt-table-hover-color);
|
||||
--#{$prefix}table-hover-bg: var(--kt-table-hover-bg);
|
||||
|
||||
// Fix for BS 5.1.2 update
|
||||
& > :not(:first-child) {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
>:not(:last-child)>:last-child>* {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
|
||||
tr, th, td {
|
||||
border-color: inherit;
|
||||
border-width: inherit;
|
||||
border-style: inherit;
|
||||
text-transform: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
height: inherit;
|
||||
min-height: inherit;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot,
|
||||
tbody {
|
||||
tr:last-child {
|
||||
border-bottom: 0 !important;
|
||||
|
||||
th, td {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
th, td {
|
||||
border-top: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded
|
||||
&.table-rounded {
|
||||
border-radius: $border-radius;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
// Flush
|
||||
&.table-flush {
|
||||
tr, th, td {
|
||||
padding: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Row bordered
|
||||
&.table-row-bordered {
|
||||
tr {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: var(--kt-border-color);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
th, td {
|
||||
border-top-width: 1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Row dashed
|
||||
&.table-row-dashed {
|
||||
tr {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: dashed;
|
||||
border-bottom-color: var(--kt-border-color);
|
||||
}
|
||||
|
||||
tfoot {
|
||||
th, td {
|
||||
border-top-width: 1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Row border colors
|
||||
@each $name, $value in $grays {
|
||||
&.table-row-gray-#{$name} {
|
||||
tr {
|
||||
border-bottom-color: var(--kt-gray-#{$name});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Layout fixed
|
||||
.table-layout-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
// Sorting
|
||||
.table-sort {
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-sort,
|
||||
.table-sort-asc,
|
||||
.table-sort-desc {
|
||||
vertical-align: middle;
|
||||
|
||||
&:after {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
content: " ";
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
left: auto;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.table-sort-asc {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
@include svg-bg-icon(arrow-top, var(--kt-text-muted));
|
||||
}
|
||||
}
|
||||
|
||||
.table-sort-desc {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
@include svg-bg-icon(arrow-bottom, var(--kt-text-muted));
|
||||
}
|
||||
}
|
||||
|
||||
// Loading
|
||||
.table-loading-message {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include border-radius($border-radius);
|
||||
box-shadow: var(--kt-table-loading-message-box-shadow);
|
||||
background-color: var(--kt-table-loading-message-bg);
|
||||
color: var(--kt-table-loading-message-color);
|
||||
font-weight: $font-weight-bold;
|
||||
margin: 0 !important;
|
||||
width: auto;
|
||||
padding: 0.85rem 2rem !important;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.table-loading {
|
||||
position: relative;
|
||||
|
||||
.table-loading-message {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Cell gutters
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $name, $value in $gutters {
|
||||
.table.g#{$infix}-#{$name} {
|
||||
th, td {
|
||||
padding: $value;
|
||||
|
||||
// Datatables responsive mode fix
|
||||
&.dtr-control {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table.gy#{$infix}-#{$name} {
|
||||
th, td {
|
||||
padding-top: $value;
|
||||
padding-bottom: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.table.gx#{$infix}-#{$name} {
|
||||
th, td {
|
||||
padding-left: $value;
|
||||
padding-right: $value;
|
||||
|
||||
// Datatables responsive mode fix
|
||||
&.dtr-control {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table.gs#{$infix}-#{$name} {
|
||||
th, td {
|
||||
&:first-child {
|
||||
padding-left: $value;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $value;
|
||||
}
|
||||
|
||||
// Datatables responsive mode fix
|
||||
&.dtr-control:first-child {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
//
|
||||
// Theme Modes
|
||||
//
|
||||
|
||||
// Used for theme mode switching via JS
|
||||
[data-kt-theme-mode-switching="true"] * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
// Light mode
|
||||
@include theme-light() {
|
||||
.theme-dark-show {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.theme-light-bg-transparent {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.theme-light-bg-body {
|
||||
background-color: var(--kt-body-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode
|
||||
@include theme-dark() {
|
||||
.theme-light-show {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.theme-dark-bg-transparent {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.theme-dark-bg-body {
|
||||
background-color: var(--kt-body-bg) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
//
|
||||
// Timeline Label
|
||||
//
|
||||
|
||||
|
||||
.timeline-label {
|
||||
position: relative;
|
||||
|
||||
$label-width: 50px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: $label-width + 1px;
|
||||
width: 3px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--kt-gray-200);
|
||||
}
|
||||
|
||||
//
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
margin-bottom: 1.7rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-label {
|
||||
width: $label-width;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
color: var(--kt-gray-800);
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
flex-shrink: 0;
|
||||
background-color: var(--kt-body-bg);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin-top: 1px;
|
||||
margin-left: -0.5rem;
|
||||
padding: 3px !important;
|
||||
border: 6px solid var(--kt-body-bg) !important;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: var(--kt-gray-200);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
//
|
||||
// Timeline
|
||||
//
|
||||
|
||||
// Base
|
||||
.timeline {
|
||||
// Item
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&:last-child {
|
||||
.timeline-line {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Line
|
||||
.timeline-line {
|
||||
display: block;
|
||||
content: " ";
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
top:0;
|
||||
bottom: 0;
|
||||
transform: translate(50%);
|
||||
border-left-width: 1px;
|
||||
border-left-style: dashed;
|
||||
border-left-color: var(--kt-gray-300);
|
||||
}
|
||||
|
||||
// Icon
|
||||
.timeline-icon {
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
// Content
|
||||
.timeline-content {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
// Vertical center
|
||||
&.timeline-center {
|
||||
.timeline-item {
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
.timeline-line {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.timeline-line {
|
||||
bottom: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.toast {
|
||||
--#{$prefix}toast-color: var(--kt-toast-color);
|
||||
--#{$prefix}toast-bg: var(--kt-toast-background-color);
|
||||
--#{$prefix}toast-border-color: var(--kt-toast-border-color);
|
||||
--#{$prefix}toast-box-shadow: var(--kt-toast-box-shadow);
|
||||
--#{$prefix}toast-header-color: var(--kt-toast-header-color);
|
||||
--#{$prefix}toast-header-bg: var(--kt-toast-header-background-color);
|
||||
--#{$prefix}toast-header-border-color: var(--kt-toast-header-border-color);
|
||||
|
||||
.toast-header {
|
||||
.btn-close {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
//
|
||||
// Toggle
|
||||
//
|
||||
|
||||
.toggle {
|
||||
&.collapsible:not(.collapsed), // Integration with Bootstrap Collapse
|
||||
&.active {
|
||||
.toggle-off {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsible.collapsed, // Integration with Bootstrap Collapse
|
||||
&:not(.collapsible):not(.active) {
|
||||
.toggle-on {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
//
|
||||
// Tooltip
|
||||
//
|
||||
|
||||
|
||||
// Base
|
||||
.tooltip {
|
||||
--#{$prefix}tooltip-color: var(--kt-tooltip-color);
|
||||
--#{$prefix}tooltip-bg: var(--kt-tooltip-bg);
|
||||
--#{$prefix}tooltip-opacity: var(--kt-tooltip-opacity);
|
||||
|
||||
.tooltip-inner {
|
||||
box-shadow: var(--kt-tooltip-box-shadow);
|
||||
}
|
||||
|
||||
&.tooltop-auto-width {
|
||||
.tooltip-inner {
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Inverse
|
||||
&.tooltip-inverse {
|
||||
@include tooltip-theme(
|
||||
$bg-color: var(--kt-dark),
|
||||
$color: var(--kt-dark-inverse),
|
||||
$arrow-color: var(--kt-dark),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
|
||||
|
||||
.blockquote-footer {
|
||||
color: var(--kt-blockquote-footer-color);
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
//
|
||||
// Custom utilities
|
||||
//
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"position": (
|
||||
property: position,
|
||||
responsive: true,
|
||||
values: static relative absolute fixed sticky
|
||||
),
|
||||
"opacity": (
|
||||
property: opacity,
|
||||
class: opacity,
|
||||
values: $opacity-values
|
||||
),
|
||||
"opacity-hover": (
|
||||
property: opacity,
|
||||
state: hover,
|
||||
class: opacity,
|
||||
values: $opacity-values
|
||||
),
|
||||
"font-size": (
|
||||
rfs: true,
|
||||
responsive: true,
|
||||
property: font-size,
|
||||
class: fs,
|
||||
values: $font-sizes
|
||||
),
|
||||
"width": (
|
||||
responsive: true,
|
||||
property: width,
|
||||
class: w,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"max-width": (
|
||||
responsive: true,
|
||||
property: max-width,
|
||||
class: mw,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"min-width": (
|
||||
responsive: true,
|
||||
property: min-width,
|
||||
class: min-w,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"height": (
|
||||
responsive: true,
|
||||
property: height,
|
||||
class: h,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"max-height": (
|
||||
responsive: true,
|
||||
property: max-height,
|
||||
class: mh,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"min-height": (
|
||||
responsive: true,
|
||||
property: min-height,
|
||||
class: min-h,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"z-index": (
|
||||
property: z-index,
|
||||
class: z-index,
|
||||
values: $zindex-values
|
||||
),
|
||||
"border-top-width": (
|
||||
property: border-top-width,
|
||||
class: border-top,
|
||||
values: $border-widths
|
||||
),
|
||||
"border-bottom-width": (
|
||||
property: border-bottom-width,
|
||||
class: border-bottom,
|
||||
values: $border-widths
|
||||
),
|
||||
"border-right-width": (
|
||||
property: border-right-width,
|
||||
class: border-right,
|
||||
values: $border-widths
|
||||
),
|
||||
"border-left-width": (
|
||||
property: border-left-width,
|
||||
class: border-left,
|
||||
values: $border-widths
|
||||
),
|
||||
"line-height": (
|
||||
property: line-height,
|
||||
class: lh,
|
||||
values: (
|
||||
0: 0,
|
||||
1: 1,
|
||||
sm: $line-height-sm,
|
||||
base: $line-height-base,
|
||||
lg: $line-height-lg,
|
||||
xl: $line-height-xl,
|
||||
xxl: $line-height-xxl
|
||||
)
|
||||
),
|
||||
"letter-spacing": (
|
||||
property: letter-spacing,
|
||||
class: ls,
|
||||
values: $letter-spacing-values
|
||||
),
|
||||
"rounded": (
|
||||
property: border-radius,
|
||||
class: rounded,
|
||||
values: (
|
||||
null: $border-radius,
|
||||
0: 0,
|
||||
1: $border-radius-sm,
|
||||
2: $border-radius,
|
||||
3: $border-radius-lg,
|
||||
4: $border-radius-xl,
|
||||
circle: 50%,
|
||||
pill: $border-radius-pill
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,132 @@
|
||||
//
|
||||
// Buttons Base
|
||||
//
|
||||
|
||||
// Button
|
||||
.btn {
|
||||
--#{$prefix}btn-color: var(--kt-body-color);
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
|
||||
// Reset outline
|
||||
outline: none !important;
|
||||
|
||||
// Reset focus shadow
|
||||
&:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):not(.shadow-xs) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Remove border
|
||||
&:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
|
||||
border: 0;
|
||||
padding: calc(#{$btn-padding-y} + #{$btn-border-width}) calc(#{$btn-padding-x} + #{$btn-border-width});
|
||||
|
||||
&.btn-lg {
|
||||
padding: calc(#{$btn-padding-y-lg} + #{$btn-border-width}) calc(#{$btn-padding-x-lg} + #{$btn-border-width});
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
padding: calc(#{$btn-padding-y-sm} + #{$btn-border-width}) calc(#{$btn-padding-x-sm} + #{$btn-border-width});
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
&.btn-link {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
text-decoration: none;
|
||||
font-weight: $btn-font-weight;
|
||||
}
|
||||
|
||||
// Outline
|
||||
&.btn-outline:not(.btn-outline-dashed) {
|
||||
border: 1px solid var(--kt-input-border-color);
|
||||
}
|
||||
|
||||
// Outline dashed
|
||||
&.btn-outline-dashed {
|
||||
border: 1px dashed var(--kt-input-border-color);
|
||||
}
|
||||
|
||||
// Flush
|
||||
&.btn-flush {
|
||||
@include button-reset();
|
||||
}
|
||||
|
||||
// Flex
|
||||
&.btn-flex {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Align start
|
||||
&.btn-trim-start {
|
||||
justify-content: flex-start !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
// Align start
|
||||
&.btn-trim-end {
|
||||
justify-content: flex-end !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Icons
|
||||
.btn {
|
||||
// Font icon
|
||||
i {
|
||||
display: inline-flex;
|
||||
font-size: $font-size-base;
|
||||
padding-right: 0.35rem;
|
||||
vertical-align: middle;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
// Svg icon
|
||||
.svg-icon {
|
||||
flex-shrink: 0;
|
||||
line-height: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
// Icon only button
|
||||
&.btn-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
height: $input-height;
|
||||
width: $input-height;
|
||||
|
||||
// Remove border
|
||||
&:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.btn-sm {
|
||||
height: $input-height-sm;
|
||||
width: $input-height-sm;
|
||||
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
height: $input-height-lg;
|
||||
width: $input-height-lg;
|
||||
}
|
||||
|
||||
&.btn-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
i,
|
||||
.svg-icon {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
//
|
||||
// Buttons Theme
|
||||
//
|
||||
|
||||
// Outline dashed basic style
|
||||
.btn.btn-outline.btn-outline-dashed {
|
||||
border-width: 1px;
|
||||
border-style: dashed;
|
||||
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$border-color: null;
|
||||
$bg-color: null;;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: var(--kt-primary);
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Theme colors
|
||||
@each $name, $value in $theme-colors {
|
||||
// Base
|
||||
.btn.btn-#{$name} {
|
||||
$color: var(--kt-#{$name}-inverse);
|
||||
$icon-color: var(--kt-#{$name}-inverse);
|
||||
$border-color: var(--kt-#{$name});
|
||||
$bg-color: var(--kt-#{$name});
|
||||
|
||||
$color-active: var(--kt-#{$name}-inverse);
|
||||
$icon-color-active: var(--kt-#{$name}-inverse);
|
||||
$border-color-active: var(--kt-#{$name}-active);
|
||||
$bg-color-active: var(--kt-#{$name}-active);
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Light
|
||||
@if ( theme-light-color($name) ) {
|
||||
.btn.btn-light-#{$name} {
|
||||
$color: var(--kt-#{$name});
|
||||
$icon-color: var(--kt-#{$name});
|
||||
$border-color: var(--kt-#{$name}-light);
|
||||
$bg-color: var(--kt-#{$name}-light);
|
||||
|
||||
$color-active: var(--kt-#{$name}-inverse);
|
||||
$icon-color-active: var(--kt-#{$name}-inverse);
|
||||
$border-color-active: var(--kt-#{$name});
|
||||
$bg-color-active: var(--kt-#{$name});
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
// Background
|
||||
.btn.btn-bg-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$border-color: var(--kt-#{$name});
|
||||
$bg-color: var(--kt-#{$name});
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Active
|
||||
.btn.btn-active-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$border-color: null;
|
||||
$bg-color: null;
|
||||
|
||||
$color-active: var(--kt-#{$name}-inverse);
|
||||
$icon-color-active: var(--kt-#{$name}-inverse);
|
||||
$border-color-active: var(--kt-#{$name});
|
||||
$bg-color-active: var(--kt-#{$name});
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Light
|
||||
@if ( theme-light-color($name) ) {
|
||||
.btn.btn-active-light-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$border-color: null;
|
||||
$bg-color: null;
|
||||
|
||||
$color-active: var(--kt-#{$name});
|
||||
$icon-color-active: var(--kt-#{$name});
|
||||
$border-color-active: var(--kt-#{$name}-light);
|
||||
$bg-color-active: var(--kt-#{$name}-light);
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline
|
||||
.btn.btn-outline.btn-outline-#{$name} {
|
||||
$color: var(--kt-#{$name});
|
||||
$icon-color: var(--kt-#{$name});
|
||||
$border-color: var(--kt-#{$name});
|
||||
$bg-color: transparent;
|
||||
|
||||
$color-active: var(--kt-#{$name}-active);
|
||||
$icon-color-active: var(--kt-#{$name}-active);
|
||||
$border-color-active: var(--kt-#{$name});
|
||||
$bg-color-active: var(--kt-#{$name}-light);
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
// Theme text colors
|
||||
@each $name, $value in $theme-text-colors {
|
||||
// Text and icon colors
|
||||
.btn.btn-color-#{$name} {
|
||||
$color: var(--kt-text-#{$name});
|
||||
$icon-color: var(--kt-text-#{$name});
|
||||
$bg-color: null;
|
||||
$border-color: null;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Text and icon colors active state
|
||||
.btn.btn-active-color-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$border-color: null;
|
||||
$bg-color: null;
|
||||
|
||||
$color-active: var(--kt-text-#{$name});
|
||||
$icon-color-active: var(--kt-text-#{$name});
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Icon colors
|
||||
.btn.btn-icon-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: var(--kt-text-#{$name});
|
||||
$bg-color: null;
|
||||
$border-color: null;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Icon colors active state
|
||||
.btn.btn-active-icon-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$bg-color: null;
|
||||
$border-color: null;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: var(--kt-text-#{$name});
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Text colors
|
||||
.btn.btn-text-#{$name} {
|
||||
$color: var(--kt-text-#{$name});
|
||||
$icon-color: null;
|
||||
$bg-color: null;
|
||||
$border-color: null;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Text colors active state
|
||||
.btn.btn-active-text-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$bg-color: null;
|
||||
$border-color: null;
|
||||
|
||||
$color-active: var(--kt-text-#{$name});
|
||||
$icon-color-active: null;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
// Social colors
|
||||
@each $name, $value in $social-colors {
|
||||
// Base
|
||||
.btn.btn-#{$name} {
|
||||
$color: get($value, inverse);
|
||||
$icon-color: get($value, inverse);
|
||||
$border-color: get($value, base);
|
||||
$bg-color: get($value, base);
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: get($value, active);
|
||||
$bg-color-active: get($value, active);
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Light
|
||||
.btn.btn-light-#{$name} {
|
||||
$color: get($value, base);
|
||||
$icon-color: get($value, base);
|
||||
$bg-color: get($value, light);
|
||||
$border-color: get($value, light);
|
||||
|
||||
$color-active: get($value, inverse);
|
||||
$icon-color-active: get($value, inverse);
|
||||
$bg-color-active: get($value, base);
|
||||
$border-color-active: get($value, base);
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
// Bootstrap components
|
||||
@import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/containers";
|
||||
@import "~bootstrap/scss/grid";
|
||||
@import "~bootstrap/scss/tables";
|
||||
@import "~bootstrap/scss/forms";
|
||||
@import "~bootstrap/scss/buttons";
|
||||
@import "~bootstrap/scss/transitions";
|
||||
@import "~bootstrap/scss/dropdown";
|
||||
@import "~bootstrap/scss/button-group";
|
||||
@import "~bootstrap/scss/nav";
|
||||
@import "~bootstrap/scss/navbar";
|
||||
@import "~bootstrap/scss/card";
|
||||
@import "~bootstrap/scss/accordion";
|
||||
@import "~bootstrap/scss/breadcrumb";
|
||||
@import "~bootstrap/scss/pagination";
|
||||
@import "~bootstrap/scss/badge";
|
||||
@import "~bootstrap/scss/alert";
|
||||
@import "~bootstrap/scss/progress";
|
||||
@import "~bootstrap/scss/list-group";
|
||||
@import "~bootstrap/scss/close";
|
||||
@import "~bootstrap/scss/toasts";
|
||||
@import "~bootstrap/scss/modal";
|
||||
@import "~bootstrap/scss/tooltip";
|
||||
@import "~bootstrap/scss/popover";
|
||||
@import "~bootstrap/scss/carousel";
|
||||
@import "~bootstrap/scss/spinners";
|
||||
@import "~bootstrap/scss/offcanvas";
|
||||
@import "~bootstrap/scss/placeholders";
|
||||
|
||||
// Bootstrap helpers
|
||||
@import "~bootstrap/scss/helpers";
|
||||
|
||||
// Bootstrap utilities
|
||||
@import "utilities";
|
||||
@import "~bootstrap/scss/utilities/api";
|
||||
|
||||
// Custom components
|
||||
@import "root";
|
||||
@import "root-bs";
|
||||
@import "reboot";
|
||||
@import "type";
|
||||
@import "theme-mode";
|
||||
@import "animation";
|
||||
@import "alert";
|
||||
@import "list-group";
|
||||
@import "images";
|
||||
@import "button-group";
|
||||
@import "dropdown";
|
||||
@import "toasts";
|
||||
@import "close";
|
||||
@import "offcanvas";
|
||||
@import "nav";
|
||||
@import "nav-line-tabs";
|
||||
@import "nav-pills-custom";
|
||||
@import "pagination";
|
||||
@import "separator";
|
||||
@import "carousel";
|
||||
@import "menu";
|
||||
@import "anchor";
|
||||
@import "card";
|
||||
@import "breadcrumb";
|
||||
@import "buttons";
|
||||
@import "code";
|
||||
@import "forms";
|
||||
@import "modal";
|
||||
@import "progress";
|
||||
@import "tables";
|
||||
@import "popover";
|
||||
@import "tooltip";
|
||||
@import "accordion";
|
||||
@import "feedback";
|
||||
@import "image-input";
|
||||
@import "symbol";
|
||||
@import "pulse";
|
||||
@import "page-loader";
|
||||
@import "scrolltop";
|
||||
@import "svg-icon";
|
||||
@import "fixed";
|
||||
@import "timeline";
|
||||
@import "timeline-label";
|
||||
@import "overlay";
|
||||
@import "bullet";
|
||||
@import "drawer";
|
||||
@import "badge";
|
||||
@import "indicator";
|
||||
@import "hover";
|
||||
@import "rotate";
|
||||
@import "scroll";
|
||||
@import "rating";
|
||||
@import "stepper";
|
||||
@import "toggle";
|
||||
@import "shape";
|
||||
@import "ribbon";
|
||||
@import "blockui";
|
||||
@import "explore";
|
||||
@import "engage";
|
||||
@import "cookiealert";
|
||||
@import "print";
|
||||
@import "helpers";
|
||||
@@ -0,0 +1,12 @@
|
||||
//
|
||||
// Floating label
|
||||
//
|
||||
|
||||
.form-floating {
|
||||
.form-control.form-control-solid {
|
||||
&::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,239 @@
|
||||
//
|
||||
// Form Check
|
||||
//
|
||||
|
||||
// Check input
|
||||
.form-check:not(.form-switch) {
|
||||
.form-check-input {
|
||||
&[type="checkbox"] {
|
||||
background-size: $form-check-input-bg-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom checkbox and radio
|
||||
.form-check-custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
// Input
|
||||
.form-check-input {
|
||||
margin: 0;
|
||||
float: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Label
|
||||
.form-check-label {
|
||||
margin-left: 0.55rem;
|
||||
}
|
||||
|
||||
// Sizing
|
||||
&.form-check-sm {
|
||||
.form-check-input {
|
||||
height: $form-check-input-width-sm;
|
||||
width: $form-check-input-width-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-check-lg {
|
||||
.form-check-input {
|
||||
height: $form-check-input-width-lg;
|
||||
width: $form-check-input-width-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Solid
|
||||
&.form-check-solid {
|
||||
.form-check-input {
|
||||
border: 0;
|
||||
background-color: var(--kt-form-check-input-bg-solid);
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
filter: none;
|
||||
background-color: var(--kt-form-check-input-bg-solid);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: var(--kt-form-check-input-checked-bg-color-solid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// States
|
||||
// Success state
|
||||
&.form-check-success {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
background-color: var(--kt-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Danger state
|
||||
&.form-check-danger {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
background-color: var(--kt-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Warning state
|
||||
&.form-check-warning {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
background-color: var(--kt-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom switch
|
||||
.form-switch.form-check-solid {
|
||||
.form-check-input {
|
||||
height: $form-switch-height;
|
||||
background-image: var(--kt-form-switch-bg-image-solid);
|
||||
border-radius: $form-switch-border-radius;
|
||||
|
||||
&:checked {
|
||||
filter: none;
|
||||
background-image: var(--kt-form-switch-checked-bg-image);
|
||||
}
|
||||
}
|
||||
|
||||
&.form-switch-sm {
|
||||
.form-check-input {
|
||||
height: $form-switch-height-sm;
|
||||
width: $form-switch-width-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-switch-lg {
|
||||
.form-check-input {
|
||||
height: $form-switch-height-lg;
|
||||
width: $form-switch-width-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Clip
|
||||
.form-check-clip {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.form-check-label {
|
||||
padding-top: 0.5rem;
|
||||
font-size: $form-label-font-size;
|
||||
color: var(--kt-form-label-color);
|
||||
font-weight: $form-label-font-weight;
|
||||
}
|
||||
|
||||
.form-check-wrapper {
|
||||
@include border-radius($border-radius-lg);
|
||||
border: 2px solid transparent;
|
||||
transition: $transition-base;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-check-indicator {
|
||||
transition: $transition-base;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
width: $form-check-input-width;
|
||||
height: $form-check-input-width;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-size: 50%;
|
||||
background-image: var(--kt-form-check-input-checked-bg-image);
|
||||
background-color: var(--kt-component-checked-bg);
|
||||
@include border-bottom-start-radius($border-radius-lg);
|
||||
@include border-top-end-radius($border-radius-lg);
|
||||
|
||||
&.form-check-indicator-sm {
|
||||
width: $form-check-input-width-sm;
|
||||
height: $form-check-input-width-sm;
|
||||
}
|
||||
|
||||
&.form-check-indicator-lg {
|
||||
width: $form-check-input-width-lg;
|
||||
height: $form-check-input-width-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-check:checked + div {
|
||||
border: 2px solid var(--kt-component-checked-bg);
|
||||
transition: $transition-base;
|
||||
|
||||
.form-check-indicator {
|
||||
transition: $transition-base;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-check:disabled + div {
|
||||
transition: $transition-base;
|
||||
opacity: var(--kt-form-check-btn-check-disabled-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
.form-check-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.form-check-wrapper {
|
||||
@include border-radius($border-radius-lg);
|
||||
border: 2px solid transparent;
|
||||
transition: $transition-base;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.form-check-rounded {
|
||||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
font-weight: $font-weight-bold;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.form-check-wrapper {
|
||||
border-color: var(--kt-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.form-check-success.active {
|
||||
.form-check-wrapper {
|
||||
border-color: var(--kt-success);
|
||||
}
|
||||
}
|
||||
|
||||
&.form-check-danger.active {
|
||||
.form-check-wrapper {
|
||||
border-color: var(--kt-danger);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: var(--kt-form-check-btn-check-disabled-opacity);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
//
|
||||
// Check/radio
|
||||
//
|
||||
|
||||
.form-check-input {
|
||||
background-color: var(--kt-form-check-input-bg);
|
||||
border: var(--kt-form-check-input-border);
|
||||
|
||||
&:active {
|
||||
filter: var(--kt-form-check-input-active-filter);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--kt-form-check-input-focus-border);
|
||||
box-shadow: var(--kt-form-check-input-focus-box-shadow);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: var(--kt-form-check-input-checked-bg-color);
|
||||
border-color: var(--kt-form-check-input-checked-border-color);
|
||||
|
||||
&[type="checkbox"] {
|
||||
@if $enable-gradients {
|
||||
background-image: var(--kt-form-check-input-checked-bg-image), var(--#{$prefix}gradient);
|
||||
} @else {
|
||||
background-image: var(--kt-form-check-input-checked-bg-image);
|
||||
}
|
||||
}
|
||||
|
||||
&[type="radio"] {
|
||||
@if $enable-gradients {
|
||||
background-image: var(--kt-form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
|
||||
} @else {
|
||||
background-image: var(--kt-form-check-radio-checked-bg-image);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[type="checkbox"]:indeterminate {
|
||||
background-color: var(--kt-form-check-input-indeterminate-bg-color);
|
||||
border-color: var(--kt-form-check-input-indeterminate-border-color);
|
||||
|
||||
@if $enable-gradients {
|
||||
background-image: var(--kt-form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
|
||||
} @else {
|
||||
background-image:var(--kt-form-check-input-indeterminate-bg-image);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: var(--kt-form-check-input-disabled-opacity);
|
||||
}
|
||||
|
||||
// Use disabled attribute in addition of :disabled pseudo-class
|
||||
// See: https://github.com/twbs/bootstrap/issues/28247
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
~ .form-check-label {
|
||||
opacity: var(--kt-form-check-label-disabled-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
color: var(--kt-form-check-label-color);
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
& + span,
|
||||
& + label {
|
||||
color: var(--kt-form-check-label-color-checked);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Switch
|
||||
//
|
||||
|
||||
.form-switch {
|
||||
.form-check-input {
|
||||
background-image: var(--kt-form-switch-bg-image);
|
||||
|
||||
&:focus {
|
||||
background-image: var(--kt-form-switch-focus-bg-image);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
@if $enable-gradients {
|
||||
background-image: var(--kt-form-switch-checked-bg-image), var(--#{$prefix}gradient);
|
||||
} @else {
|
||||
background-image: var(--kt-form-switch-checked-bg-image);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
+ .btn {
|
||||
opacity: var(--kt-form-check-btn-check-disabled-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
//
|
||||
// Form Control
|
||||
//
|
||||
|
||||
|
||||
// Form control
|
||||
.form-control {
|
||||
// Dropdown shown state
|
||||
.dropdown.show > & {
|
||||
color: var(--kt-input-focus-color);
|
||||
background-color: var(--kt-input-focus-bg);
|
||||
border-color: var(--kt-input-focus-border-color);
|
||||
}
|
||||
|
||||
// Readonly state
|
||||
&[readonly] {
|
||||
background-color: var(--kt-input-readonly-bg);
|
||||
}
|
||||
|
||||
// Solid style
|
||||
&.form-control-solid {
|
||||
background-color: var(--kt-input-solid-bg);
|
||||
border-color: var(--kt-input-solid-bg);
|
||||
color: var(--kt-input-solid-color);
|
||||
@include placeholder(var(--kt-input-solid-placeholder-color));
|
||||
transition: $transition-input;
|
||||
|
||||
.dropdown.show > &,
|
||||
&:active,
|
||||
&.active,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: var(--kt-input-solid-bg-focus);
|
||||
border-color: var(--kt-input-solid-bg-focus);
|
||||
color: var(--kt-input-solid-color);
|
||||
transition: $transition-input;
|
||||
}
|
||||
}
|
||||
|
||||
// Transparent style
|
||||
&.form-control-transparent {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
.dropdown.show > &,
|
||||
&:active,
|
||||
&.active,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Flush
|
||||
&.form-control-flush {
|
||||
@include input-reset();
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder colors
|
||||
.placeholder-gray-500 {
|
||||
@include placeholder(var(--kt-gray-500));
|
||||
}
|
||||
|
||||
.placeholder-white {
|
||||
@include placeholder($white);
|
||||
}
|
||||
|
||||
// Textarea reset resize
|
||||
.resize-none {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
// Form control solid bg
|
||||
.form-control-solid-bg {
|
||||
background-color: var(--kt-input-solid-bg);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
//
|
||||
// Form controls
|
||||
//
|
||||
|
||||
.form-control {
|
||||
color: var(--kt-input-color);
|
||||
background-color: var(--kt-input-bg);
|
||||
border: $input-border-width solid var(--kt-input-border-color);
|
||||
box-shadow: none !important;
|
||||
//@include box-shadow(var(--kt-input-box-shadow));
|
||||
|
||||
&:focus {
|
||||
color: var(--kt-input-focus-color);
|
||||
background-color: var(--kt-input-focus-bg);
|
||||
border-color: var(--kt-input-focus-border-color);
|
||||
//box-shadow: var(--kt-input-focus-box-shadow);
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: var(--kt-input-placeholder-color);
|
||||
}
|
||||
|
||||
// Disabled and read-only inputs
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
color: var(--kt-input-disabled-color);
|
||||
background-color: var(--kt-input-disabled-bg);
|
||||
border-color: var(--kt-input-disabled-border-color);
|
||||
}
|
||||
|
||||
// File input buttons theming
|
||||
&::file-selector-button {
|
||||
color: var(--kt-form-file-button-color);
|
||||
@include gradient-bg(var(--kt-form-file-button-bg));
|
||||
}
|
||||
|
||||
&:hover:not(:disabled):not([readonly])::file-selector-button {
|
||||
background-color: var(--kt-form-file-button-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Readonly controls as plain text
|
||||
.form-control-plaintext {
|
||||
color: var(--kt-input-plaintext-color);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
//
|
||||
// Form Select
|
||||
//
|
||||
|
||||
.form-select {
|
||||
box-shadow: none !important;
|
||||
|
||||
// Solid style
|
||||
&.form-select-solid {
|
||||
@include placeholder(var(--kt-input-solid-placeholder-color));
|
||||
background-color: var(--kt-input-solid-bg);
|
||||
border-color: var(--kt-input-solid-bg);
|
||||
color: var(--kt-input-solid-color);
|
||||
transition: $transition-input;
|
||||
|
||||
.dropdown.show > &,
|
||||
&:active,
|
||||
&.active,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: var(--kt-input-solid-bg-focus);
|
||||
border-color: var(--kt-input-solid-bg-focus) !important;
|
||||
color: var(--kt-input-solid-color);
|
||||
transition: $transition-input;
|
||||
}
|
||||
}
|
||||
|
||||
// Transparent style
|
||||
&.form-select-transparent {
|
||||
@include placeholder(var(--kt-input-placeholder-color));
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $input-color;
|
||||
|
||||
.dropdown.show > &,
|
||||
&:active,
|
||||
&.active,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: transparent;
|
||||
border-color: transparent !important;
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
// Select
|
||||
//
|
||||
// Replaces the browser default select with a custom one, mostly pulled from
|
||||
// https://primer.github.io/.
|
||||
|
||||
.form-select {
|
||||
color: var(--kt-form-select-color);
|
||||
background-color: var(--kt-form-select-bg);
|
||||
background-image: var(--kt-form-select-indicator);
|
||||
border: $form-select-border-width solid var(--kt-form-select-border-color);
|
||||
@include box-shadow(var(--kt-form-select-box-shadow));
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--kt-form-select-focus-border-color);
|
||||
@if $enable-shadows {
|
||||
@include box-shadow(var(--kt-form-select-box-shadow), var(--kt-form-select-focus-box-shadow));
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: var(--kt-form-select-focus-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:disabled {
|
||||
color: var(--kt-form-select-disabled-color);
|
||||
background-color: var(--kt-form-select-disabled-bg);
|
||||
border-color: var(--kt-form-select-disabled-border-color);
|
||||
}
|
||||
|
||||
// Remove outline from select box in FF
|
||||
&:-moz-focusring {
|
||||
text-shadow: 0 0 0 var(--kt-form-select-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
//
|
||||
// Form text
|
||||
//
|
||||
|
||||
.form-text {
|
||||
color: var(--kt-form-text-color);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
//
|
||||
// Input Group
|
||||
//
|
||||
|
||||
// Form control
|
||||
.input-group {
|
||||
&.input-group-solid {
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
&.input-group-sm {
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
|
||||
&.input-group-lg {
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: var(--kt-input-solid-bg);
|
||||
border-color: var(--kt-input-solid-bg);
|
||||
|
||||
& + .form-control {
|
||||
border-left-color: var(--kt-input-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: var(--kt-input-solid-bg);
|
||||
border-color: var(--kt-input-solid-bg);
|
||||
|
||||
& + .input-group-text {
|
||||
border-left-color: var(--kt-input-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
//
|
||||
// Input group
|
||||
//
|
||||
|
||||
.input-group-text {
|
||||
color: var(--kt-input-group-addon-color);
|
||||
background-color: var(--kt-input-group-addon-bg);
|
||||
border: $input-border-width solid var(--kt-input-group-addon-border-color);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
//
|
||||
// Labels
|
||||
//
|
||||
|
||||
.form-label {
|
||||
color: var(--kt-form-label-color);
|
||||
}
|
||||
|
||||
// For use with horizontal and inline forms, when you need the label (or legend)
|
||||
// text to align with the form controls.
|
||||
.col-form-label {
|
||||
color: var(--kt-form-label-color);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user