@hitsoft/e-donusum 1.0.8 → 1.0.9

package/assets/sass/core/components/_card.scss

@@ -0,0 +1,317 @@
+//
+// Card
+//
+
+// Base
+.card {    
+    --#{$prefix}card-box-shadow: var(--#{$prefix}root-card-box-shadow);
+    --#{$prefix}card-border-color: var(--#{$prefix}root-card-border-color);
+
+    @if ($card-border-enabled)  {
+        border: $card-border-width $card-border-style var(--#{$prefix}card-border-color);
+    } @else {
+        border: 0;
+    }  
+
+    // Header
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: stretch;
+        flex-wrap: wrap;
+        min-height: $card-header-height;
+        padding: 0 $card-px;
+        color: var(--#{$prefix}card-cap-color);
+        background-color: var(--#{$prefix}card-cap-bg);
+        border-bottom: $card-border-width $card-border-style var(--#{$prefix}card-border-color);
+
+        // Title
+        .card-title {
+            display: flex;
+            align-items: center;
+            margin: $card-header-py;
+            margin-left: 0;
+
+            &.flex-column {
+                align-items: flex-start;
+                justify-content: center;
+            }
+
+            .card-icon {
+                margin-right: 0.75rem;
+                line-height: 0;
+
+                i {
+                    font-size: 1.25rem;
+                    color: var(--#{$prefix}gray-600);
+                    line-height: 0;
+
+                    &:after,
+                    &:before {
+                        line-height: 0;
+                    }
+                }
+
+                .svg-icon {
+                    color: var(--#{$prefix}gray-600);
+                    @include svg-icon-size(24px);
+                }
+            }
+
+            &,
+            .card-label {
+                font-weight: 500;
+                font-size: 1.275rem;
+                color: var(--#{$prefix}text-gray-900);
+            }
+
+            .card-label {
+                margin: 0 0.75rem 0 0;
+                flex-wrap: wrap;
+            }
+
+            // Description
+            small {
+                color: var(--#{$prefix}text-muted);
+                font-size: 1rem;
+            }
+
+            // Headings
+            h1, h2, h3, h4, h5, h6 {
+                margin-bottom: 0;
+            }
+        }
+
+        // Toolbar
+        .card-toolbar {
+            display: flex;
+            align-items: center;
+            margin: $card-header-py 0;
+            flex-wrap: wrap;
+        }
+    }
+
+    // Body
+    .card-body {
+        padding: $card-py $card-px;
+        color: var(--#{$prefix}card-color);
+    }
+
+    // Footer
+    .card-footer {
+        padding: $card-py $card-px;
+        color: var(--#{$prefix}card-cap-color);
+        background-color: var(--#{$prefix}card-cap-bg);
+        border-top: $card-border-width $card-border-style var(--#{$prefix}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 !important;
+        }
+
+        > .card-footer {
+            border-top: 0 !important;
+        }
+    }
+    
+    // Enable shadow
+    &.card-shadow {
+        box-shadow: var(--#{$prefix}card-box-shadow);
+        border: 0;
+    }
+
+    // Reset styles
+    &.card-reset {
+        border: 0 !important;
+        box-shadow: none !important;
+        background-color: transparent !important;
+
+        > .card-header {
+            border-bottom: 0 !important;
+        }
+
+        > .card-footer {
+            border-top: 0 !important;
+        }
+    }
+
+    // Reset borders
+    &.card-borderless {
+        border: 0 !important;
+
+        > .card-header {
+            border-bottom: 0 !important;
+        }
+
+        > .card-footer {
+            border-top: 0 !important;
+        }
+    }
+
+    // Reset borders
+    &.card-border-0 {
+        border: 0 !important;
+    }
+}
+
+// Responsive stretch heights
+.card {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+    	@include media-breakpoint-up($breakpoint) {
+    		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            // Stretch
+            &.card#{$infix}-stretch {
+                height: calc(100% - var(--#{$prefix}gutter-y));
+            }
+
+            // Stretch 75
+            &.card#{$infix}-stretch-75 {
+                height: calc(75% - var(--#{$prefix}gutter-y));
+            }
+
+            // Stretch 50
+            &.card#{$infix}-stretch-50 {
+                height: calc(50% - var(--#{$prefix}gutter-y));
+            }
+
+             // Stretch 33
+            &.card#{$infix}-stretch-33 {
+                height: calc(33.333% - var(--#{$prefix}gutter-y));
+            }
+
+            // Stretch 25
+            &.card#{$infix}-stretch-25 {
+                height: calc(25% - var(--#{$prefix}gutter-y));
+            }
+
+            // Header stretch
+            .card-header#{$infix}-stretch {
+                padding-top: 0 !important;
+                padding-bottom: 0 !important;
+                align-items: stretch;
+    
+                .card-toolbar {
+                    margin: 0;
+                    align-items: stretch;
+                }
+            }
+        }
+    }
+}
+
+// Utilities
+.card-p {
+    padding: $card-py $card-px !important;
+}
+
+.card-px {
+    padding-left: $card-px !important;
+    padding-right: $card-px !important;
+}
+
+.card-shadow {
+    box-shadow: var(--#{$prefix}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;
+        }
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .card {
+            --#{$prefix}card-box-shadow: #{$card-box-shadow-dark};
+        }
+    }
+}

package/assets/sass/core/components/_carousel.scss

@@ -0,0 +1,130 @@
+//
+// Carousel
+//
+
+
+.carousel-custom {
+    // Indicators
+    .carousel-indicators {
+        align-items: center;
+        position: static;
+        z-index: auto;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li {
+            transform: none;
+            opacity: 1;
+
+            &.active {
+                transform: none;
+                opacity: 1;
+            }
+        }
+
+        // Dots style
+        &.carousel-indicators-dots {
+            li {
+                border-radius: 0;
+                background-color: transparent !important;
+                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 !important;
+                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: var(--#{$prefix}#{$name}) !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%;
+        }
+    }   
+}

package/assets/sass/core/components/_code.scss

@@ -0,0 +1,24 @@
+//
+// Code
+//
+
+code:not([class*="language-"]) {
+    font-weight: $code-font-weight;
+    color: var(--#{$prefix}code-color);
+    border: 1px solid var(--#{$prefix}code-border-color);
+    background-color: var(--#{$prefix}code-bg);
+    @include border-radius($code-border-radius);
+    line-height: inherit;
+    font-size: $code-font-size;
+    padding: $code-padding;
+    margin: $code-margin;        
+    box-shadow: $code-shadow;
+
+    @each $name, $value in $theme-colors {
+        &.code-#{$name} {
+            color: var(--#{$prefix}#{$name});
+            background-color: var(--#{$prefix}#{$name}-light);
+            border: 1px solid var(--#{$prefix}#{$name});
+        }
+    }
+}

package/assets/sass/core/components/_cookiealert.scss

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

package/assets/sass/core/components/_drawer.scss

@@ -0,0 +1,78 @@
+//
+// Drawer
+//
+
+// Drawer
+.drawer {
+	display: flex !important;
+	overflow: auto;
+	z-index: $drawer-z-index;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	background-color: var(--#{$prefix}drawer-bg-color);
+	transition: transform $drawer-transition-speed ease-in-out !important;
+
+	&.drawer-start {
+		left: 0;
+		transform: translateX(-100%);
+	}
+
+	&.drawer-end {
+		right: 0;
+		transform: translateX(100%);
+	}
+
+	&.drawer-bottom {
+		bottom: 0;
+		top: auto;
+		left: 0;
+		right: 0;
+		transform: translateY(100%);
+	}
+
+	&.drawer-top {
+		top: 0;
+		bottom: auto;
+		left: 0;
+		right: 0;
+		transform: translateY(-100%);
+	}
+
+	&.drawer-on {
+		transform: none;
+		box-shadow: var(--#{$prefix}drawer-box-shadow);
+		transition: transform $drawer-transition-speed ease-in-out !important;
+	}
+}
+
+// Drawer Overlay
+.drawer-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	overflow: hidden;
+	z-index: $drawer-z-index - 1;
+	background-color: var(--#{$prefix}drawer-overlay-bg-color);
+	animation: animation-drawer-fade-in $drawer-overlay-animation-speed ease-in-out 1;
+}
+
+// Initial state
+[data-kt-drawer="true"] {
+	display: none;
+}
+
+// Animation
+@keyframes animation-drawer-fade-in {
+	from   { opacity: 0; }
+	to { opacity: 1; }
+}
+
+// Tablet & Mobile Modes
+@include media-breakpoint-down(lg) {
+	body[data-kt-drawer="on"] {
+		overflow: hidden;
+	}
+}

package/assets/sass/core/components/_dropdown.scss

@@ -0,0 +1,12 @@
+
+//
+// Dropdown
+//
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .dropdown-menu {
+            @include box-shadow($dropdown-box-shadow-dark);
+        }
+    }
+}

package/assets/sass/core/components/_engage.scss

@@ -0,0 +1,118 @@
+//
+// Engage panel(used for demo product demo)
+//
+
+.app-engage {
+	position: fixed;
+	right: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	z-index: $engage-z-index;
+	padding-right: 12px;
+
+	.app-engage-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		box-shadow: var(--#{$prefix}engage-btn-box-shadow);
+		border-width: 1px;
+		border-style: solid;
+		font-size: 12px;
+		font-weight: $font-weight-bold;
+		margin-bottom: 8px;
+		@include border-radius(6px);
+		width: 66px;
+		height: 70px;
+
+		@include button-custom-variant(
+			$color: var(--#{$prefix}engage-btn-color), 
+			$icon-color: var(--#{$prefix}engage-btn-icon-color), 
+			$border-color: var(--#{$prefix}engage-btn-border-color), 
+			$bg-color: var(--#{$prefix}engage-btn-bg), 
+			$color-active: null, 
+			$icon-color-active: null, 
+			$border-color-active: null,
+			$bg-color-active: null
+		);
+
+		&.hover-dark:hover {
+			color: var(--#{$prefix}dark-inverse);
+			border-color: var(--#{$prefix}dark);
+			background-color: var(--#{$prefix}dark);
+
+			i,
+			.svg-icon {
+				color: var(--#{$prefix}dark-inverse);
+			}
+		}
+
+		&.hover-primary:hover {
+			color: var(--#{$prefix}primary-inverse);
+			border-color: var(--#{$prefix}primary);
+			background-color: var(--#{$prefix}primary);
+
+			i,
+			.svg-icon {
+				color: var(--#{$prefix}primary-inverse);
+			}
+		}
+
+		&.hover-success:hover {
+			color: var(--#{$prefix}success-inverse);
+			border-color: var(--#{$prefix}success);
+			background-color: var(--#{$prefix}success);
+
+			i,
+			.svg-icon {
+				color: var(--#{$prefix}success-inverse);
+			}
+		}
+
+		&.app-engage-btn-toggle-off {
+			width: 35px;
+			height: 35px;
+		}
+
+		&.app-engage-btn-toggle-on {
+			width: 35px;
+			height: 35px;
+			display: none;
+		}
+	}
+
+	&.app-engage-hide {
+		.app-engage-btn {
+			visibility: hidden;
+
+			&.app-engage-btn-toggle-off {
+				display: none;
+			}
+
+			&.app-engage-btn-toggle-on {
+				visibility: visible;
+				display: flex;
+			}
+		}		
+	}
+}
+
+.engage-btn {
+	display: flex;
+	align-items: center;
+	height: 35px !important;
+
+	@include button-custom-variant(
+		$color: var(--#{$prefix}engage-btn-color), 
+		$icon-color: var(--#{$prefix}engage-btn-color), 
+		$border-color: var(--#{$prefix}engage-btn-bg), 
+		$bg-color: var(--#{$prefix}engage-btn-bg), 
+		$color-active: var(--#{$prefix}engage-btn-color-active), 
+		$icon-color-active: var(--#{$prefix}engage-btn-color-active), 
+		$border-color-active: var(--#{$prefix}engage-btn-bg),
+		$bg-color-active: var(--#{$prefix}engage-btn-bg)
+	);
+}