upgade package
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
//
|
||||
// Secondary button
|
||||
//
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
.btn.btn-secondary {
|
||||
@include button-custom-variant(
|
||||
$color: null,
|
||||
$icon-color: var(--#{$prefix}gray-600),
|
||||
$border-color: null,
|
||||
$bg-color: var(--#{$prefix}gray-200),
|
||||
$color-active: null,
|
||||
$icon-color-active: var(--#{$prefix}primary),
|
||||
$border-color-active: null,
|
||||
$bg-color-active: var(--#{$prefix}gray-300),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@include color-mode(dark) {
|
||||
// Secondary button
|
||||
.btn.btn-secondary {
|
||||
@include button-custom-variant(
|
||||
$color: null,
|
||||
$icon-color: #878794,
|
||||
$border-color: null,
|
||||
$bg-color: #1A1A1A,
|
||||
$color-active: null,
|
||||
$icon-color-active: null,
|
||||
$border-color-active: null,
|
||||
$bg-color-active: #1A1A1A,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
//
|
||||
// Landing elements
|
||||
//
|
||||
|
||||
// Variables
|
||||
$landing-dark-color: #13263C;
|
||||
$landing-header-height: 100px;
|
||||
$landing-header-height-tablet-and-mobile: 70px;
|
||||
$landing-header-sticky-height: 70px;
|
||||
$landing-header-sticky-height-tablet-and-mobile: 70px;
|
||||
|
||||
// Utility classes
|
||||
.landing-dark-bg {
|
||||
background-color: $landing-dark-color;
|
||||
}
|
||||
|
||||
.landing-dark-color {
|
||||
color: $landing-dark-color;
|
||||
}
|
||||
|
||||
.landing-dark-border {
|
||||
border:1px dashed #2C3F5B;
|
||||
}
|
||||
|
||||
.landing-dark-separator {
|
||||
border-top:1px dashed #2C3F5B;
|
||||
}
|
||||
|
||||
.landing-curve {
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
top: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Landing header
|
||||
.landing-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $landing-header-height;
|
||||
|
||||
// Logos
|
||||
.logo-default {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-sticky {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Menu
|
||||
.menu {
|
||||
// Menu link
|
||||
.menu-link {
|
||||
&.active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Header menu sticky mode
|
||||
[data-kt-sticky-landing-header="on"] & {
|
||||
// Menu link
|
||||
.menu-link {
|
||||
&.active {
|
||||
color: $primary;
|
||||
background-color: rgba(#EFF2F5, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sticky header modes
|
||||
[data-kt-sticky-landing-header="on"] & {
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background-color: $white;
|
||||
box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
|
||||
height: $landing-header-sticky-height;
|
||||
|
||||
// Logos
|
||||
.logo-sticky {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-default {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix body padding top when Landing sticky header is on
|
||||
body[data-kt-sticky-landing-header="on"] {
|
||||
padding-top: $landing-header-height;
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
// Landing header
|
||||
.landing-header {
|
||||
height: $landing-header-height-tablet-and-mobile;
|
||||
|
||||
// Menu wrapper
|
||||
.landing-menu-wrapper {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Sticky header modes
|
||||
[data-kt-sticky-landing-header="on"] & {
|
||||
height: $landing-header-sticky-height-tablet-and-mobile;
|
||||
}
|
||||
|
||||
// Menu
|
||||
.menu {
|
||||
// Menu link
|
||||
.menu-link {
|
||||
&.active {
|
||||
color: $primary;
|
||||
background-color: rgba(#EFF2F5, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix body padding top when Landing sticky header is on
|
||||
body[data-kt-sticky-landing-header="on"] {
|
||||
padding-top: $landing-header-height-tablet-and-mobile;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
//
|
||||
// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
|
||||
// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss
|
||||
// are not accessible in this file but you can override any global variable as shown below:
|
||||
//
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
|
||||
// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss
|
||||
// are not accessible in this file but you can override any global variable as shown below:
|
||||
//
|
||||
|
||||
// Body bg
|
||||
$body-bg-dark: $coal-100;
|
||||
|
||||
// Card
|
||||
$card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
|
||||
$card-box-shadow-dark: none;
|
||||
$card-border-enabled: true;
|
||||
$card-border-color: $gray-200;
|
||||
$card-border-color-dark: $dark-light-dark;
|
||||
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "stepper/multistep";
|
||||
@import "landing";
|
||||
@import "btn-secondary";
|
||||
@@ -0,0 +1,42 @@
|
||||
//
|
||||
// Multistep stepper
|
||||
//
|
||||
|
||||
// Custom
|
||||
.stepper.stepper-pills.stepper-multistep {
|
||||
--#{$prefix}stepper-pills-size: 46px;
|
||||
--#{$prefix}stepper-icon-border-radius: 9px;
|
||||
--#{$prefix}stepper-icon-check-size: 1.25rem;
|
||||
|
||||
--#{$prefix}stepper-icon-bg-color: rgba(255, 255, 255, 0.03);
|
||||
--#{$prefix}stepper-icon-bg-color-current: var(--#{$prefix}success);
|
||||
--#{$prefix}stepper-icon-bg-color-completed: rgba(255, 255, 255, 0.03);
|
||||
|
||||
--#{$prefix}stepper-icon-border: 1px dashed rgba(255, 255, 255, 0.3);
|
||||
--#{$prefix}stepper-icon-border-current: 0;
|
||||
--#{$prefix}stepper-icon-border-completed: 1px dashed rgba(255, 255, 255, 0.3);
|
||||
|
||||
--#{$prefix}stepper-icon-number-color: var(--#{$prefix}white);
|
||||
--#{$prefix}stepper-icon-number-color-current: var(--#{$prefix}white);
|
||||
--#{$prefix}stepper-icon-number-color-completed: var(--#{$prefix}white);
|
||||
|
||||
--#{$prefix}stepper-icon-check-color-completed: var(--#{$prefix}success);
|
||||
|
||||
--#{$prefix}stepper-label-title-opacity: 0.7;
|
||||
--#{$prefix}stepper-label-title-opacity-current: 1;
|
||||
--#{$prefix}stepper-label-title-opacity-completed: 1;
|
||||
|
||||
--#{$prefix}stepper-label-title-color: var(--#{$prefix}white);
|
||||
--#{$prefix}stepper-label-title-color-current: var(--#{$prefix}white);
|
||||
--#{$prefix}stepper-label-title-color-completed: var(--#{$prefix}white);
|
||||
|
||||
--#{$prefix}stepper-label-desc-opacity: 0.7;
|
||||
--#{$prefix}stepper-label-desc-opacity-current: 0.7;
|
||||
--#{$prefix}stepper-label-desc-opacity-completed: 0.7;
|
||||
|
||||
--#{$prefix}stepper-label-desc-color: var(--#{$prefix}white);
|
||||
--#{$prefix}stepper-label-desc-color-current: var(--#{$prefix}white);
|
||||
--#{$prefix}stepper-label-desc-color-completed: var(--#{$prefix}white);
|
||||
|
||||
--#{$prefix}stepper-line-border: 1px dashed rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
Reference in New Issue
Block a user