Initial Commit

The initial public commit of MVGL website code.
This commit is contained in:
Jimmy B. 2024-01-14 13:51:43 -06:00
commit b39ecf1638
2043 changed files with 215154 additions and 0 deletions

View file

@ -0,0 +1,11 @@
//
// Functions
//
// Import Dependencies
@import "functions/get";
@import "functions/set";
@import "functions/math";
@import "functions/valueif";
@import "functions/theme-colors";
@import "functions/mode";

View file

@ -0,0 +1,11 @@
//
// Mixins
//
// Import Dependencies
@import "mixins/attr";
@import "mixins/browsers";
@import "mixins/fixes";
@import "mixins/reset";
@import "mixins/placeholder";
@import "mixins/breakpoints";

View file

@ -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;
}

View file

@ -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;
}

View file

@ -0,0 +1,27 @@
//
// Get Mode
//
@function getMode() {
@if (variable-exists(mode)) {
@return $mode;
} @else {
@return default;
}
}
@function isDarkMode() {
@if (getMode() == dark) {
@return true;
} @else {
@return false;
}
}
@function isDefaultMode() {
@if (getMode() == default) {
@return true;
} @else {
@return false;
}
}

View file

@ -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;
}

View file

@ -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);
}

View file

@ -0,0 +1,13 @@
//
// valueif
//
@function valueif($check, $trueValue, $falseValue: null) {
@if $check {
@return $trueValue;
} @else if $falseValue != null {
@return $falseValue;
} @else {
@return null;
}
}

View file

@ -0,0 +1,9 @@
//
// CSS Attribute
//
@mixin attr($attr, $value, $important: '') {
@if $value != null and $value != false {
#{$attr}: #{$value} #{$important};
}
}

View file

@ -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;
}
}
}
}

View file

@ -0,0 +1,10 @@
//
// Browsers
//
@mixin for-edge {
// Microsoft Edge
@supports (-ms-ime-align:auto) {
@content;
}
}

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -0,0 +1,62 @@
//
// Accordion
//
// Base
.accordion {
// 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: $primary;
}
}
// Accordion icon collapsed mode
.collapsed {
.accordion-icon {
transition: $transition-base;
transform: rotate(0);
i,
.svg-icon {
color: $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;
}
}
}

View file

@ -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: $text-muted;
transition: $transition-base;
&:before {
content: '#';
}
}
&:hover {
a {
display: flex;
&:hover {
color: $primary;
transition: $transition-base;
}
}
}
}

View file

@ -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;
}
}

View file

@ -0,0 +1,69 @@
//
// Badge
//
.badge {
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: theme-inverse-color($name);
background-color: $value;
}
.badge-light-#{$name} {
color: $value;
background-color: theme-light-color($name);
}
}

View file

@ -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: get($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: $dropdown-box-shadow;
background-color: $tooltip-bg;
color: if(isDarkMode(), $gray-700, $gray-600);
font-weight: $font-weight-bold;
margin: 0 !important;
width: auto;
padding: 0.85rem 1.75rem !important;
.spinner-border {
margin-right: 0.65rem;
}
}
}

View file

@ -0,0 +1,66 @@
//
// Breadcrumb
//
// Breadcrumb
.breadcrumb {
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;
}
}
}

View file

@ -0,0 +1,33 @@
//
// Bullet
//
// Base
.bullet {
display: inline-block;
background-color: get($bullet, bg-color);
@include border-radius(get($bullet, bar-border-radius));
width: get($bullet, bar-width);
height: get($bullet, bar-height);
flex-shrink: 0;
}
// Dot bullet
.bullet-dot {
width: get($bullet, dot-size);
height: get($bullet, dot-size);
border-radius: 100% !important;
}
// Vertical bullet
.bullet-vertical {
width: get($bullet, bar-height);
height: get($bullet, bar-width);
}
// Vertical line
.bullet-line {
width: get($bullet, line-width);
height: get($bullet, line-height);
border-radius: 0;
}

View file

@ -0,0 +1,7 @@
//
// Buttons
//
// Import Dependencies
@import "buttons/base";
@import "buttons/theme";

View file

@ -0,0 +1,271 @@
//
// Card
//
// Base
.card {
@if ($card-border-enabled) {
border: $card-border-width $card-border-style $card-border-color;
} @else {
border: 0;
}
box-shadow: $card-box-shadow;
// Header
.card-header {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
min-height: $card-header-height;
padding: 0 $card-px;
background-color: transparent;
border-bottom: $card-border-width $card-border-style $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: $gray-600;
line-height: 0;
&:after,
&:before {
line-height: 0;
}
}
.svg-icon {
color: $gray-600;
@include svg-icon-size(24px);
}
}
&,
.card-label {
font-weight: 500;
font-size: 1.275rem;
color: $dark;
}
.card-label {
margin: 0 0.75rem 0 0;
flex-wrap: wrap;
}
// Description
small {
color: $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;
}
// Footer
.card-footer {
padding: $card-py $card-px;
background-color: transparent;
border-top: $card-border-width $card-border-style $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 $card-border-dashed-color;
> .card-header {
border-bottom: 1px dashed $card-border-dashed-color;
}
> .card-footer {
border-top: 1px dashed $card-border-dashed-color;
}
}
// Bordered style
&.card-bordered {
box-shadow: none;
border: $card-border-width $card-border-style $card-border-color;
}
// Flush header and footer borders
&.card-flush {
> .card-header {
border-bottom: 0;
}
> .card-footer {
border-top: 0;
}
}
&.card-shadow {
box-shadow: $card-box-shadow;
border: 0;
}
}
// 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: $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;
}
}
}

View file

@ -0,0 +1,130 @@
//
// Carousel
//
.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: $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: $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: $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: $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%;
}
}
}

View file

@ -0,0 +1,15 @@
//
// Code
//
code:not([class*="language-"]) {
font-weight: $code-font-weight;
color: $code-color;
line-height: inherit;
font-size: inherit;
background-color: $code-bg;
padding: $code-padding;
margin: $code-margin;
box-shadow: $code-box-shadow;
@include border-radius($code-border-radius);
}

View file

@ -0,0 +1,21 @@
//
// Container
//
// Desktop Mode
@include media-breakpoint-up(lg) {
// Containers
.container-custom {
padding-left: get($container, padding, lg) !important;
padding-right: get($container, padding, lg) !important;
}
}
// Tablet & mobile modes
@include media-breakpoint-down(lg) {
.container-custom {
max-width: none;
padding-left: get($container, padding, default) !important;
padding-right: get($container, padding, default) !important;
}
}

View file

@ -0,0 +1,8 @@
//
// Cookie Alert
//
.cookiealert{
background: inherit;
color: inherit;
}

View file

@ -0,0 +1,62 @@
//
// Drawer
//
// Drawer
.drawer {
display: flex !important;
overflow: auto;
z-index: get($drawer, z-index);
position: fixed;
top: 0;
bottom: 0;
background-color: get($drawer, bg-color);
transition: transform get($drawer, transition-speed) ease-in-out;
&.drawer-start {
left: 0;
transform: translateX(-100%);
}
&.drawer-end {
right: 0;
transform: translateX(100%);
}
&.drawer-on {
transform: none;
box-shadow: get($drawer, box-shadow);
transition: transform get($drawer, transition-speed) ease-in-out;
}
}
// Drawer Overlay
.drawer-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
z-index: get($drawer, z-index) - 1;
background-color: get($drawer, overlay-bg-color);
animation: animation-drawer-fade-in get($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;
}
}

View file

@ -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: $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: $gray-600;
background-color: $gray-100;
&:hover {
color: $gray-800;
background-color: $gray-200;
}
}
.explore-btn-outline {
border: 1px dashed $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;
}

View file

@ -0,0 +1,34 @@
//
// Loading
//
.feedback {
display: none;
}
.feedback-popup {
display: flex;
justify-content: center;
margin: 0 auto;
position: fixed;
z-index: get($feedback, popup, z-index);
box-shadow: get($feedback, popup, box-shadow);
background-color: get($feedback, popup, background-color);
border-radius: get($feedback, popup, border-radius);
padding: get($feedback, popup, padding);
}
// Placement
.feedback-top-center {
display: flex;
transition: top get($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 get($feedback, popup, transition-speed) ease;
}
}

View file

@ -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: get($fixed, z-index);
top: 0;
left: 0;
right: 0;
}
}
}

View file

@ -0,0 +1,11 @@
//
// Forms
//
// Import Dependencies
@import "forms/form-control";
@import "forms/form-select";
@import "forms/form-check";
@import "forms/floating-labels";
@import "forms/input-group";
@import "forms/required";

View file

@ -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";

View file

@ -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 $body-bg;
box-shadow: if(isDarkMode(), $box-shadow, $box-shadow-sm);
}
}
}

View file

@ -0,0 +1,17 @@
//
// Indicator
//
.indicator-progress {
display: none;
[data-kt-indicator="on"] > & {
display: inline-block;
}
}
.indicator-label {
[data-kt-indicator="on"] > & {
display: none;
}
}

View file

