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_BASE_LAYOUT_CONFIG_KEY='metronic-react-demo1-8150'
|
||||||
REACT_APP_API_URL=https://preview.keenthemes.com/metronic8/laravel/api
|
REACT_APP_API_URL=https://preview.keenthemes.com/metronic8/laravel/api
|
||||||
REACT_APP_VERSION=v8.1.5
|
REACT_APP_VERSION=v8.1.5
|
||||||
REACT_APP_THEME_NAME=Metornic
|
REACT_APP_THEME_NAME=WrenchBoard
|
||||||
REACT_APP_THEME_DEMO=demo1
|
REACT_APP_THEME_DEMO=dashboard
|
||||||
REACT_APP_BOOTSTRAP_DOCS_LINK=https://getbootstrap.com/docs/5.0
|
REACT_APP_BOOTSTRAP_DOCS_LINK=https://getbootstrap.com/docs/5.0
|
||||||
REACT_APP_SASS_PATH=src/_metronic/assets/sass/core/components
|
REACT_APP_SASS_PATH=src/_metronic/assets/sass/core/components
|
||||||
REACT_APP_SASS_VARIABLES_PATH=src/_metronic/assets/sass/core/components/_variables.scss
|
REACT_APP_SASS_VARIABLES_PATH=src/_metronic/assets/sass/core/components/_variables.scss
|
||||||
|
|||||||
+8
-2
@@ -1,12 +1,12 @@
|
|||||||
version: '3'
|
version: '3'
|
||||||
services:
|
services:
|
||||||
metronic-dash:
|
wrenchboard-dash:
|
||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
dockerfile: docker/Dockerfile
|
dockerfile: docker/Dockerfile
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
ports:
|
ports:
|
||||||
- 3800:3000
|
- 3811:3000
|
||||||
# - 3800:3011
|
# - 3800:3011
|
||||||
extra_hosts:
|
extra_hosts:
|
||||||
- backend.wrenchboard.api.live:10.10.33.15
|
- backend.wrenchboard.api.live:10.10.33.15
|
||||||
@@ -17,5 +17,11 @@ services:
|
|||||||
- apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
|
- apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
|
||||||
environment:
|
environment:
|
||||||
- CHOKIDAR_USEPOLLING=true
|
- CHOKIDAR_USEPOLLING=true
|
||||||
|
# volumes:
|
||||||
|
# - ./:/app
|
||||||
|
# - /app/node_modules
|
||||||
|
tty: true
|
||||||
|
stdin_open: true
|
||||||
|
# working_dir: /app
|
||||||
volumes:
|
volumes:
|
||||||
src:
|
src:
|
||||||
|
|||||||
+2
-2
@@ -7,7 +7,7 @@
|
|||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta name="description" content="Metronic React Demo 1" />
|
<meta name="description" content="Metronic React Demo 1" />
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700">
|
<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="shortcut icon" href="%PUBLIC_URL%/media/logos/favicon.ico" />
|
||||||
<link rel="stylesheet" id="layout-styles-anchor" href="%PUBLIC_URL%/splash-screen.css" />
|
<link rel="stylesheet" id="layout-styles-anchor" href="%PUBLIC_URL%/splash-screen.css" />
|
||||||
</head>
|
</head>
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
|
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<div id="splash-screen" class="splash-screen">
|
<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>
|
<span>Loading ...</span>
|
||||||
</div>
|
</div>
|
||||||
<div id="root-modals"></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