@ -0,0 +1,7 @@
//
// Menu
//
// Import Dependencies
@import "menu/base";
@import "menu/theme";

View file

@ -0,0 +1,15 @@
//
// Mixins
//
// Import Dependencies
@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";

View file

@ -0,0 +1,30 @@
//
// Modal
//
// Base
.modal {
// Mobile header
.modal-header {
align-items: center;
justify-content: space-between;
@include border-top-radius($modal-content-border-radius);
// Headings
h1,h2,h3,h4,h5,h6 {
margin-bottom: 0;
}
}
// Mobile dialog
.modal-dialog {
outline: none !important;
}
}
// Utilities
.modal-rounded {
@if $enable-rounded {
border-radius: $modal-content-border-radius !important;
}
}

View file

@ -0,0 +1,83 @@
//
// Custom Nav Pills
//
.nav.nav-pills.nav-pills-custom {
// States
.show > .nav-link,
.nav-link{
border: 1px dashed $border-dashed-color;
border-radius: 12px;
.nav-icon {
img {
width: 30px;
transition: $transition-link;
&.default {
display: inline-block;
}
&.active {
display: none;
}
}
}
&.active {
background-color: transparent;
border: 1px solid $border-dashed-color;
transition-duration: 1ms;
position: relative;
.nav-text {
color: $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;
}
}
}
}
}
}

View file

@ -0,0 +1,136 @@
//
// Nav
//
// Line tabs
.nav-line-tabs {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: $border-color;
.nav-item {
margin-bottom: -1px;
// Base link
.nav-link {
color: $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 $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;
}
}
}
// 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: $gray-100;
// Outline nav group
&.nav-group-outline {
background-color: transparent;
border: 1px solid $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;
}
}
}
}

View file

@ -0,0 +1,13 @@
//
// Notice
//
.notice {
@if (isDarkMode()) {
@each $color, $value in $theme-colors {
&.border-#{$color} {
border-color: rgba($value, 0.5) !important;
}
}
}
}

View file

@ -0,0 +1,39 @@
//
// Demo
//
.overlay {
position: relative;
.overlay-wrapper {
}
.overlay-layer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: get($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;
}
}

View file

@ -0,0 +1,26 @@
//
// Page loader
//
// CSS3 Transitions only after page load(.page-loading class added to body tag and remove with JS on page load)
.page-loading * {
transition: none !important;
}
// Base
.page-loader {
background: $body-bg;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
display: none;
.page-loading & {
display: flex;
justify-content: center;
align-items: center;
}
}

View file

@ -0,0 +1,178 @@
//
// Pagination
//
.pagination {
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 $border-color;
}
.page-item {
&:hover,
&.active {
.page-link {
border-color: $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);
}
}
/*rtl:options:{"autoRename":false}*/
&.next,
&.previous {
.page-link {
background-color: $pagination-item-bg;
color: $pagination-color;
i {
color: $pagination-color;
}
}
}
&:focus {
.page-link {
color: $pagination-focus-color;
i {
color: $pagination-focus-color;
}
.previous {
@include svg-bg-icon(arrow-start, $pagination-focus-color);
}
/*rtl:options:{"autoRename":false}*/
.next {
@include svg-bg-icon(arrow-end, $pagination-focus-color);
}
}
}
&:hover:not(.offset) {
.page-link {
color: $pagination-hover-color;
i {
color: $pagination-hover-color;
}
.previous {
@include svg-bg-icon(arrow-start, $pagination-hover-color);
}
/*rtl:options:{"autoRename":false}*/
.next {
@include svg-bg-icon(arrow-end, $pagination-hover-color);
}
}
}
&.active {
.page-link {
color: $pagination-active-color;
i {
color: $pagination-active-color;
}
.previous {
@include svg-bg-icon(arrow-start, $pagination-active-color);
}
/*rtl:options:{"autoRename":false}*/
.next {
@include svg-bg-icon(arrow-end, $pagination-active-color);
}
}
}
&.disabled {
.page-link {
color: $pagination-disabled-color;
i {
color: $pagination-disabled-color;
}
.previous {
@include svg-bg-icon(arrow-start, $pagination-disabled-color);
}
/*rtl:options:{"autoRename":false}*/
.next {
@include svg-bg-icon(arrow-end, $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;
}
}
}

View file

@ -0,0 +1,37 @@
//
// Popover
//
// Base
.popover {
.popover-header {
font-size: $popover-header-font-size;
font-weight: $popover-header-font-weight;
border-bottom: 1px solid $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, $gray-500);
background-size: 45%;
&:hover {
@include svg-bg-icon(close, $primary);
}
& + .popover-header {
padding-right: $popover-body-padding-x + $popover-dissmis-btn-height;
}
}
}
// Dark Mode
.popover-dark {
@include popover-theme($gray-900, $gray-800, $gray-900, $gray-200, $gray-400, $gray-100, $gray-900);
// $bg-color, $border-color, $header-bg-color, $header-color, $body-color, $arrow-outer-color, $arrow-color
}

View file

@ -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;
}
}
}

View file

@ -0,0 +1,27 @@
//
// Progress
//
// 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);
}
}
}

View file

@ -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: $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;}
}

View file

@ -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: get($rating, color, default);
}
}
label.rating-label {
cursor: pointer;
}
div.rating-label.checked,
label.rating-label {
& > i,
& > .svg-icon {
color: get($rating, color, active);
}
}
.rating-input:checked ~ .rating-label {
& > i,
& > .svg-icon {
color: get($rating, color, default);
}
}
.rating:hover label.rating-label {
& > i,
& > .svg-icon {
color: get($rating, color, active);
}
}
label.rating-label:hover ~ .rating-label {
& > i,
& > .svg-icon {
color: get($rating, color, default);
}
color: get($rating, color, default);
}

View file

@ -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: $primary;
box-shadow: 0px -1px 5px 0px rgba(#000, 0.1);
color: theme-inverse-color("primary");
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: darken($primary, 30%);
}
}
// 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: if(isDarkMode(), $light, $dark) !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: if(isDarkMode(), $light, $dark) !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 red;
border-right: solid 2rem transparent !important;
border-top: solid 2rem red;
}
// 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 red;
border-top: solid 2rem red;
}
// Botton start position
&.ribbon-bottom-start {
bottom: 0;
left: 0;
width: 4rem;
height: 4rem;
border-bottom: solid 2rem red;
border-left: solid 2rem red;
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 red;
border-right: solid 2rem red;
border-left: solid 2rem transparent !important;
border-top: solid 2rem transparent !important;
}
}

View file

@ -0,0 +1,27 @@
//
// Root CSS Variables
//
:root {
// Theme colors
@each $name, $value in $theme-colors {
@if ( theme-light-color($name) ) {
--#{$variable-prefix}light-#{$name}:#{theme-light-color($name)};
--#{$variable-prefix}active-#{$name}:#{theme-active-color($name)};
}
}
// Gray colors
@each $name, $value in $grays {
--#{$variable-prefix}gray-#{$name}:#{$value};
}
// Breakpoints
@each $breakpoint, $value in $grid-breakpoints {
--#{$variable-prefix}#{$breakpoint}:#{$value};
}
// Border
--#{$variable-prefix}border-color:#{$border-color};
--#{$variable-prefix}border-dashed-color:#{$border-dashed-color};
}

View file

@ -0,0 +1,45 @@
//
// 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;
.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;
.collapsible:not(.collapsed)> &,
.show > &,
.active > & {
transform: rotateZ(-#{$value}deg);
transition: $rotate-transition;
[direction="rtl"] & {
transform: rotateZ(#{$value}deg);
}
}
}
}

View file

@ -0,0 +1,203 @@
//
// 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: get($scrollbar, width);
height: get($scrollbar, height);
}
// Default color
@include scrollbar-color(get($scrollbar, color), get($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: get($scrollbar, width) solid transparent;
border-bottom: get($scrollbar, height) solid transparent;
margin-right: -#{get($scrollbar, width)};
margin-bottom: -#{get($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: get($scrollbar, width) solid transparent;
margin-right: -#{get($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: get($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-y {
overflow-y: hidden;
position: relative;
--scrollbar-space: #{get($scrollbar, space)};
// Webkit
&::-webkit-scrollbar {
width: calc(#{get($scrollbar, width)} + var(--scrollbar-space));
}
&::-webkit-scrollbar-thumb {
background-clip: content-box;
border-right: var(--scrollbar-space) solid transparent;
}
&:hover {
overflow-y: overlay;
}
// Firefox hack
@-moz-document url-prefix() {
overflow-y: scroll;
position: relative;
}
}
// Utility classes
.scroll-ps {
padding-left: get($scrollbar, width) !important;
}
.scroll-ms {
margin-left: get($scrollbar, width) !important;
}
.scroll-pe {
padding-right: get($scrollbar, width) !important;
}
.scroll-me {
margin-right: get($scrollbar, width) !important;
}
.scroll-px {
padding-left: get($scrollbar, width) !important;
padding-right: get($scrollbar, width) !important;
}
.scroll-mx {
margin-left: get($scrollbar, width) !important;
margin-right: get($scrollbar, width) !important;
}

View file

@ -0,0 +1,68 @@
//
// Scrolltop
//
.scrolltop {
position: fixed;
display: none;
cursor: pointer;
z-index: 100;
justify-content: center;
align-items: center;
width: get($scrolltop, size, desktop);
height: get($scrolltop, size, desktop);
bottom: get($scrolltop, bottom, desktop);
right: get($scrolltop, right, desktop);
background-color: get($scrolltop, bg-color, default);
box-shadow: $box-shadow;
opacity: get($scrolltop, opacity, default);
transition: $transition-link;
@include border-radius($border-radius);
.svg-icon {
@include svg-icon-size(24px);
color: get($scrolltop, icon-color, default);
}
> i {
font-size: 1.3rem;
color: get($scrolltop, icon-color, default);
}
&:hover {
background-color: get($scrolltop, bg-color, hover);
> i {
color: get($scrolltop, icon-color, hover);
}
.svg-icon {
color: get($scrolltop, icon-color, hover);
}
}
[data-kt-scrolltop="on"] & {
opacity: get($scrolltop, opacity, on);
animation: animation-scrolltop .4s ease-out 1;
display: flex;
&:hover {
transition: $transition-link;
opacity: get($scrolltop, opacity, hover);
}
}
// Tablet & Mobile Modess
@include media-breakpoint-down(lg) {
bottom: get($scrolltop, bottom, tablet-and-mobile);
right: get($scrolltop, right, tablet-and-mobile);
width: get($scrolltop, size, tablet-and-mobile);
height: get($scrolltop, size, tablet-and-mobile);
}
}
// Animations
@keyframes animation-scrolltop {
from { margin-bottom: -15px; }
to { margin-bottom: 0; }
}

View file

@ -0,0 +1,66 @@
//
// Separator
//
.separator {
display: block;
height: 0;
border-bottom: 1px solid $border-color;
&.separator-dotted {
border-bottom-style: dotted;
border-bottom-color: $border-dashed-color;
}
&.separator-dashed {
border-bottom-style: dashed;
border-bottom-color: $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 $border-color;
}
&::before{
margin-right: 1.25rem;
}
&::after{
margin-left: 1.25rem;
}
&.separator-dotted {
&::before,
&::after {
border-bottom-style: dotted;
border-bottom-color: $border-dashed-color;
}
}
&.separator-dashed {
&::before,
&::after {
border-bottom-style: dashed;
border-bottom-color: $border-dashed-color;
}
}
@each $color, $value in $theme-colors {
&.border-#{$color}{
&::before,
&::after {
border-color: $value !important;
}
}
}
}
}

View file

@ -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);
}

View file

@ -0,0 +1,8 @@
//
// Stepper
//
// Import Dependencies
@import "stepper/base";
@import "stepper/pills";
@import "stepper/links";

View file

@ -0,0 +1,30 @@
//
// SVG Icon
//
.svg-icon {
line-height: 1;
color: $text-muted;
@include svg-icon-size(get($font-sizes, 5));
// Theme colors
@each $name, $color in $theme-text-colors {
&.svg-icon-#{$name} {
color: $color;
}
}
// 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);
}
}
}
}
}

View file

@ -0,0 +1,105 @@
//
// 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: $gray-800;
background-color: $gray-100;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
@include border-radius($border-radius);
}
// Badge
.symbol-badge {
position: absolute;
border: 2px solid $body-bg;
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%;
}
}
// 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;
border: 2px solid $body-bg;
transition: all 0.3s ease;
&:hover {
transition: all 0.3s ease;
z-index: 1;
}
}
&.symbol-hover {
.symbol {
cursor: pointer;
}
}
}

View file

@ -0,0 +1,227 @@
//
// Table
//
// Table
.table {
// 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: $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: $border-color;
}
tfoot {
th, td {
border-top-width: 1px !important;
}
}
}
// Row border colors
@each $color, $value in $grays {
&.table-row-gray-#{$color} {
tr {
border-bottom-color: $value;
}
}
}
}
// 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, $text-muted);
}
}
.table-sort-desc {
&:after {
opacity: 1;
@include svg-bg-icon(arrow-bottom, $text-muted);
}
}
// Loading
.table-loading-message {
display: none;
position: absolute;
top: 50%;
left: 50%;
@include border-radius($border-radius);
box-shadow: $dropdown-box-shadow;
background-color: $tooltip-bg;
color: if(isDarkMode(), $gray-700, $gray-600);
font-weight: $font-weight-bold;
margin: 0 !important;
width: auto;
padding: 1rem 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;
}
}
}
}
}
}

View file

@ -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: $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: $gray-800;
}
.timeline-badge {
flex-shrink: 0;
background: $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 $body-bg !important;
span {
display: block;
border-radius: 100%;
width: 6px;
height: 6px;
background-color: $gray-200;
}
}
.timeline-content {
flex-grow: 1;
}
}

View file

@ -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: $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%;
}
}
}
}
}

View file

@ -0,0 +1,3 @@
//
// Toast
//

View file

@ -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;
}
}
}

View file

@ -0,0 +1,23 @@
//
// Tooltip
//
// Base
.tooltip {
.tooltip-inner {
box-shadow: $tooltip-box-shadow;
}
&.tooltop-auto-width {
.tooltip-inner {
white-space: nowrap;
max-width: none;
}
}
// Dark Theme
&.tooltip-dark {
@include tooltip-theme($dark, $dark-inverse, $dark);
}
}

View file

@ -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

View file

@ -0,0 +1,165 @@
//
// Buttons Base
//
// Button
.btn {
// Reset outline
outline: none !important;
// Reset focus shadow
&:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg) {
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 dashed
&.btn-outline-dashed {
border: 1px dashed $border-dashed-color;
}
// Outline default
&.btn-outline-default {
border: 1px solid $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;
}
}
}
// Hover effects
.btn.btn-hover-rise {
transition: transform 0.3s ease;
&:hover {
transform: translateY(-10%);
transition: transform 0.3s ease;
}
}
.btn.btn-hover-scale {
transition: transform 0.3s ease;
&:hover {
transform: scale(1.1);
transition: transform 0.3s ease;
}
}
.btn.btn-hover-rotate-end {
transition: transform 0.3s ease;
&:hover {
transform: rotate(4deg);
transition: transform 0.3s ease;
}
}
.btn.btn-hover-rotate-start {
transition: transform 0.3s ease;
&:hover {
transform: rotate(-4deg);
transition: transform 0.3s ease;
}
}

View file

@ -0,0 +1,253 @@
//
// Buttons Theme
//
// Theme colors
@each $name, $value in $theme-colors {
// Base
.btn.btn-#{$name} {
$color: theme-inverse-color($name);
$icon-color: theme-inverse-color($name);
$border-color: $value;
$bg-color: $value;
$color-active: theme-inverse-color($name);
$icon-color-active: theme-inverse-color($name);
$border-color-active: theme-active-color($name);
$bg-color-active: theme-active-color($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-light-#{$name} {
$color: $value;
$icon-color: $value;
$border-color: theme-light-color($name);
$bg-color: theme-light-color($name);
$color-active: theme-inverse-color($name);
$icon-color-active: theme-inverse-color($name);
$border-color-active: $value;
$bg-color-active: $value;
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
}
}
@if ( $btn-extended-variants == true or $name == primary or $name == light ) {
.btn.btn-bg-#{$name} {
$color: null;
$icon-color: null;
$border-color: $value;
$bg-color: $value;
$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);
}
.btn.btn-active-#{$name} {
$color: null;
$icon-color: null;
$border-color: null;
$bg-color: null;
$color-active: theme-inverse-color($name);
$icon-color-active: theme-inverse-color($name);
$border-color-active: $value;
$bg-color-active: $value;
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
}
@if (theme-light-color($name)) {
.btn.btn-active-light-#{$name} {
$color: null;
$icon-color: null;
$border-color: null;
$bg-color: null;
$color-active: $value;
$icon-color-active: $value;
$border-color-active: theme-light-color($name);
$bg-color-active: theme-light-color($name);
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
// Don't change the border color for outline style
&.btn-outline:not(.btn-outline-default) {
border-color: $value !important;
}
}
}
}
}
// Theme text colors
@each $name, $value in $theme-text-colors {
@if ( $btn-extended-variants == true or $name == primary or $name == muted ) {
// Text and icon colors
.btn.btn-color-#{$name} {
$color: $value;
$icon-color: $value;
$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: $value;
$icon-color-active: $value;
$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: $value;
$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: $value;
$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: $value;
$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: $value;
$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);
}
}
// 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: $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);
}
// Outline dashed default style
.btn.btn-outline.btn-outline-dashed.btn-outline-default {
border-width: 1px;
border-style: dashed;
$color: $light-inverse;
$icon-color: $light-inverse;
$border-color: $gray-300;
$bg-color: null;
$color-active: $primary;
$icon-color-active: $primary;
$border-color-active: $primary;
$bg-color-active: $primary-light;
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
}

View file

@ -0,0 +1,94 @@
//
// 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";
// Bootstrap helpers
@import "~bootstrap/scss/helpers";
// Bootstrap utilities
@import "utilities";
@import "~bootstrap/scss/utilities/api";
// Custom components
@import "root";
@import "helpers";
@import "animation";
@import "nav";
@import "nav-pills-custom";
@import "pagination";
@import "separator";
@import "carousel";
@import "menu";
@import "anchor";
@import "card";
@import "toasts";
@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 "rotate";
@import "scroll";
@import "rating";
@import "stepper";
@import "toggle";
@import "shape";
@import "ribbon";
@import "blockui";
@import "notice";
@import "explore";
@import "cookiealert";
@import "print";
@import "container";

View file

@ -0,0 +1,12 @@
//
// Floating label
//
.form-floating {
.form-control.form-control-solid {
&::placeholder {
color: transparent;
}
}
}

View file

@ -0,0 +1,134 @@
//
// Form Check
//
.form-check {
// Label
.form-check-label {
cursor: pointer;
}
// Input
.form-check-input {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
// Custom
&.form-check-custom {
display: flex;
align-items: center;
padding-left: 0;
margin: 0;
.form-check-input {
margin: 0;
float: none;
flex-shrink: 0;
}
.form-check-label {
margin-left: 0.55rem;
}
}
&:not(.form-switch) {
.form-check-input {
&[type="checkbox"] {
background-size: $form-check-input-bg-size;
}
}
}
// Solid
&.form-check-solid {
.form-check-input {
border: 0;
background-color: $form-check-input-bg-solid;
&:active,
&:focus {
filter: none;
background-color: $form-check-input-bg-solid;
}
&:checked {
background-color: $form-check-input-checked-bg-color;
}
}
}
// Success state
&.form-check-success {
.form-check-input {
&:checked {
background-color: $success;
}
}
}
// Danger state
&.form-check-danger {
.form-check-input {
&:checked {
background-color: $danger;
}
}
}
// Warning state
&.form-check-warning {
.form-check-input {
&:checked {
background-color: $warning;
}
}
}
}
// Sizing
.form-check.form-check-custom {
&.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;
}
}
}
// Form switch
.form-switch.form-check-solid {
.form-check-input {
height: $form-switch-height;
background-image: escape-svg($form-switch-bg-image-solid);
border-radius: $form-switch-border-radius;
&:checked {
filter: none;
background-image: escape-svg($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;
}
}
}

View file

@ -0,0 +1,80 @@
//
// Form Control
//
// Form control
.form-control {
box-shadow: none !important;
// Dropdown shown state
.dropdown.show > & {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
}
// Readonly state
&[readonly] {
background-color: $input-readonly-bg;
}
// Solid style
&.form-control-solid {
background-color: $input-solid-bg;
border-color: $input-solid-bg;
@include placeholder($input-solid-placeholder-color);
color: $input-solid-color;
transition: $transition-input;
.dropdown.show > &,
&:active,
&.active,
&:focus,
&.focus {
background-color: $input-solid-bg-focus;
border-color: $input-solid-bg-focus;
color: $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($gray-500);
}
.placeholder-white {
@include placeholder($white);
}
// Textarea reset resize
.resize-none {
resize: none;
}
// Form control solid bg
.form-control-solid-bg {
background-color: $input-solid-bg;
}

View file

@ -0,0 +1,45 @@
//
// Form Select
//
.form-select {
box-shadow: none !important;
// Solid style
&.form-select-solid {
@include placeholder($input-solid-placeholder-color);
background-color: $input-solid-bg;
border-color: $input-solid-bg;
color: $input-solid-color;
transition: $transition-input;
.dropdown.show > &,
&:active,
&.active,
&:focus,
&.focus {
background-color: $input-solid-bg-focus;
border-color: $input-solid-bg-focus !important;
color: $input-solid-color;
transition: $transition-input;
}
}
// Transparent style
&.form-select-transparent {
@include placeholder($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;
}
}
}

View file

@ -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: $input-solid-bg;
border-color: $input-solid-bg;
& + .form-control {
border-left-color: $input-border-color;
}
}
.form-control {
background-color: $input-solid-bg;
border-color: $input-solid-bg;
& + .input-group-text {
border-left-color: $input-border-color;
}
}
}
}

View file

@ -0,0 +1,14 @@
//
// Required Label
//
.required {
&:after {
content: "*";
position: relative;
font-size: inherit;
color: $danger;
padding-left: 0.25rem;
font-weight: bold;
}
}

View file

@ -0,0 +1,223 @@
//
// Custom background helpers
//
// Background theme light colors
@each $color, $value in $theme-colors {
@if (theme-light-color($color)) {
.bg-light-#{$color} {
background-color: theme-light-color($color) !important;
&.hoverable:hover {
background-color: darken(theme-light-color($color), 6%) !important;
}
}
}
.bg-#{$color} {
background-color: $value !important;
--bg-color: #{red($value)}, #{green($value)}, #{blue($value)} !important;
&.hoverable:hover {
background-color: theme-active-color($color) !important;
}
}
@if (theme-light-color($color)) {
.bg-hover-light-#{$color} {
cursor: pointer;
&:hover {
background-color: theme-light-color($color) !important;
}
}
.bg-state-light-#{$color} {
cursor: pointer;
&.active,
&:hover {
background-color: theme-light-color($color) !important;
}
}
}
.bg-hover-#{$color} {
cursor: pointer;
&:hover {
--bg-color: #{red($value)}, #{green($value)}, #{blue($value)};
background-color: $value !important;
}
}
.bg-active-#{$color} {
&.active {
--bg-color: #{red($value)}, #{green($value)}, #{blue($value)};
background-color: $value !important;
}
}
.bg-state-#{$color} {
cursor: pointer;
&.active,
&:hover {
--bg-color: #{red($value)}, #{green($value)}, #{blue($value)};
background-color: $value !important;
}
}
}
// Background gray colors
@each $color, $value in $grays {
.bg-gray-#{$color} {
background-color: $value;
}
}
// Opacity
@each $name, $value in $opacity-values {
.bg-opacity-#{$name} {
background-color: rgba(var(--bg-color), #{$value}) !important;
}
.bg-hover-opacity-#{$name}:hover {
background-color: rgba(var(--bg-color), #{$value}) !important;
}
.bg-active-opacity-#{$name}.active {
background-color: rgba(var(--bg-color), #{$value}) !important;
}
.bg-state-opacity-#{$name} {
.active,
&:hover {
background-color: rgba(var(--bg-color), #{$value}) !important;
}
}
}
// Background black color
.bg-black {
background-color: $black;
}
// Background body color
.bg-body {
--bg-color: #{red($body-bg)}, #{green($body-bg)}, #{blue($body-bg)};
background-color: $body-bg;
}
// Lighten bg states
.bg-lighten {
background-color: $lighten;
}
.bg-hover-lighten {
cursor: pointer;
&:hover {
background-color: $lighten;
}
}
.bg-active-lighten {
&.active {
background-color: $lighten;
}
}
.bg-state-lighten {
cursor: pointer;
&.active,
&:hover {
background-color: $lighten;
}
}
// Hoverable
.hoverable {
cursor: pointer;
transition: $transition-base;
&:hover {
transition: $transition-base;
}
}
// Background image helpers
// Background repeat
.bgi-no-repeat {
background-repeat: no-repeat;
}
// Background positions
.bgi-position-y-top {
background-position-y: top;
}
.bgi-position-y-bottom {
background-position-y: bottom;
}
.bgi-position-y-center {
background-position-y: center;
}
.bgi-position-x-start {
background-position-x: left;
}
.bgi-position-x-end {
background-position-x: right;
}
.bgi-position-x-center {
background-position-x: center;
}
.bgi-position-top {
background-position: 0 top;
}
.bgi-position-bottom {
background-position: 0 bottom;
}
.bgi-position-center {
background-position: center;
}
// Responsive helpers
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
// Background sizes
.bgi-size#{$infix}-auto {
background-size: auto;
}
.bgi-size#{$infix}-cover {
background-size: cover;
}
.bgi-size#{$infix}-contain {
background-size: contain;
}
// Background attachment
.bgi-attachment#{$infix}-fixed {
background-attachment: fixed;
}
.bgi-attachment#{$infix}-scroll {
background-attachment: scroll;
}
}
}

View file

@ -0,0 +1,114 @@
//
// Border
//
.border-active:not(.active):not(:active):not(:hover):not(:focus) {
border-color: transparent !important;
}
.border-hover:not(:hover):not(:focus):not(.active):not(:active) {
cursor: pointer;
border-color: transparent !important;
}
// Gray border colors
@each $color, $value in $grays {
// Initial
.border-gray-#{$color} {
border-color: $value !important;
}
}
// Hover border colors
@each $color, $value in $theme-colors {
.border-hover-#{$color}:hover {
border-color: $value !important;
}
.border-active-#{$color}.active {
border-color: $value !important;
}
}
// Hover transparent
.border-hover-transparent:hover {
border-color: transparent !important;
}
// Dashed style
.border-dashed {
border-style: dashed !important;
border-color: $border-dashed-color;
}
.border-top-dashed {
border-top-style: dashed !important;
}
.border-bottom-dashed {
border-bottom-style: dashed !important;
}
.border-start-dashed {
border-left-style: dashed !important;
}
.border-end-dashed {
border-right-style: dashed !important;
}
// Dotted style
.border-dotted {
border-style: dotted !important;
}
.border-top-dotted {
border-top-style: dotted !important;
}
.border-bottom-dotted {
border-bottom-style: dotted !important;
}
.border-start-dotted {
border-left-style: dotted !important;
}
.border-end-dotted {
border-right-style: dotted !important;
}
// Border transparent
.border-transparent {
border-color: transparent !important;
}
// Border body
.border-body {
border-color: $body-bg !important;
}
// Border radiuses
.rounded-top-0 {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.rounded-bottom-0 {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.rounded-start-0 {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.rounded-end-0 {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.rounded-circle {
border-radius: 50% !important;
}

View file

@ -0,0 +1,47 @@
//
// Flex Utilities
//
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.flex#{$infix}-root {
flex: 1;
}
.flex#{$infix}-column-auto {
flex: none;
}
.flex#{$infix}-column-fluid {
flex: 1 0 auto;
}
.flex#{$infix}-row-auto {
flex: 0 0 auto;
}
.flex#{$infix}-row-fluid {
flex: 1 auto;
min-width: 0;
}
.flex#{$infix}-center {
justify-content: center;
align-items: center;
}
.flex#{$infix}-stack {
justify-content: space-between;
align-items: center;
}
}
}
.flex-equal {
flex-grow: 1;
flex-basis: 0;
flex-shrink: 0;
}

View file

@ -0,0 +1,18 @@
//
// Opacity
//
@each $name, $value in $opacity-values {
// Active state
.opacity-active-#{$name}.active {
opacity: #{$value} !important;
}
// Active and hover states
.opacity-state-#{$name} {
&:hover,
&.active {
opacity: #{$value} !important;
}
}
}

View file

@ -0,0 +1,7 @@
//
// Shadow
//
.shadow-xs {
box-shadow: $box-shadow-xs;
}

View file

@ -0,0 +1,161 @@
//
// Text
//
// Text colors
@each $name, $color in $theme-text-colors {
// Base color
.text-#{$name} {
color: $color !important;
}
// Inverse color
@if (theme-inverse-color($name)) {
.text-inverse-#{$name} {
color: theme-inverse-color($name) !important;
}
}
@if (theme-light-color($name)) {
// Light colors
.text-light-#{$name} {
color: theme-light-color($name) !important;
}
}
// Hover
.text-hover-#{$name} {
transition: $transition-link;
i {
transition: $transition-link;
}
&:hover {
transition: $transition-link;
color: $color !important;
i {
transition: $transition-link;
color: $color !important;
}
.svg-icon {
color: $color !important;
}
}
}
// Hover inverse
@if (theme-inverse-color($name)) {
.text-hover-inverse-#{$name} {
transition: $transition-link;
i {
transition: $transition-link;
}
&:hover {
transition: $transition-link;
color: theme-inverse-color($name) !important;
i {
transition: $transition-link;
color: theme-inverse-color($name) !important;
}
.svg-icon {
color: theme-inverse-color($name) !important;
}
}
}
}
// Active
.text-active-#{$name} {
transition: $transition-link;
i {
transition: $transition-link;
}
&.active {
transition: $transition-link;
color: $color !important;
i {
transition: $transition-link;
color: $color !important;
}
.svg-icon {
color: $color !important;
}
}
}
// Active inverse
@if (theme-inverse-color($name)) {
.text-active-inverse-#{$name} {
transition: $transition-link;
i {
transition: $transition-link;
}
&.active {
transition: $transition-link;
color: theme-inverse-color($name) !important;
i {
transition: $transition-link;
color: theme-inverse-color($name) !important;
}
.svg-icon {
color: theme-inverse-color($name) !important;
}
}
}
}
}
// Text transparent
.fw-boldest {
font-weight: $font-weight-boldest !important;
}
// Text transparent
.text-transparent {
color: transparent;
}
// Cursor pointer
.cursor-pointer {
cursor: pointer;
}
// Cursor default
.cursor-default {
cursor: default;
}
// Cursor move
.cursor-move {
cursor: move;
}
// Icons
i {
line-height: 1;
font-size: 1rem;
//color: $text-muted;
}
// Link transition
a {
transition: $transition-link;
&:hover {
transition:$transition-link;
}
}

View file

@ -0,0 +1,8 @@
//
// Transform
//
.transform-90 {
transform: rotate(90deg);
transform-origin: right top;
}

View file

@ -0,0 +1,274 @@
//
// Menu Base
//
// Menu group
.menu-group {
display: flex;
}
// Menu & wrapper
.menu,
.menu-wrapper {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
// Sub inner
.menu-inner {
padding: 0;
margin: 0;
list-style: none;
}
// Sub menu
.menu-sub {
display: none;
padding: 0;
margin: 0;
list-style: none;
flex-direction: column;
}
// Menu item
.menu-item {
display: block;
padding: 0;
// Menu Link
.menu-link {
cursor: pointer;
display: flex;
align-items: center;
padding: 0;
flex: 0 0 100%;
padding: get($menu, link, self, padding-y) get($menu, link, self, padding-x);
transition: none;
outline: none !important;
// Menu Icon
.menu-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: get($menu, link, icon, width);
margin-right: get($menu, link, icon, space);
.svg-icon {
line-height: 1;
}
}
// Menu Icon
.menu-bullet {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: get($menu, link, bullet, width);
margin-right: get($menu, link, bullet, space);
}
// Menu Label
.menu-title {
display: flex;
align-items: center;
flex-grow: 1;
}
// Menu Label
.menu-badge {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: get($menu, link, badge, space);
}
// Menu Arrow
.menu-arrow {
display: flex;
align-items: stretch;
position: relative;
overflow: hidden;
flex-shrink: 0;
margin-left: get($menu, link, arrow, space);
width: get($menu, link, arrow, width);
height: get($menu, link, arrow, height);
&:after {
display: block;
width: 100%;
content: " ";
@include svg-bg-icon(arrow-start, $text-muted);
/*rtl:begin:remove*/
@include svg-bg-icon(arrow-end, $text-muted);
/*rtl:end:remove*/
}
}
}
// Menu Content
.menu-content {
padding: get($menu, link, self, padding-y) get($menu, link, self, padding-x);
}
}
// Accordion arrows
.menu-item {
&.show {
.menu-link {
.menu-arrow:after {
backface-visibility: hidden;
transition: get($menu, accordion, arrow-transition);
}
}
}
}
// Center alignment
.menu-center {
justify-content: center;
}
// Responsive
@each $direction in (up, down) {
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if $infix and $direction == down {
$infix: $infix + "-" + $direction;
}
@include media-breakpoint-direction($direction, $breakpoint) {
// Accordion arrow
.menu-item.menu#{$infix}-accordion {
&.showing:not(.menu-dropdown),
&.show:not(.hiding):not(.menu-dropdown) {
> .menu-link {
.menu-arrow:after {
@include menu-link-arrow-rotate(90deg, -90deg);
}
}
}
}
// Sub dropdown
.menu-sub#{$infix}-dropdown {
display: none;
border-radius: get($menu, dropdown, border-radius);
background-color: get($menu, dropdown, background-color);
box-shadow: get($menu, dropdown, box-shadow);
z-index: get($menu, dropdown, z-index);
// Dropdown show
.show.menu-dropdown > &,
&.menu.show,
&.show[data-popper-placement] {
display: flex;
// Animation
@if (get($menu, dropdown, animation) == true) {
// Move up
animation: menu-sub-dropdown-animation-fade-in #{get($menu, dropdown, animation-speed)} ease 1, menu-sub-dropdown-animation-move-up #{get($menu, dropdown, animation-speed)} ease 1;
// Move down
&[data-popper-placement="top"],
&[data-popper-placement="top-start"],
&[data-popper-placement="top-end"] {
animation: menu-sub-dropdown-animation-fade-in #{get($menu, dropdown, animation-speed)} ease 1, menu-sub-dropdown-animation-move-down #{get($menu, dropdown, animation-speed)} ease 1;
}
}
}
}
// Sub accordion
.menu-sub#{$infix}-accordion {
display: none;
.show:not(.menu-dropdown) > &,
&.show {
display: flex;
}
}
// Inline
.menu#{$infix}-inline {
display: flex;
}
// Reset link left & right paddings of level 1 menu links
.menu#{$infix}-fit {
> .menu-item {
> .menu-content,
> .menu-link {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
}
.menu#{$infix}-column {
flex-direction: column;
width: 100%;
}
.menu#{$infix}-row {
flex-direction: row;
> .menu-item {
display: flex;
align-items: center;
> .menu-link {
.menu-arrow:after {
@include menu-link-arrow-rotate(90deg, -90deg);
}
}
}
}
// Border radiuses
.menu#{$infix}-rounded {
.menu-link {
@include border-radius($border-radius);
}
}
// Border radiuses
.menu#{$infix}-pill {
.menu-link {
border-radius: 50px;
}
}
// Reset border radiuses
.menu#{$infix}-rounded-0 {
.menu-link {
border-radius: 0 !important;
}
}
}
}
}
// Menu indention
@include menu-link-indention(get($menu, accordion, indention), get($menu, link, self, padding-x));
// Menu animations
@keyframes menu-sub-dropdown-animation-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes menu-sub-dropdown-animation-move-up {
from { margin-top: #{get($menu, dropdown, animation-move-offset)} }
to { margin-top: 0 }
}
@keyframes menu-sub-dropdown-animation-move-down {
from { margin-bottom: #{get($menu, dropdown, animation-move-offset)} }
to { margin-bottom: 0 }
}

View file

@ -0,0 +1,324 @@
//
// Menu Theme
//
// Theme text colors
@each $name, $color in $theme-text-colors {
.menu-#{$name} {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-default-state( $color, $color, $color, $color, null );
}
}
.menu-title-#{$name} {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-default-state( $color, null, null, null, null );
}
}
.menu-icon-#{$name} {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-default-state( null, $color, null, null, null );
}
}
.menu-bullet-#{$name} {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-default-state( null, null, $color, null, null );
}
}
.menu-arrow-#{$name} {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-default-state( null, null, null, $color, null );
}
}
}
// Default background states
.menu-hover-bg {
.menu-item {
@include menu-link-hover-state( null, null, null, null, get($menu, link, self, bg-color, hover) );
}
}
.menu-here-bg {
.menu-item {
@include menu-link-here-state( null, null, null, null, get($menu, link, self, bg-color, here) );
}
}
.menu-show-bg {
.menu-item {
@include menu-link-show-state( null, null, null, null, get($menu, link, self, bg-color, show) );
}
}
.menu-active-bg {
.menu-item {
@include menu-link-active-state( null, null, null, null, get($menu, link, self, bg-color, active) );
}
}
.menu-state-bg {
.menu-item {
@include menu-link-hover-state( null, null, null, null, get($menu, link, self, bg-color, hover) );
@include menu-link-here-state( null, null, null, null, get($menu, link, self, bg-color, here) );
@include menu-link-show-state( null, null, null, null, get($menu, link, self, bg-color, show) );
@include menu-link-active-state( null, null, null, null, get($menu, link, self, bg-color, active) );
}
}
// Primary background states
.menu-hover-bg-primary {
.menu-item {
@include menu-link-hover-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
}
}
.menu-show-bg-primary {
.menu-item {
@include menu-link-show-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
}
}
.menu-here-bg-primary {
.menu-item {
@include menu-link-here-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
}
}
.menu-active-bg-primary {
.menu-item {
@include menu-link-active-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
}
}
.menu-state-bg-primary {
.menu-item {
@include menu-link-hover-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
@include menu-link-show-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
@include menu-link-here-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
@include menu-link-active-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
}
}
// Light primary background states
.menu-show-bg-light-primary {
.menu-item {
@include menu-link-show-state( $primary, $primary, $primary, $primary, $primary-light );
}
}
.menu-here-bg-light-primary {
.menu-item {
@include menu-link-here-state( $primary, $primary, $primary, $primary, $primary-light );
}
}
.menu-hover-bg-light-primary {
.menu-item {
@include menu-link-hover-state( $primary, $primary, $primary, $primary, $primary-light );
}
}
.menu-active-bg-light-primary {
.menu-item {
@include menu-link-active-state( $primary, $primary, $primary, $primary, $primary-light );
}
}
.menu-state-bg-light-primary {
.menu-item {
@include menu-link-show-state( $primary, $primary, $primary, $primary, $primary-light );
@include menu-link-here-state( $primary, $primary, $primary, $primary, $primary-light );
@include menu-link-hover-state( $primary, $primary, $primary, $primary, $primary-light );
@include menu-link-active-state( $primary, $primary, $primary, $primary, $primary-light );
}
}
// Primary color states
.menu-hover-primary {
.menu-item {
@include menu-link-hover-state( $primary, $primary, $primary, $primary, null );
}
}
.menu-show-primary {
.menu-item {
@include menu-link-show-state( $primary, $primary, $primary, $primary, null );
}
}
.menu-here-primary {
.menu-item {
@include menu-link-here-state( $primary, $primary, $primary, $primary, null );
}
}
.menu-active-primary {
.menu-item {
@include menu-link-active-state( $primary, $primary, $primary, $primary, null );
}
}
.menu-state-primary {
.menu-item {
@include menu-link-hover-state( $primary, $primary, $primary, $primary, null );
@include menu-link-show-state( $primary, $primary, $primary, $primary, null );
@include menu-link-here-state( $primary, $primary, $primary, $primary, null );
@include menu-link-active-state( $primary, $primary, $primary, $primary, null );
}
}
// Primary title color states
.menu-hover-title-primary {
.menu-item {
@include menu-link-hover-state( $primary, null, null, null, null );
}
}
.menu-here-title-primary {
.menu-item {
@include menu-link-here-state( $primary, null, null, null, null );
}
}
.menu-show-title-primary {
.menu-item {
@include menu-link-show-state( $primary, null, null, null, null );
}
}
.menu-active-title-primary {
.menu-item {
@include menu-link-active-state( $primary, null, null, null, null );
}
}
.menu-state-title-primary {
.menu-item {
@include menu-link-hover-state( $primary, null, null, null, null );
@include menu-link-show-state( $primary, null, null, null, null );
@include menu-link-active-state( $primary, null, null, null, null );
}
}
// Primary icon color states
.menu-hover-icon-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-hover-state( null, $primary, null, null, null );
}
}
.menu-here-icon-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-here-state( null, $primary, null, null, null );
}
}
.menu-show-icon-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-show-state( null, $primary, null, null, null );
}
}
.menu-active-icon-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-active-state( null, $primary, null, null, null );
}
}
.menu-state-icon-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-hover-state( null, $primary, null, null, null );
@include menu-link-show-state( null, $primary, null, null, null );
@include menu-link-active-state( null, $primary, null, null, null );
}
}
// Primary bullet color states
.menu-hover-bullet-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-hover-state( null, null, $primary, null, null );
}
}
.menu-show-bullet-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-show-state( null, null, $primary, null, null );
}
}
.menu-here-bullet-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-here-state( null, null, $primary, null, null );
}
}
.menu-active-bullet-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-active-state( null, null, $primary, null, null );
}
}
.menu-state-bullet-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-hover-state( null, null, $primary, null, null );
@include menu-link-show-state( null, null, $primary, null, null );
@include menu-link-active-state( null, null, $primary, null, null );
}
}
// Primary arrow color states
.menu-hover-arrow-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-hover-state( null, null, null, $primary, null );
}
}
.menu-here-arrow-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-here-state( null, null, null, $primary, null );
}
}
.menu-show-arrow-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-show-state( null, null, null, $primary, null );
}
}
.menu-active-arrow-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-active-state( null, null, null, $primary, null );
}
}
.menu-state-arrow-primary {
.menu-item {
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
@include menu-link-hover-state( null, null, null, $primary, null );
@include menu-link-show-state( null, null, null, $primary, null );
@include menu-link-active-state( null, null, null, $primary, null );
}
}

View file

@ -0,0 +1,71 @@
//
// Button Mixins
//
// Custom variant
@mixin button-custom-variant(
$color,
$icon-color,
$border-color,
$bg-color,
$color-active,
$icon-color-active,
$border-color-active,
$bg-color-active
) {
@if ( $color != null ) {
color: $color;
}
@if ( $icon-color != null ) {
i,
.svg-icon {
color: $icon-color;
}
&.dropdown-toggle:after {
color: $icon-color;
}
}
@if ( $border-color != null ) {
border-color: $border-color;
}
@if ( $bg-color != null ) {
background-color: $bg-color;
}
.btn-check:checked + &,
.btn-check:active + &,
&:focus:not(.btn-active),
&:hover:not(.btn-active),
&:active:not(.btn-active),
&.active,
&.show,
.show > & {
@if ( $color-active != null ) {
color: $color-active;
}
@if ( $icon-color-active != null ) {
i,
.svg-icon {
color: $icon-color-active;
}
&.dropdown-toggle:after {
color: $icon-color-active;
}
}
@if ( $border-color-active != null ) {
border-color: $border-color-active;
}
@if ( $bg-color-active != null ) {
background-color: $bg-color-active !important;
}
}
}

View file

@ -0,0 +1,18 @@
//
// Keenthemes Icons
//
@mixin ki($icon) {
font-family: Ki;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
content: "#{$icon}";
}

View file

@ -0,0 +1,296 @@
//
// Label
//
// Set arrow direction
@mixin menu-link-arrow-rotate($angle, $angleRtl) {
/*rtl:ignore*/
transform: rotateZ($angle);
transition: get($menu, accordion, arrow-transition);
[direction="rtl"] & {
/*rtl:ignore*/
transform: rotateZ($angleRtl);
}
}
// Set menu link padding x
@mixin menu-link-padding-x($value) {
// Menu item
.menu-item {
.menu-link,
.menu-content {
padding-left: $value;
padding-right: $value;
}
}
}
// Set menu link padding y
@mixin menu-link-padding-y($value) {
// Menu item
.menu-item {
.menu-link,
.menu-content {
padding-top: $value;
padding-bottom: $value;
}
}
}
// Set menu indention
@mixin menu-link-indention($value, $offset) {
// Accordion mode
.menu-sub:not([data-popper-placement]) {
> .menu-item,
> .menu-inner > .menu-item {
> .menu-content,
> .menu-link {
padding-left: calc(#{1 * $value} + #{$offset});
}
> .menu-sub:not([data-popper-placement]) {
> .menu-item,
> .menu-inner > .menu-item {
> .menu-content,
> .menu-link {
padding-left: calc(#{2 * $value} + #{$offset});
}
> .menu-sub:not([data-popper-placement]) {
> .menu-item,
> .menu-inner > .menu-item {
> .menu-content,
> .menu-link {
padding-left: calc(#{3 * $value} + #{$offset});
}
> .menu-sub:not([data-popper-placement]) {
> .menu-item,
> .menu-inner > .menu-item {
> .menu-content,
> .menu-link {
padding-left: calc(#{4 * $value} + #{$offset});
}
}
}
}
}
}
}
}
.menu-fit & {
> .menu-item,
> .menu-inner > .menu-item {
> .menu-content,
> .menu-link {
padding-left: #{$value};
padding-right: 0;
}
> .menu-sub:not([data-popper-placement]) {
> .menu-item,
> .menu-inner > .menu-item {
> .menu-content,
> .menu-link {
padding-left: calc(#{2 * $value});
padding-right: 0;
}
> .menu-sub:not([data-popper-placement]) {
> .menu-item,
> .menu-inner > .menu-item {
> .menu-content,
> .menu-link {
padding-left: calc(#{3 * $value});
padding-right: 0;
}
> .menu-sub:not([data-popper-placement]) {
> .menu-item,
> .menu-inner > .menu-item {
> .menu-content,
> .menu-link {
padding-left: calc(#{4 * $value});
padding-right: 0;
}
}
}
}
}
}
}
}
}
}
}
// Set menu link theme
@mixin menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null) {
@if ( $bg-color != null ) {
background-color: $bg-color;
}
@if ( $title-color != null ) {
color: $title-color;
.menu-title {
color: $title-color;
}
}
@if ( $icon-color != null ) {
.menu-icon {
&,
.svg-icon,
i {
color: $icon-color;
}
}
}
@if ( $bullet-color != null ) {
.menu-bullet {
.bullet {
background-color: $bullet-color;
}
}
}
@if ( $arrow-color != null ) {
// Arrow
.menu-arrow:after {
@include svg-bg-icon(arrow-start, $arrow-color);
/*rtl:begin:remove*/
@include svg-bg-icon(arrow-end, $arrow-color);
/*rtl:end:remove*/
}
}
}
// Set menu link default state
@mixin menu-link-default-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
$sel: '';
@if ($all-links == false) {
$sel: '& > ';
}
#{$sel}.menu-link {
@include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
}
}
// Set menu link hover state
@mixin menu-link-hover-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
$sel: '&:not(.here) ';
@if ($all-links == false) {
$sel: '&:not(.here) > ';
}
&.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
#{$sel}.menu-link:hover:not(.disabled):not(.active):not(.here) {
transition: $transition-link;
@include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
}
}
// Set menu link active state
@mixin menu-link-active-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
$sel: '';
@if ($all-links == false) {
$sel: '& > ';
}
#{$sel}.menu-link.active {
transition: $transition-link;
@include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
}
}
// Set menu link show state
@mixin menu-link-show-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
//&.here > .menu-link,
&.show > .menu-link {
transition: $transition-link;
@include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
}
}
// Set menu link here state
@mixin menu-link-here-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
&.here > .menu-link {
transition: $transition-link;
@include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
}
}
// Set menu link default
@mixin menu-link-default($all-links: true) {
$sel: '';
@if ($all-links == false) {
$sel: '& > ';
}
#{$sel}.menu-link {
@content;
}
}
// Set menu link hover
@mixin menu-link-hover($all-links: true) {
$sel: '&:not(.here) ';
@if ($all-links == false) {
$sel: '&:not(.here) > ';
}
&.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
#{$sel}.menu-link:hover:not(.disabled):not(.active):not(.here) {
transition: $transition-link;
@content;
}
}
// Set menu link active
@mixin menu-link-active($all-links: true) {
$sel: '';
@if ($all-links == false) {
$sel: '& > ';
}
#{$sel}.menu-link.active {
transition: $transition-link;
@content;
}
}
// Set menu link show
@mixin menu-link-show($all-links: true) {
//&.here > .menu-link,
&.show > .menu-link {
transition: $transition-link;
@content;
}
}
// Set menu link here
@mixin menu-link-here($all-links: true) {
&.here > .menu-link {
transition: $transition-link;
@content;
}
}

View file

@ -0,0 +1,74 @@
//
// Popover Mixin
//
@mixin popover-theme($bg-color, $border-color, $header-bg-color, $header-color, $body-color, $arrow-outer-color, $arrow-color) {
background-color: $bg-color;
border: 0;
// Header
.popover-header {
background-color: $header-bg-color;
color: $header-color;
border-bottom-color: $border-color;
}
// Body
.popover-body {
color: $body-color;
}
// Arrows
&.bs-popover-top {
> .popover-arrow {
&::before {
border-top-color: $arrow-outer-color;
}
&::after {
border-top-color: $arrow-color;
}
}
}
&.bs-popover-end {
> .popover-arrow {
&::before {
border-right-color: $arrow-outer-color;
}
&::after {
border-right-color: $arrow-color;
}
}
}
&.bs-popover-bottom {
> .popover-arrow {
&::before {
border-bottom-color: $arrow-outer-color;
}
&::after {
border-bottom-color: $arrow-color;
}
}
// This will remove the popover-header's border just below the arrow
.popover-header::before {
border-bottom-color: $header-bg-color;
}
}
&.bs-popover-start {
> .popover-arrow {
&::before {
border-left-color: $arrow-outer-color;
}
&::after {
border-left-color: $arrow-color;
}
}
}
}

View file

@ -0,0 +1,26 @@
//
// Scroll mixins
//
@mixin scrollbar-color($color, $hover-color: null) {
// Firefox
scrollbar-color: $color transparent;
// Webkit
&::-webkit-scrollbar-thumb {
background-color: $color;
}
@if ($hover-color != null) {
// Hover state
&:hover {
// Firefox
scrollbar-color: $hover-color transparent;
// Webkit
&::-webkit-scrollbar-thumb {
background-color: $hover-color;
}
}
}
}

View file

@ -0,0 +1,29 @@
@use 'sass:math';
@mixin shape($edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20) {
$central-angle: divide(360deg, $edges-number);
$angle: ($edges-number - 2) * divide(180deg, $edges-number);
$max-var-angle: 2 * (90deg - divide($angle, 2));
$precision: 6;
$unit-var-angle: divide($max-var-angle, $precision);
$r-diff: $main-radius + $rounding-radius;
$points: ();
@for $i from 0 to $edges-number {
$vertex-angle: $i * $central-angle + if($rotated, -90deg, 0deg);
$vertex-x: 50% + $r-diff * math.cos($vertex-angle);
$vertex-y: 50% + $r-diff * math.sin($vertex-angle);
@for $j from 0 through $precision {
$curr-angle: $vertex-angle + ($j - 0.5 * $precision) * $unit-var-angle;
$x: $vertex-x + $rounding-radius * math.cos($curr-angle);
$y: $vertex-y + $rounding-radius * math.sin($curr-angle);
$points: $points, $x $y;
}
}
clip-path: polygon($points);
}

View file

@ -0,0 +1,54 @@
//
// SVG Bg Icons
//
@mixin svg-bg-icon($type, $color, $update: false) {
$bg-image: '';
// Icon type;
@if ($type == close) {
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
}
@if ($type == check) {
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'><path fill='#{$color}' d='M4.89557 6.49823L2.79487 4.26513C2.26967 3.70683 1.38251 3.70683 0.857309 4.26513C0.375593 4.77721 0.375593 5.57574 0.857309 6.08781L4.74989 10.2257C5.14476 10.6455 5.81176 10.6455 6.20663 10.2257L13.1427 2.85252C13.6244 2.34044 13.6244 1.54191 13.1427 1.02984C12.6175 0.471537 11.7303 0.471536 11.2051 1.02984L6.06096 6.49823C5.74506 6.83403 5.21146 6.83403 4.89557 6.49823Z'/></svg>");
}
@if ($type == arrow-top) {
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M4.42111 2.06463C4.22088 1.96161 3.9637 1.9809 3.78597 2.12863L0.177181 5.12847C-0.046034 5.31402 -0.0602611 5.63049 0.145404 5.83532C0.351069 6.04015 0.698744 6.05578 0.921959 5.87023L4.14137 3.19406L7.06417 5.84414C7.27904 6.03896 7.62686 6.03835 7.84105 5.84278C8.05524 5.64721 8.05469 5.33073 7.83982 5.13591L4.54449 2.14806C4.50704 2.1141 4.46541 2.08629 4.42111 2.06463Z'/></svg>");
}
@if ($type == arrow-bottom) {
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M4.42111 5.93537C4.22088 6.03839 3.9637 6.0191 3.78597 5.87137L0.177181 2.87153C-0.046034 2.68598 -0.060261 2.36951 0.145404 2.16468C0.351069 1.95985 0.698744 1.94422 0.921959 2.12977L4.14137 4.80594L7.06417 2.15586C7.27904 1.96104 7.62686 1.96165 7.84105 2.15722C8.05524 2.35279 8.05469 2.66927 7.83982 2.86409L4.54449 5.85194C4.50704 5.8859 4.46541 5.91371 4.42111 5.93537Z'/></svg>");
}
@if ($type == arrow-start) {
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/></svg>");
}
@if ($type == arrow-end) {
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.93537 4.57889C6.03839 4.77912 6.0191 5.0363 5.87137 5.21403L2.87153 8.82282C2.68598 9.04603 2.36951 9.06026 2.16468 8.8546C1.95985 8.64893 1.94422 8.30126 2.12977 8.07804L4.80594 4.85863L2.15586 1.93583C1.96104 1.72096 1.96165 1.37314 2.15722 1.15895C2.35279 0.944757 2.66927 0.945311 2.86409 1.16018L5.85194 4.45551C5.8859 4.49296 5.91371 4.53459 5.93537 4.57889Z'/></svg>");
}
@if ($type == sort) {
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/></svg>");
}
@if ($type == sort-asc) {
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/></svg>");
}
@if ($type == sort-desc) {
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/></svg>");
}
// Icon style
@if $update == false {
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
}
background-image: escape-svg($bg-image);
}

View file

@ -0,0 +1,11 @@
//
// SVG Icon
//
@mixin svg-icon-size($size, $important: false) {
svg {
height: $size valueif($important, !important, null);
width: $size valueif($important, !important, null);
}
}

View file

@ -0,0 +1,42 @@
//
// Symbol
//
@mixin symbol-size($size) {
> img {
width: $size;
height: $size;
}
.symbol-label {
width: $size;
height: $size;
}
&.symbol-fixed {
.symbol-label {
width: $size;
height: $size;
}
> img {
width: $size;
height: $size;
max-width: none;
}
}
// Ratios
&.symbol-2by3 {
.symbol-label {
height: $size;
width: $size * divide(3, 2);
}
> img {
height: $size;
width: $size * divide(3, 2);
max-width: none;
}
}
}

View file

@ -0,0 +1,43 @@
//
// Tooltip Mixin
//
@mixin tooltip-theme($bg-color, $color, $arrow-color) {
.tooltip-inner {
color: $color;
background-color: $bg-color;
}
// Arrows
&.bs-tooltip-top {
.tooltip-arrow {
&::before {
border-top-color: $arrow-color;
}
}
}
&.bs-tooltip-end {
.tooltip-arrow {
&::before {
border-right-color: $arrow-color;
}
}
}
&.bs-tooltip-bottom {
.tooltip-arrow {
&::before {
border-bottom-color: $arrow-color;
}
}
}
&.bs-tooltip-start {
.tooltip-arrow {
&::before {
border-left-color: $arrow-color;
}
}
}
}

View file

@ -0,0 +1,82 @@
//
// Stepper
//
// Base
.stepper {
// Content
[data-kt-stepper-element="info"],
[data-kt-stepper-element="content"] {
display: none;
&.current {
display: flex;
}
}
// Enable cursor pointer on clickable steppers
.stepper-item[data-kt-stepper-action="step"] {
cursor: pointer;
}
// States
& {
[data-kt-stepper-action="previous"] {
display: none;
}
[data-kt-stepper-action="next"] {
display: inline-block;
}
[data-kt-stepper-action="submit"] {
display: none;
}
}
&.first {
[data-kt-stepper-action="previous"] {
display: none;
}
[data-kt-stepper-action="next"] {
display: inline-block;
}
[data-kt-stepper-action="submit"] {
display: none;
}
}
&.between {
[data-kt-stepper-action="previous"] {
display: inline-block;
}
[data-kt-stepper-action="next"] {
display: inline-block;
}
[data-kt-stepper-action="submit"] {
display: none;
}
}
&.last {
[data-kt-stepper-action="previous"] {
display: inline-block;
}
[data-kt-stepper-action="next"] {
display: none;
}
[data-kt-stepper-action="submit"] {
display: inline-block;
}
[data-kt-stepper-action="submit"].btn-flex {
display: flex;
}
}
}

View file

@ -0,0 +1,56 @@
//
// Stepper Links
//
// Base
.stepper.stepper-links {
.stepper-nav {
display: flex;
margin: 0 auto;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.stepper-item {
position: relative;
flex-shrink: 0;
margin: 1rem 1.5rem;
&:after {
content: " ";
position: absolute;
top: 2.3rem;
left: 0;
height: 2px;
width: 100%;
background-color: transparent;
transition: $transition-link;
}
.stepper-title {
color: $dark;
font-weight: 600;
font-size: 1.25rem;
}
// Current
&.current {
transition: $transition-link;
.stepper-title {
color: $primary;
}
&:after {
background-color: $primary;
}
}
&.completed {
.stepper-title {
color: $gray-400;
}
}
}
}
}

View file

@ -0,0 +1,172 @@
//
// Stepper Pills
//
// Base
.stepper.stepper-pills {
$pills-size: 40px;
// Nav
.stepper-nav {
display: flex;
}
// Item
.stepper-item {
display: flex;
align-items: center;
transition: $transition-link;
// Icon
.stepper-icon {
display: flex;
align-items: center;
justify-content: center;
transition: $transition-link;
width: $pills-size;
height: $pills-size;
border-radius: $border-radius;
background-color: $primary-light;
margin-right: 1.5rem;
.stepper-check {
display: none;
font-size: 1rem;
}
.stepper-number {
font-weight: $font-weight-bolder;
color: $primary !important;
font-size: 1.25rem;
}
}
// Label
.stepper-label {
display: flex;
flex-direction: column;
justify-content: center;
.stepper-title {
color: $gray-800;
font-weight: 600;
font-size: 1.25rem;
margin-bottom: .3rem;
}
.stepper-desc {
color: $text-muted;
}
}
// Current
&.current {
transition: $transition-link;
.stepper-icon {
transition: $transition-link;
background-color: $primary;
.stepper-check {
color: $primary;
display: none;
}
.stepper-number {
color: $white !important;
font-size: 1.35rem;
}
}
.stepper-label {
.stepper-title {
color: $gray-600;
}
.stepper-desc {
color: $gray-400;
}
}
}
// Completed
&.current:last-child,
&.completed {
.stepper-icon {
transition: $transition-link;
background-color: $primary-light;
.stepper-check {
color: $primary !important;
display: inline-block;
}
.stepper-number {
display: none;
}
}
.stepper-label {
.stepper-title {
color: $text-muted;
}
.stepper-desc {
color: $gray-400;
}
}
}
}
// Column
&.stepper-column {
// Nav
.stepper-nav {
flex-direction: column;
}
// Item
.stepper-item {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 2.5rem;
}
// Icon
.stepper-icon {
z-index: 1;
}
// Line
.stepper-line {
display: block;
content: " ";
justify-content: center;
position: absolute;
z-index: 0;
left: 0;
top:0;
bottom: 0;
width: $pills-size;
transform: translate(50%);
border-left-width: 1px;
border-left-style: dashed;
border-left-color: $gray-300;
}
// First item
.stepper-item:first-child {
.stepper-line {
top: 50%;
}
}
// Last item
.stepper-item:last-child {
.stepper-line {
bottom: 50%;
}
}
}
}

View file

@ -0,0 +1,48 @@
html {
font-family: sans-serif;
text-size-adjust: 100%;
}
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
font-size: $root-font-size !important;
font-weight: $font-weight-base;
font-family: $font-family-sans-serif;
// Tablet mode
@include media-breakpoint-down(lg) {
font-size: $root-font-size-lg !important;
}
// Mobile mode
@include media-breakpoint-down(md) {
font-size: $root-font-size-md !important;
}
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
a:hover,
a:active,
a:focus {
text-decoration: none !important;
}
}
body {
display: flex;
flex-direction: column;
color: $body-color;
}
// Angular integration
router-outlet {
display: none;
}
canvas {
user-select: none;
}

View file

@ -0,0 +1,25 @@
//
// Container
//
// General mode
.app-container {
}
// Desktop mode
@include media-breakpoint-up(lg) {
.app-container {
padding-left: $app-container-padding-x !important;
padding-right: $app-container-padding-x !important;
}
}
// Tablet & mobile modes
@include media-breakpoint-down(lg) {
.app-container {
max-width: none;
padding-left: $app-container-padding-x-mobile !important;
padding-right: $app-container-padding-x-mobile !important;
}
}

Some files were not shown because too many files have changed in this diff Show more