first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,186 @@
|
||||
//
|
||||
// accordion.scss
|
||||
//
|
||||
|
||||
.accordion {
|
||||
.accordion-button {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
&.accordion-icon-none {
|
||||
.accordion-button {
|
||||
&::after {
|
||||
content: "";
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
&::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion with icon
|
||||
.custom-accordionwithicon {
|
||||
.accordion-button {
|
||||
&::after {
|
||||
background-image: none !important;
|
||||
font-family: "Material Design Icons";
|
||||
content: "\F0142";
|
||||
font-size: 1.1rem;
|
||||
vertical-align: middle;
|
||||
line-height: 0.8;
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
&::after {
|
||||
background-image: none !important;
|
||||
content: "\F0140";
|
||||
margin-right: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion with plus icon
|
||||
|
||||
.custom-accordionwithicon-plus {
|
||||
.accordion-button {
|
||||
&::after {
|
||||
background-image: none !important;
|
||||
font-family: "Material Design Icons";
|
||||
content: "\F0415";
|
||||
font-size: 1.1rem;
|
||||
vertical-align: middle;
|
||||
line-height: 0.8;
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
&::after {
|
||||
background-image: none !important;
|
||||
content: "\F0374";
|
||||
margin-right: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// left Icon accordion
|
||||
|
||||
.lefticon-accordion {
|
||||
.accordion-button {
|
||||
padding-left: 2.75rem;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: $accordion-button-padding-x;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
&::after {
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// border accordion
|
||||
|
||||
.accordion-border-box {
|
||||
.accordion-item {
|
||||
border-top: $accordion-border-width solid $accordion-border-color;
|
||||
border-radius: $accordion-border-radius;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
border-radius: $accordion-border-radius;
|
||||
|
||||
&:not(.collapsed) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-accordion-border {
|
||||
.accordion-item {
|
||||
border-left: 3px solid $accordion-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
//accordion Color
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.accordion-#{$color} {
|
||||
.accordion-item {
|
||||
border-color: rgba($value, 0.6);
|
||||
|
||||
.accordion-button {
|
||||
box-shadow: none;
|
||||
|
||||
&:not(.collapsed) {
|
||||
color: $value;
|
||||
background-color: rgba($value, 0.1) !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-fill-#{$color} {
|
||||
.accordion-item {
|
||||
.accordion-button {
|
||||
box-shadow: none;
|
||||
|
||||
&:not(.collapsed) {
|
||||
color: $white;
|
||||
background-color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// theme dark
|
||||
|
||||
[data-bs-theme="dark"]{
|
||||
.accordion-button {
|
||||
&:not(.collapsed) {
|
||||
color: var(--#{$prefix}accordion-button-active-color);
|
||||
&:after{
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$white}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>"));
|
||||
}
|
||||
}
|
||||
|
||||
&:after{
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$gray-500}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// rtl
|
||||
[dir="rtl"]{
|
||||
.custom-accordionwithicon {
|
||||
.accordion-button::after{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
//
|
||||
// alerts.scss
|
||||
//
|
||||
|
||||
// alert solid
|
||||
|
||||
.alert-solid {
|
||||
.alert-link {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// alert outline
|
||||
|
||||
.alert-outline {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
// alert borderless
|
||||
|
||||
.alert-borderless {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// alert-label-icon
|
||||
|
||||
.alert-label-icon {
|
||||
position: relative;
|
||||
padding-left: 60px;
|
||||
border: 0;
|
||||
|
||||
.label-icon {
|
||||
position: absolute;
|
||||
width: 45px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba($white, 0.15);
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// label arrow
|
||||
&.label-arrow {
|
||||
overflow: hidden;
|
||||
.label-icon {
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 6px solid transparent;
|
||||
border-left-color: $primary;
|
||||
right: -12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alert border left example
|
||||
|
||||
.alert-border-left {
|
||||
border-left: 3px solid;
|
||||
}
|
||||
|
||||
// alert top border example
|
||||
|
||||
.alert-top-border {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
border-color: var(--#{$prefix}border-color-translucent);
|
||||
border-top: 2px solid;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
//alert additional example
|
||||
|
||||
.alert-additional {
|
||||
padding: 0;
|
||||
|
||||
.alert-body{
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
}
|
||||
.alert-content {
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
border-bottom-left-radius: $alert-border-radius;
|
||||
border-bottom-right-radius: $alert-border-radius;
|
||||
margin: 0 (-$alert-border-width) (-$alert-border-width) (-$alert-border-width);
|
||||
}
|
||||
}
|
||||
|
||||
// rounded label example
|
||||
|
||||
.rounded-label {
|
||||
.label-icon {
|
||||
width: 45px;
|
||||
height: 26px;
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 0 30px 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Alert example loop
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
// alert solid
|
||||
.alert-solid {
|
||||
&.alert-#{$color} {
|
||||
--#{$prefix}alert-bg: #{$value};
|
||||
--#{$prefix}alert-color: #{set-color-from-background($value)};
|
||||
--#{$prefix}alert-border-color: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
// alert outline
|
||||
.alert-outline {
|
||||
&.alert-#{$color} {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// alert border left
|
||||
.alert-border-left {
|
||||
&.alert-#{$color} {
|
||||
border-left-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// alert top border
|
||||
.alert-top-border {
|
||||
&.alert-#{$color} {
|
||||
border-top-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// rounded label
|
||||
.rounded-label {
|
||||
&.alert-#{$color} {
|
||||
.label-icon {
|
||||
background-color: $value;
|
||||
color: set-color-from-background($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// label arrow
|
||||
|
||||
.label-arrow {
|
||||
&.alert-#{$color} {
|
||||
.label-icon {
|
||||
color: set-color-from-background($value);
|
||||
background-color: $value;
|
||||
&:after {
|
||||
border-left-color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .alert{
|
||||
// &.alert-#{$color} {
|
||||
// .btn-close::after{
|
||||
// color: $value;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
//alert additional example
|
||||
.alert-additional {
|
||||
&.alert-#{$color} {
|
||||
.alert-content {
|
||||
background-color: $value;
|
||||
color: set-color-from-background($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.alert-dismissible {
|
||||
.btn-close {
|
||||
background: transparent !important;
|
||||
&::after {
|
||||
background: transparent !important;
|
||||
content: "\F0156" !important;
|
||||
font-size: 18px;
|
||||
line-height:15px;
|
||||
font-family: "Material Design Icons" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-outline.alert-dark{
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
.alert-border-left.alert-dark{
|
||||
border-color: var(--#{$prefix}dark);
|
||||
}
|
||||
|
||||
.alert-border-left.alert-light{
|
||||
border-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
.alert-top-border.alert-light {
|
||||
border-top-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
.alert-top-border.alert-dark {
|
||||
border-top-color: var(--#{$prefix}dark);
|
||||
}
|
||||
|
||||
.alert-modern{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.icons {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
opacity: 0.08;
|
||||
font-size: 60px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
//
|
||||
// avatar.scss
|
||||
//
|
||||
|
||||
.avatar-xxs {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.avatar-xs {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.avatar-md {
|
||||
height: 4.5rem;
|
||||
width: 4.5rem;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.avatar-xl {
|
||||
height: 7.5rem;
|
||||
width: 7.5rem;
|
||||
}
|
||||
|
||||
.avatar-title {
|
||||
align-items: center;
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
display: flex;
|
||||
font-weight: $font-weight-medium;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// avatar group
|
||||
.avatar-group {
|
||||
padding-left: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.avatar-group-item {
|
||||
margin-left: -12px;
|
||||
border: 2px solid var(--#{$prefix}card-bg-custom);
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
position: relative;
|
||||
transform: translateY(-2px);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
//
|
||||
// backgrounds.scss
|
||||
//
|
||||
@@ -0,0 +1,93 @@
|
||||
//
|
||||
// badge.scss
|
||||
//
|
||||
|
||||
// Soft badge
|
||||
@mixin badge-variant-soft($bg) {
|
||||
color: $bg;
|
||||
background-color: rgba($bg, 0.1);
|
||||
}
|
||||
|
||||
|
||||
// Outline badge
|
||||
@mixin badge-variant-outline($bg) {
|
||||
color: $bg;
|
||||
border: 1px solid $bg;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge-outline-#{$color} {
|
||||
@include badge-variant-outline($value);
|
||||
}
|
||||
}
|
||||
|
||||
// badge outline
|
||||
|
||||
.badge-outline {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge-soft-#{$color} {
|
||||
@include badge-variant-soft($value);
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
&.badge-#{$color} {
|
||||
@include badge-variant-outline($value);
|
||||
}
|
||||
}
|
||||
|
||||
.badge-label {
|
||||
&.bg-#{$color} {
|
||||
&:before {
|
||||
border-right-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// badge-border
|
||||
|
||||
.badge-border {
|
||||
border-left: 2px solid;
|
||||
}
|
||||
|
||||
// badge-label
|
||||
|
||||
.badge-label {
|
||||
margin-left: 8px;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 8px solid transparent;
|
||||
border-right-color: $primary;
|
||||
left: -14px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//Badge Gradient Style
|
||||
$gradients: ();
|
||||
$gradients: map-merge((primary: linear-gradient(135deg, $primary 0%, $success 100%),
|
||||
secondary: linear-gradient(135deg, $secondary 0%, $info 100%),
|
||||
success: linear-gradient(135deg, $success 0%, $warning 100%),
|
||||
danger: linear-gradient(135deg, $danger 0%, $secondary 100%),
|
||||
warning: linear-gradient(135deg, $warning 0%, darken($warning, 15%) 100%),
|
||||
info: linear-gradient(135deg, $info 0%, $success 100%),
|
||||
dark: linear-gradient(135deg, $dark 0%, $primary 100%)),
|
||||
$gradients);
|
||||
|
||||
@mixin badge-gradient($parent, $gradient) {
|
||||
#{$parent} {
|
||||
background: $gradient;
|
||||
}
|
||||
}
|
||||
|
||||
@each $gradient,
|
||||
$value in $gradients {
|
||||
@include badge-gradient(".badge-gradient-#{$gradient}", $value);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
//
|
||||
// breadcrumb.scss
|
||||
//
|
||||
|
||||
// Breadcrumb item arrow
|
||||
.breadcrumb-item {
|
||||
>a {
|
||||
color: var(--#{$prefix}breadcrumb-divider-color);
|
||||
}
|
||||
|
||||
+.breadcrumb-item {
|
||||
&::before {
|
||||
font-family: "Material Design Icons";
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-light {
|
||||
--#{$prefix}breadcrumb-divider-color: rgba(255, 255, 255, 0.75);
|
||||
--#{$prefix}breadcrumb-item-active-color: #{$white};
|
||||
}
|
||||
@@ -0,0 +1,415 @@
|
||||
//
|
||||
// _buttons.scss
|
||||
//
|
||||
|
||||
button,
|
||||
a {
|
||||
outline: none !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn {
|
||||
box-shadow: $element-shadow;
|
||||
|
||||
&.btn-hover {
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn.show,
|
||||
.btn:first-child:active,
|
||||
:not(.btn-check)+.btn:active {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
// Rounded Buttons
|
||||
.btn-rounded {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: calc(#{$btn-padding-y * 2} + #{$btn-line-height}em + #{$border-width * 2});
|
||||
width: calc(#{$btn-padding-y * 2} + #{$btn-line-height}em + #{$border-width * 2});
|
||||
padding: 0;
|
||||
|
||||
i,
|
||||
svg,
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
height: calc(#{$btn-padding-y-sm * 2} + #{$btn-line-height}em + #{$border-width * 2});
|
||||
width: calc(#{$btn-padding-y-sm * 2} + #{$btn-line-height}em + #{$border-width * 2});
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
height: calc(#{$btn-padding-y-lg * 2} + #{$btn-line-height}em + #{$border-width * 2});
|
||||
width: calc(#{$btn-padding-y-lg * 2} + #{$btn-line-height}em + #{$border-width * 2});
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Soft Buttons
|
||||
//
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.btn-soft-#{$color} {
|
||||
--#{$prefix}btn-color: #{$value};
|
||||
--#{$prefix}btn-bg: #{rgba($value, .1)};
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-hover-color: #{$white};
|
||||
--#{$prefix}btn-hover-bg: #{shade-color($value, 10%)};
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($value)};
|
||||
--#{$prefix}btn-active-color: var(--#{$prefix}btn-hover-color);
|
||||
--#{$prefix}btn-active-bg: #{shade-color($value, 20%)};
|
||||
--#{$prefix}btn-active-border-color: transparent;
|
||||
}
|
||||
|
||||
.btn-darken-#{$color} {
|
||||
--#{$prefix}btn-color: #{$white};
|
||||
--#{$prefix}btn-bg: #{darken($value, 10%)};
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-hover-color: #{$white};
|
||||
--#{$prefix}btn-hover-bg: #{darken($value, 13%)};
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($value)};
|
||||
--#{$prefix}btn-active-color: var(--#{$prefix}btn-hover-color);
|
||||
--#{$prefix}btn-active-bg: #{darken($value, 15%)};
|
||||
--#{$prefix}btn-active-border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Ghost Buttons
|
||||
//
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.btn-ghost-#{$color} {
|
||||
--#{$prefix}btn-color: #{$value};
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-hover-color: #{$value};
|
||||
--#{$prefix}btn-hover-bg: #{rgba($value, .1)};
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($value)};
|
||||
--#{$prefix}btn-active-color: #{$value};
|
||||
--#{$prefix}btn-active-bg: #{rgba($value, .1)};
|
||||
--#{$prefix}btn-active-border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
//button with icon
|
||||
.btn-label {
|
||||
position: relative;
|
||||
padding-left: 48px;
|
||||
|
||||
.label-icon {
|
||||
position: absolute;
|
||||
width: 40.69px;
|
||||
left: -$border-width;
|
||||
top: -$border-width;
|
||||
bottom: -$border-width;
|
||||
background-color: rgba($white, 0.1);
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.btn-light {
|
||||
.label-icon {
|
||||
background-color: rgba($dark, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
padding-left: $btn-padding-x;
|
||||
padding-right: 44px;
|
||||
|
||||
.label-icon {
|
||||
right: -$border-width;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animation Button
|
||||
|
||||
.btn-animation {
|
||||
overflow: hidden;
|
||||
transition: border-color 0.3s, background-color 0.3s;
|
||||
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
||||
|
||||
&::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 25%, 0);
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
>span {
|
||||
display: block;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
>span {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -25%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin button-variant($bg) {
|
||||
&.btn-animation {
|
||||
background-color: $bg;
|
||||
border-color: $bg;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
color: $bg;
|
||||
background-color: rgba($bg, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
//btn group
|
||||
.btn-group-vertical {
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// btn group radio
|
||||
.btn-group.radio {
|
||||
.btn {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-check:active+.btn-light,
|
||||
.btn-check:checked+.btn-light,
|
||||
.btn-light.active,
|
||||
.btn-light.dropdown-toggle.show,
|
||||
.btn-light:active {
|
||||
background-color: rgba($info, 0.2);
|
||||
color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
// theme dark
|
||||
[data-bs-theme="dark"] {
|
||||
|
||||
.btn-check:focus+.btn-light,
|
||||
.btn-check:focus+.btn-outline-light,
|
||||
.btn-check:focus+.btn-soft-light,
|
||||
.btn-soft-light:focus {
|
||||
color: var(--#{$prefix}dark);
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 0.75);
|
||||
border-color: rgba(var(--#{$prefix}light-rgb), 0.75);
|
||||
}
|
||||
|
||||
.btn-check:active+.btn-light,
|
||||
.btn-check:active+.btn-outline-light,
|
||||
.btn-check:active+.btn-soft-light,
|
||||
.btn-check:checked+.btn-light,
|
||||
.btn-check:checked+.btn-outline-light,
|
||||
.btn-check:checked+.btn-soft-light,
|
||||
.btn-light.active,
|
||||
.btn-light:active,
|
||||
.btn-outline-light.active,
|
||||
.btn-outline-light:active,
|
||||
.btn-soft-light.active,
|
||||
.btn-soft-light:active,
|
||||
.show>.btn-light.dropdown-toggle,
|
||||
.show>.btn-outline-light.dropdown-toggle,
|
||||
.show>.btn-soft-light.dropdown-toggle {
|
||||
color: var(--#{$prefix}light);
|
||||
// background-color: rgba(var(--#{$prefix}light-rgb), 0.75);
|
||||
// border-color: rgba(var(--#{$prefix}light-rgb), 0.75);
|
||||
}
|
||||
|
||||
.btn-check:focus+.btn-dark,
|
||||
.btn-check:focus+.btn-outline-dark,
|
||||
.btn-check:focus+.btn-soft-dark,
|
||||
.btn-soft-dark:focus {
|
||||
color: var(--#{$prefix}light);
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.75);
|
||||
border-color: rgba(var(--#{$prefix}dark-rgb), 0.75);
|
||||
}
|
||||
|
||||
.btn-check:active+.btn-dark,
|
||||
.btn-check:active+.btn-outline-dark,
|
||||
.btn-check:active+.btn-soft-dark,
|
||||
.btn-check:checked+.btn-dark,
|
||||
.btn-check:checked+.btn-outline-dark,
|
||||
.btn-check:checked+.btn-soft-dark,
|
||||
.btn-dark.active,
|
||||
.btn-dark:active,
|
||||
.btn-outline-dark.active,
|
||||
.btn-outline-dark:active,
|
||||
.btn-soft-dark.active,
|
||||
.btn-soft-dark:active,
|
||||
.show>.btn-dark.dropdown-toggle,
|
||||
.show>.btn-outline-dark.dropdown-toggle,
|
||||
.show>.btn-soft-dark.dropdown-toggle {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.75);
|
||||
border-color: rgba(var(--#{$prefix}dark-rgb), 0.75);
|
||||
}
|
||||
|
||||
// soft
|
||||
|
||||
.btn-soft-light {
|
||||
color: var(--#{$prefix}dark);
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 0.1);
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}dark);
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-soft-dark {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.1);
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: var(--#{$prefix}dark);
|
||||
}
|
||||
}
|
||||
|
||||
// ghost
|
||||
.btn-ghost-light {
|
||||
color: var(--#{$prefix}dark);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--#{$prefix}dark);
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-ghost-dark {
|
||||
color: var(--#{$prefix}body-color);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
// Animation
|
||||
.btn-dark.btn-animation{
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.1);
|
||||
border-color: rgba(var(--#{$prefix}dark-rgb), 0.1);
|
||||
&:hover {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.01);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-load {
|
||||
.spinner-border,
|
||||
.spinner-grow {
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-effect {
|
||||
display: inline-flex;
|
||||
padding-bottom: 3px;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $primary;
|
||||
transform: translateX(-100%);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Border Bottom Buttons Style
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
|
||||
.btn-#{$color},
|
||||
.btn-outline-#{$color},
|
||||
.btn-soft-#{$color} {
|
||||
&.btn-border {
|
||||
border-bottom: 2px solid darken($value, 8%);
|
||||
}
|
||||
}
|
||||
.link-effect{
|
||||
&.link-#{$color} {
|
||||
&::before {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//custom toggle
|
||||
.custom-toggle {
|
||||
.icon-off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.icon-on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-off {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
//
|
||||
// _card.scss
|
||||
//
|
||||
|
||||
.card {
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
}
|
||||
|
||||
//Card Header Dropdown
|
||||
.card-header-dropdown {
|
||||
.dropdown-btn {
|
||||
padding: $card-cap-padding-y 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: 1px solid $card-border-color;
|
||||
}
|
||||
|
||||
.card-drop {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
margin: 0 0 7px 0;
|
||||
}
|
||||
|
||||
.card-title-desc {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card-height-100 {
|
||||
height: calc(100% - #{$grid-gutter-width});
|
||||
}
|
||||
|
||||
.card-animate{
|
||||
transition: all 0.4s;
|
||||
|
||||
&:hover{
|
||||
transform: translateY(calc(#{-$grid-gutter-width} / 5));
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// card color variant
|
||||
|
||||
@mixin card-variant($bg) {
|
||||
color: $white;
|
||||
background-color: $bg;
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.card-#{$color} {
|
||||
@include card-variant($value);
|
||||
|
||||
.card-header, .card-footer {
|
||||
background-color: rgba($white, 0.1);
|
||||
color: $white;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.card-border-#{$color} {
|
||||
border-color: $value !important;
|
||||
.card-header, .card-footer {
|
||||
border-color: $value;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.card-light{
|
||||
background-color: var(--#{$prefix}light);
|
||||
.card-header, .card-footer{
|
||||
color: var(--#{$prefix}body-color) !important;
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.1);
|
||||
}
|
||||
.card-title, .card-text {
|
||||
color: var(--#{$prefix}body-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.stretched-link {
|
||||
position: static;
|
||||
}
|
||||
|
||||
|
||||
// Loader
|
||||
|
||||
.card-preloader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 0.6);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.card-status {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%)!important;
|
||||
}
|
||||
|
||||
.custom-loader {
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
.card-overlay{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:before {
|
||||
content: "";
|
||||
background-color: rgba($primary, 0.7);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.card-header, .card-footer {
|
||||
border-color: rgba($white, 0.15) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-toolbar-menu {
|
||||
line-height: 0.8;
|
||||
a {
|
||||
font-size: 17px;
|
||||
}
|
||||
.minimize-card {
|
||||
.plus{
|
||||
display: none;
|
||||
}
|
||||
.minus {
|
||||
display: block;
|
||||
}
|
||||
&.collapsed{
|
||||
.plus{
|
||||
display: block;
|
||||
}
|
||||
.minus {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
//
|
||||
// _demos.scss
|
||||
//
|
||||
|
||||
// Buttons demo
|
||||
.button-items {
|
||||
margin-left: -8px;
|
||||
margin-bottom: -12px;
|
||||
|
||||
.btn {
|
||||
margin-bottom: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Modals
|
||||
.bs-example-modal {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
.modal-open {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon demo ( Demo only )
|
||||
.icon-demo-content {
|
||||
color: var(--#{$prefix}gray-500);
|
||||
|
||||
div {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 22px;
|
||||
margin-right: 10px;
|
||||
color: var(--#{$prefix}gray-600);
|
||||
transition: all 0.4s;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 10px;
|
||||
transition: all 0.4s;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.col-lg-4 {
|
||||
margin-top: 24px;
|
||||
|
||||
&:hover {
|
||||
i, svg {
|
||||
color: $primary;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
|
||||
.grid-structure {
|
||||
.grid-container {
|
||||
background-color: $gray-100;
|
||||
margin-top: 10px;
|
||||
font-size: .8rem;
|
||||
font-weight: $font-weight-medium;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// customizer switch
|
||||
|
||||
.img-switch{
|
||||
.card-radio{
|
||||
.form-check-input {
|
||||
display: none;
|
||||
|
||||
&:checked+.form-check-label {
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba($primary, 0.5);
|
||||
}
|
||||
&::after{
|
||||
content: '\eb80';
|
||||
font-family: "remixicon";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateY(-50%) translateX(-50%);
|
||||
font-size: 18px;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-target="#collapseBgGradient"]{
|
||||
&.active{
|
||||
border-color: $primary !important;
|
||||
&::before{
|
||||
content: "\eb80";
|
||||
font-family: remixicon;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 6px;
|
||||
font-size: 16px;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"]{
|
||||
.colorscheme-cardradio{
|
||||
.form-check-label{
|
||||
background-color: var(--#{$prefix}dark);
|
||||
}
|
||||
.bg-light{
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 0.1)!important;
|
||||
}
|
||||
|
||||
.bg-light-subtle {
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb),.1)!important;
|
||||
}
|
||||
|
||||
.dark{
|
||||
.bg-dark{
|
||||
background-color: var(--#{$prefix}card-bg-custom)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
//
|
||||
// _dropdown.scss
|
||||
//
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: inline-block;
|
||||
margin-left: .255em;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
content: "\F0140";
|
||||
font-family: "Material Design Icons";
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $box-shadow-lg;
|
||||
animation-name: DropDownSlide;
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
|
||||
&.dropdown-megamenu {
|
||||
padding: 20px;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
&[data-popper-placement="top-start"] {
|
||||
animation-name: DropDownSlideDown;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes DropDownSlide {
|
||||
100% {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
0% {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes DropDownSlideDown {
|
||||
100% {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
0% {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.dropdown-menu-xl {
|
||||
width: 420px;
|
||||
}
|
||||
|
||||
.dropdown-menu-lg {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.dropdown-menu-md {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle-split {
|
||||
border-left: none;
|
||||
|
||||
&::after {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: rgba($white, 0.12);
|
||||
top: -$btn-border-width;
|
||||
bottom: -$btn-border-width;
|
||||
right: -$btn-border-width;
|
||||
left: 0;
|
||||
border-radius: 0 $btn-border-radius $btn-border-radius 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown Mega Menu
|
||||
|
||||
.dropdown-mega {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
// Dropdown size
|
||||
|
||||
.dropdown-mega-menu-xl {
|
||||
width: 38rem;
|
||||
}
|
||||
|
||||
.dropdown-mega-menu-lg {
|
||||
width: 26rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] {
|
||||
.dropdown-menu-start {
|
||||
--bs-position: end;
|
||||
}
|
||||
|
||||
.dropdown-menu-end {
|
||||
--bs-position: start;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Dropdown with Tabs
|
||||
.dropdown-head {
|
||||
.nav-tabs-custom {
|
||||
border: 0;
|
||||
|
||||
.nav-link {
|
||||
color: $text-muted;
|
||||
|
||||
&.active {
|
||||
background-color: var(--#{$prefix}dropdown-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.dropdownmenu-#{$color} {
|
||||
.dropdown-item {
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: rgba(($value), 0.07);
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,340 @@
|
||||
//
|
||||
// _form-check.scss
|
||||
//
|
||||
|
||||
.form-check {
|
||||
position: relative;
|
||||
text-align: left
|
||||
/*rtl: right*/
|
||||
;
|
||||
|
||||
.form-check-input {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// checkbox color
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.form-check-#{$color} {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
background-color: $value;
|
||||
border-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-radio-#{$color} {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
border-color: $value;
|
||||
background-color: $value;
|
||||
|
||||
&:after {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
cursor: pointer;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// checkbox input right
|
||||
.form-check-right {
|
||||
padding-left: 0;
|
||||
display: inline-block;
|
||||
|
||||
.form-check-input {
|
||||
float: right;
|
||||
margin-left: 0;
|
||||
margin-right: $form-check-padding-start * -1;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.form-switch {
|
||||
.form-check-input {
|
||||
margin-right: $form-check-padding-start * -1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkbox outline
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.form-check-outline {
|
||||
&.form-check-#{$color} {
|
||||
.form-check-input {
|
||||
&:checked[type=checkbox] {
|
||||
color: $value;
|
||||
background-color: transparent;
|
||||
border-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-outline {
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
|
||||
&:checked[type=checkbox] {
|
||||
background-image: none;
|
||||
|
||||
&::before {
|
||||
content: "\F012C";
|
||||
font-family: "Material Design Icons";
|
||||
top: -2px;
|
||||
position: absolute;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Radio
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.form-radio-outline {
|
||||
&.form-radio-#{$color} {
|
||||
.form-check-input {
|
||||
&:checked[type=radio] {
|
||||
color: $value;
|
||||
background-color: transparent;
|
||||
border-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-radio-outline {
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
|
||||
&:checked[type=radio] {
|
||||
background-image: none;
|
||||
|
||||
&::before {
|
||||
content: "\F0765";
|
||||
font-family: "Material Design Icons";
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
font-size: 8px;
|
||||
left: 2.2px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Switch sizes
|
||||
|
||||
.form-switch-md {
|
||||
padding-left: 2.5rem;
|
||||
min-height: 22px;
|
||||
line-height: 22px;
|
||||
|
||||
.form-check-input {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
left: -0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch-lg {
|
||||
padding-left: 2.75rem;
|
||||
min-height: 28px;
|
||||
line-height: 28px;
|
||||
|
||||
.form-check-input {
|
||||
width: 48px;
|
||||
height: 24px;
|
||||
left: -0.75rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.form-switch-#{$color} {
|
||||
.form-check-input {
|
||||
|
||||
&:checked {
|
||||
background-color: $value;
|
||||
border-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch-custom {
|
||||
&.form-switch-#{$color} {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
&::before {
|
||||
color: $value;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Switch style
|
||||
|
||||
.form-switch-custom {
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
background-image: none;
|
||||
|
||||
&::before {
|
||||
content: "\F0765";
|
||||
font-family: "Material Design Icons";
|
||||
top: -9px;
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
left: -3px;
|
||||
color: $text-muted;
|
||||
@include transition($form-switch-transition);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-image: none;
|
||||
background-color: $form-check-input-bg;
|
||||
@include transition($form-switch-transition);
|
||||
|
||||
&::before {
|
||||
right: -3px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Switch - Right
|
||||
|
||||
.form-switch-right {
|
||||
display: inline-block;
|
||||
padding-right: $form-check-padding-start * .5;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0 !important;
|
||||
|
||||
.form-check-input {
|
||||
float: right;
|
||||
margin-left: 0;
|
||||
margin-right: $form-check-padding-start * -1;
|
||||
margin-top: .1em !important;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// card radio
|
||||
.card-radio {
|
||||
padding: 0;
|
||||
|
||||
.form-check-label {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
border: $form-check-input-border;
|
||||
border-radius: $border-radius;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-right: 32px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
display: none;
|
||||
|
||||
&:checked+.form-check-label {
|
||||
border-color: $primary !important;
|
||||
|
||||
&:before {
|
||||
content: '\eb80';
|
||||
font-family: "remixicon";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 6px;
|
||||
font-size: 16px;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
.form-check-input {
|
||||
&:checked+.form-check-label {
|
||||
&:before {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.customize-widget {
|
||||
.customize-penal-main{
|
||||
background-color: #3b5376;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
.badge{
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
// .form-check-label {
|
||||
// background-color: var(--#{$prefix}secondary-bg);
|
||||
// border: 1px solid transparent;
|
||||
// }
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
.form-switch {
|
||||
|
||||
.form-check-input,
|
||||
.form-check-input:focus {
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$gray-400}'/></svg>"));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
//
|
||||
// _form-control.scss
|
||||
//
|
||||
|
||||
|
||||
.form-icon{
|
||||
position: relative;
|
||||
.form-control-icon {
|
||||
padding-left: $input-padding-x*3;
|
||||
position: relative;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&.right{
|
||||
.form-control-icon {
|
||||
padding-right: $input-padding-x*3;
|
||||
padding-left: $input-padding-x;
|
||||
position: relative;
|
||||
}
|
||||
i {
|
||||
left: auto;
|
||||
right: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"]{
|
||||
.form-select {
|
||||
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$gray-400}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>"));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
//
|
||||
// forms.scss
|
||||
//
|
||||
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
&::placeholder {
|
||||
text-align: left /*rtl: right*/;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,279 @@
|
||||
//
|
||||
// _helper.scss
|
||||
//
|
||||
|
||||
$font-size-mixing: 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 36, 48;
|
||||
|
||||
@each $font-size-mixing in $font-size-mixing {
|
||||
.fs-#{$font-size-mixing} {
|
||||
font-size: #{$font-size-mixing}px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Border Style
|
||||
$border-style-mixing: double, dashed, groove, outset, ridge, dotted, inset;
|
||||
|
||||
@each $border-style-mixing in $border-style-mixing {
|
||||
.border-#{$border-style-mixing} {
|
||||
border-style: #{$border-style-mixing} !important;
|
||||
}
|
||||
|
||||
.border-top-#{$border-style-mixing} {
|
||||
border-top-style: #{$border-style-mixing} !important;
|
||||
}
|
||||
|
||||
.border-bottom-#{$border-style-mixing} {
|
||||
border-bottom-style: #{$border-style-mixing} !important;
|
||||
}
|
||||
|
||||
.border-end-#{$border-style-mixing} {
|
||||
border-right-style: #{$border-style-mixing} !important;
|
||||
}
|
||||
|
||||
.border-start-#{$border-style-mixing} {
|
||||
border-left-style: #{$border-style-mixing} !important;
|
||||
}
|
||||
|
||||
// List Group Flush Style
|
||||
.list-group-flush {
|
||||
&.border-#{$border-style-mixing} {
|
||||
border: none !important;
|
||||
|
||||
.list-group-item {
|
||||
border-style: #{$border-style-mixing} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Font Family
|
||||
.ff-base {
|
||||
font-family: $font-family-base;
|
||||
}
|
||||
|
||||
.ff-secondary {
|
||||
font-family: $font-family-secondary;
|
||||
}
|
||||
|
||||
// Social
|
||||
.social-list-item {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
line-height: calc(2rem - 4px);
|
||||
display: block;
|
||||
border: 2px solid $gray-500;
|
||||
border-radius: 50%;
|
||||
color: $gray-500;
|
||||
text-align: center;
|
||||
transition: all 0.4s;
|
||||
|
||||
&:hover {
|
||||
color: $gray-600;
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed minimum width
|
||||
.w-xs {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.w-sm {
|
||||
min-width: 95px;
|
||||
}
|
||||
|
||||
.w-md {
|
||||
min-width: 110px;
|
||||
}
|
||||
|
||||
.w-lg {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.w-xl {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
// Icons Sizes
|
||||
.icon-xs {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.icon-xxl {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
// Dual Icons
|
||||
.icon-dual {
|
||||
color: $gray-500;
|
||||
fill: rgba($gray-500, 0.16);
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.icon-dual-#{$color} {
|
||||
color: $value;
|
||||
fill: rgba($value, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
.search-box {
|
||||
position: relative;
|
||||
|
||||
.form-control {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// overlay
|
||||
.bg-overlay {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0.7;
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
// Btn Customizer
|
||||
|
||||
.customizer-setting {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
right: 20px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
//
|
||||
code {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
// text-truncate-two-lines
|
||||
.text-truncate-two-lines {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// text-truncate-three-lines
|
||||
.text-truncate-three-lines {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// card
|
||||
.card-logo-light {
|
||||
display: var(--#{$prefix}card-logo-light);
|
||||
}
|
||||
|
||||
.card-logo-dark {
|
||||
display: var(--#{$prefix}card-logo-dark);
|
||||
}
|
||||
|
||||
// [data-bs-theme="dark"] {
|
||||
// .btn-close {
|
||||
// filter: invert(1) grayscale(100%) brightness(200%);
|
||||
// }
|
||||
// }
|
||||
|
||||
#back-to-top {
|
||||
position: fixed;
|
||||
bottom: 100px;
|
||||
right: 24px;
|
||||
transition: all 0.5s ease;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
|
||||
&:hover {
|
||||
animation: fade-up 1.5s infinite linear;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-up {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.svg-shape {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
right: 0;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
|
||||
&>svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.container-custom {
|
||||
@media (min-width: 992px){
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
//
|
||||
// _list-group.scss
|
||||
//
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.list-group{
|
||||
.list-group-fill-#{$color} {
|
||||
--#{$prefix}list-group-bg: #{$value};
|
||||
--#{$prefix}list-group-border-color: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
margin-bottom: 0px;
|
||||
.list-text {
|
||||
color: $text-muted;
|
||||
}
|
||||
&.active {
|
||||
box-shadow: $element-shadow;
|
||||
.list-title {
|
||||
color: $white;
|
||||
}
|
||||
.list-text {
|
||||
color: rgba($white, 0.50);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
//
|
||||
// _modal.scss
|
||||
//
|
||||
|
||||
.modal-title {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.modal-dialog:not(.modal-dialog-scrollable) {
|
||||
.modal-header {
|
||||
padding-bottom: 0;
|
||||
|
||||
.btn-close {
|
||||
margin-top: -$modal-header-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
&.fadeInRight {
|
||||
.modal-dialog {
|
||||
opacity: 0;
|
||||
transform: translateX(20%);
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fadeInLeft {
|
||||
.modal-dialog {
|
||||
animation: fadeInLeft 0.3s ease-in-out;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fadeInUp {
|
||||
.modal-dialog {
|
||||
animation: fadeInUp 0.3s ease-in-out;
|
||||
transform: translate(0, 30%);
|
||||
}
|
||||
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.flip {
|
||||
perspective: 1300px;
|
||||
|
||||
.modal-dialog {
|
||||
opacity: 0;
|
||||
transform: rotateY(-70deg);
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
opacity: 1;
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.zoomIn {
|
||||
.modal-dialog {
|
||||
opacity: 0;
|
||||
transform: scale(.7);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.modal-dialog-right {
|
||||
margin-right: $modal-dialog-margin-y-sm-up;
|
||||
}
|
||||
|
||||
// modal-dialog-bottom
|
||||
.modal-dialog-bottom {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
min-height: calc(100% - #{$modal-dialog-margin-y-sm-up});
|
||||
|
||||
@media (min-width: 576px) {
|
||||
min-height: calc(100% - #{$modal-dialog-margin-y-sm-up*2 });
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog-bottom-right {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
min-height: calc(100% - #{$modal-dialog-margin-y-sm-up});
|
||||
margin-right: $modal-dialog-margin-y-sm-up;
|
||||
|
||||
@media (min-width: 576px) {
|
||||
min-height: calc(100% - #{$modal-dialog-margin-y-sm-up*2 });
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-30%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 30%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(.3, .3, .3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.login-modal {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1016%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(64%2c 81%2c 137%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c650.704C122.328%2c648.746%2c159.175%2c473.043%2c255.674%2c397.837C339.724%2c332.333%2c461.529%2c324.924%2c526.449%2c240.421C598.428%2c146.73%2c655.546%2c24.847%2c631.015%2c-90.726C606.666%2c-205.444%2c482.926%2c-263.497%2c401.565%2c-347.958C325.215%2c-427.217%2c275.543%2c-549.012%2c167.826%2c-571.563C60.344%2c-594.065%2c-27.703%2c-482.932%2c-135.163%2c-460.325C-256.336%2c-434.833%2c-401.929%2c-509.651%2c-497.972%2c-431.495C-592.807%2c-354.321%2c-579.865%2c-206.886%2c-595.603%2c-85.635C-611.133%2c34.016%2c-656.761%2c169.183%2c-588.884%2c268.934C-520.854%2c368.909%2c-362.458%2c340.324%2c-260.989%2c406.106C-158.875%2c472.306%2c-121.679%2c652.651%2c0%2c650.704' fill='%2333416e'%3e%3c/path%3e%3cpath d='M1440 995.672C1519.728 984.741 1563.12 899.779 1626.466 850.1469999999999 1682.6390000000001 806.135 1756.261 782.602 1791.2939999999999 720.431 1827.571 656.052 1835.537 577.6610000000001 1820.814 505.247 1806.518 434.933 1753.2640000000001 383.16999999999996 1710.941 325.228 1664.475 261.614 1634.992 175.16000000000003 1560.657 149.07999999999998 1485.96 122.87299999999999 1402.146 155.543 1332.03 192.289 1269.541 225.038 1232.754 287.251 1189.969 343.347 1149.925 395.849 1115.781 448.9 1089.96 509.672 1056 589.599 988.9680000000001 671.1659999999999 1015.557 753.837 1041.91 835.774 1142.714 863.61 1217.498 906.22 1288.388 946.611 1359.167 1006.755 1440 995.672' fill='%234d61a4'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1016'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.modal-dialog.modal-custom-size {
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,580 @@
|
||||
//
|
||||
// _nav.scss
|
||||
//
|
||||
|
||||
.nav-tabs,
|
||||
.nav-pills {
|
||||
>li {
|
||||
>a {
|
||||
color: var(--#{$prefix}tertiary-color);
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
>a {
|
||||
color: var(--#{$prefix}tertiary-color);
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
box-shadow: $element-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs-custom {
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
||||
.nav-link {
|
||||
border: none;
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: $primary;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transition: all 250ms ease 0s;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&.active, &:hover {
|
||||
color: $primary;
|
||||
|
||||
&:after {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-header-tabs {
|
||||
margin-top: -1rem;
|
||||
|
||||
.nav-link {
|
||||
padding: $card-cap-padding-y $card-cap-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// vertical nav
|
||||
|
||||
.vertical-nav {
|
||||
.nav {
|
||||
.nav-link {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.nav-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Navtab custom
|
||||
.navtab-bg {
|
||||
li {
|
||||
>a {
|
||||
background-color: $gray-300;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// arrow-navtabs
|
||||
|
||||
.arrow-navtabs {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 6px solid transparent;
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@include transition($nav-link-transition);
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:before {
|
||||
border-top-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// custom hover tab
|
||||
.custom-hover-nav-tabs {
|
||||
.nav-item {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
.nav-link {
|
||||
width: 120px;
|
||||
height: 45px;
|
||||
position: relative;
|
||||
border-radius: 0px;
|
||||
|
||||
.nav-icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.nav-titl {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-tab-position {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tab-position {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: all 0.4s;
|
||||
|
||||
&.nav-icon {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.nav-titl {
|
||||
bottom: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.nav-titl {
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// custom vertical tab
|
||||
|
||||
.custom-verti-nav-pills {
|
||||
.nav-link {
|
||||
background-color: var(--#{$prefix}light);
|
||||
margin-top: 7px;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 12px solid transparent;
|
||||
border-left-color: transparent;
|
||||
transition: border-left-color 0.04 ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
border-left-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// animation nav
|
||||
.animation-nav {
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}body-color);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s;
|
||||
z-index: 1;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
transition: width 0.4s cubic-bezier(0.51, 0.18, 0, 0.88) 0.1s;
|
||||
background-color: $primary;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $white;
|
||||
background-color: transparent !important;
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-border-top {
|
||||
.nav-link {
|
||||
border-top: 3px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-top-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.nav-border-top-#{$color} {
|
||||
.nav-link {
|
||||
&.active {
|
||||
color: $value;
|
||||
border-top-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-custom {
|
||||
background-color: $primary;
|
||||
border-radius: $card-border-radius;
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: rgba($white, 0.75);
|
||||
|
||||
&.active {
|
||||
color: $white;
|
||||
background-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-custom-light {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: var(--#{$prefix}tertiary-color);
|
||||
|
||||
&.active {
|
||||
color: $light;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.nav-custom-#{$color} {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-custom-light {
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.nav-#{$color} {
|
||||
.nav-link {
|
||||
&.active {
|
||||
color: $white;
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-tabs {
|
||||
.nav-link {
|
||||
&.active {
|
||||
color: $value;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-tabs-custom {
|
||||
.nav-link {
|
||||
&.active, &:hover {
|
||||
color: $value;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
|
||||
&::after {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.arrow-navtabs {
|
||||
.nav-link {
|
||||
&.active {
|
||||
&::before {
|
||||
border-top-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-verti-nav-pills {
|
||||
.nav-link {
|
||||
&.active {
|
||||
&::before {
|
||||
border-left-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// progress nav
|
||||
.progress-nav {
|
||||
position: relative;
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem;
|
||||
justify-content: space-between;
|
||||
|
||||
.nav-link {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: var(--#{$prefix}light);
|
||||
padding: 0;
|
||||
color: var(--#{$prefix}tertiary-color);
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
&.active,
|
||||
&.done {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Step arrow nav
|
||||
.step-arrow-nav {
|
||||
.nav {
|
||||
background-color: var(--#{$prefix}light);
|
||||
|
||||
.nav-link {
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
font-weight: $font-weight-medium;
|
||||
color: var(--#{$prefix}tertiary-color);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 7px solid transparent;
|
||||
right: -14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.done {
|
||||
background-color: rgba($primary, 0.05);
|
||||
color: $primary;
|
||||
|
||||
&::before {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba($primary, 0.1);
|
||||
color: $primary;
|
||||
box-shadow: none;
|
||||
|
||||
&::before {
|
||||
border-left-color: rgba($primary, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// vertical nav step
|
||||
.vertical-navs-step {
|
||||
.nav {
|
||||
gap: 16px;
|
||||
|
||||
.nav-link {
|
||||
text-align: left;
|
||||
background-color: rgba(var(--#{$prefix}secondary-bg-rgb), 0.4);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
color: var(--#{$prefix}tertiary-color);
|
||||
|
||||
.step-title {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
color: $danger;
|
||||
vertical-align: middle;
|
||||
font-weight: $font-weight-medium;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.done {
|
||||
.step-icon {
|
||||
color: $success;
|
||||
|
||||
&:before {
|
||||
content: "\eb80";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&.done {
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Outline Border Nav
|
||||
.nav-custom-outline {
|
||||
&.nav {
|
||||
.nav-link {
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-color: $primary;
|
||||
background-color: transparent;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.nav-#{$color} {
|
||||
&.nav-custom-outline {
|
||||
.nav-link {
|
||||
&.active {
|
||||
color: $value;
|
||||
border-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//customs nav
|
||||
.nav-customs {
|
||||
&.nav {
|
||||
padding-left: 34px;
|
||||
overflow: hidden;
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: right;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
margin-right: 46px;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
width: 37px;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-radius: 0 8px 0 0;
|
||||
right: -24px;
|
||||
transform: skew(30deg, 0deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-radius: 8px 0 0 0;
|
||||
left: -24px;
|
||||
transform: skew(-30deg, 0deg);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.active:before,
|
||||
&.active:after {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
//
|
||||
// _pagination.scss
|
||||
//
|
||||
|
||||
// Pagination Separated
|
||||
.pagination-separated {
|
||||
.page-item {
|
||||
.page-link {
|
||||
margin-left: 0.35rem;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination rounded (Custom)
|
||||
.pagination-rounded {
|
||||
.page-link {
|
||||
border-radius: 30px !important;
|
||||
margin: 0 3px !important;
|
||||
border: none;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.pagination-sm {
|
||||
.page-link {
|
||||
min-width: 25px;
|
||||
min-height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-item.active {
|
||||
.page-link{
|
||||
box-shadow: $element-shadow;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
//
|
||||
// _popover.scss
|
||||
//
|
||||
|
||||
.popover {
|
||||
box-shadow: $popover-box-shadow;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
//
|
||||
// preloader.scss
|
||||
//
|
||||
|
||||
#preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
[data-preloader="disable"] #preloader {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#status {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -20px 0 0 -20px;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
//
|
||||
// print.scss
|
||||
//
|
||||
|
||||
// Used invoice page
|
||||
@media print {
|
||||
|
||||
.vertical-menu,
|
||||
.right-bar,
|
||||
.page-title-box,
|
||||
.navbar-header,
|
||||
.page-topbar,
|
||||
.top-tagbar,
|
||||
.app-menu,
|
||||
.footer,
|
||||
#back-to-top,
|
||||
.modal-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.card-body,
|
||||
.main-content,
|
||||
.right-bar,
|
||||
.page-content,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 0;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
&.modal-custom-size {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
//
|
||||
// _progress.scss
|
||||
//
|
||||
|
||||
// Progress height small
|
||||
.progress-sm {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
// Progress height large
|
||||
.progress-lg {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
// Progress height Extra large
|
||||
.progress-xl {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.custom-progess {
|
||||
position: relative;
|
||||
|
||||
.progress-icon {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
|
||||
.avatar-title {
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// animated-progress
|
||||
|
||||
.animated-progress {
|
||||
position: relative;
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
animation: animate-positive 2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate-positive {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// custom-progress
|
||||
|
||||
.custom-progress {
|
||||
height: 15px;
|
||||
padding: 4px;
|
||||
border-radius: 30px;
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
border-radius: 30px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: $white;
|
||||
border-radius: 7px;
|
||||
right: 2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// progress withlabel
|
||||
.progress-label {
|
||||
overflow: visible;
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
right: -9px;
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
line-height: 18px;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 4px solid transparent;
|
||||
border-top-color: $primary;
|
||||
bottom: -7px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.progress-step-arrow {
|
||||
height: 3.25rem;
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
overflow: initial;
|
||||
font-size: .875rem;
|
||||
color: $white;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 10px solid transparent;
|
||||
bottom: 15px;
|
||||
right: -20px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin progress-variant($bg) {
|
||||
.progress-bar {
|
||||
background-color: $bg;
|
||||
&::after {
|
||||
border-left-color: $bg;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
background-color: rgba($bg, 0.1) !important;
|
||||
color: $bg !important;
|
||||
&::after {
|
||||
border-left-color: rgba($bg, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.progress-#{$color} {
|
||||
@include progress-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
//
|
||||
// reboot.scss
|
||||
//
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
// blockquote
|
||||
|
||||
.blockquote {
|
||||
padding: 10px 20px;
|
||||
border-left: 4px solid var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
.blockquote-reverse {
|
||||
border-left: 0;
|
||||
border-right: 4px solid var(--#{$prefix}border-color-translucent);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// container
|
||||
|
||||
.container,
|
||||
.container-lg,
|
||||
.container-md,
|
||||
.container-sm,
|
||||
.container-xl,
|
||||
.container-xxl {
|
||||
@media (min-width: 1200px) {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
// row
|
||||
.row>*{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// mixing
|
||||
|
||||
@function set-color-from-background($color) {
|
||||
@if (lightness($color) > 70) {
|
||||
@return $color-contrast-dark;
|
||||
}
|
||||
@else {
|
||||
@return $color-contrast-light;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
//
|
||||
// ribbons.scss
|
||||
//
|
||||
|
||||
.ribbon-box {
|
||||
position: relative;
|
||||
|
||||
.ribbon {
|
||||
padding: 5px 12px;
|
||||
box-shadow: 2px 5px 10px rgba($dark, 0.15);
|
||||
color: $white;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-semibold;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
|
||||
&.round-shape {
|
||||
border-radius: 0 30px 30px 0;
|
||||
}
|
||||
|
||||
&.ribbon-shape {
|
||||
display: inline-block;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 7px;
|
||||
height: 124%;
|
||||
top: 0;
|
||||
left: -6.5px;
|
||||
padding: 0 0 7px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
bottom: -5px;
|
||||
left: -4.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-shape{
|
||||
position: absolute;
|
||||
color: $white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
width: 70px;
|
||||
top: -2px;
|
||||
transform: rotate(-90deg) translateX(-27%);
|
||||
font-weight: $font-weight-medium;
|
||||
&:after{
|
||||
content: "";
|
||||
border-top: 18px solid $primary;
|
||||
border-bottom: 18px solid $primary;
|
||||
border-right: 11px solid transparent;
|
||||
border-left: 11px solid transparent;
|
||||
position: absolute;
|
||||
left: -11px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ribbon circle
|
||||
&.ribbon-circle {
|
||||
.ribbon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// ribbon fill
|
||||
|
||||
&.ribbon-fill {
|
||||
overflow: hidden;
|
||||
|
||||
.ribbon {
|
||||
transform: rotate(-45deg);
|
||||
width: 93px;
|
||||
height: 52px;
|
||||
left: -36px;
|
||||
top: -16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&.ribbon-sm {
|
||||
.ribbon {
|
||||
padding: 2px 12px;
|
||||
width: 78px;
|
||||
height: 42px;
|
||||
font-size: 12px;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// right
|
||||
&.right {
|
||||
.ribbon {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
&.round-shape {
|
||||
border-radius: 30px 0 0 30px;
|
||||
}
|
||||
|
||||
&.ribbon-shape {
|
||||
text-align: right;
|
||||
|
||||
&::before {
|
||||
right: -6.5px;
|
||||
left: auto;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -4.5px;
|
||||
left: auto;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-circle {
|
||||
.ribbon {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-ribbon {
|
||||
right: 24px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&.ribbon-fill {
|
||||
.ribbon {
|
||||
transform: rotate(45deg);
|
||||
right: -38px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-box {
|
||||
.ribbon-two {
|
||||
left: auto;
|
||||
right: -5px;
|
||||
|
||||
span {
|
||||
left: auto;
|
||||
right: -21px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ribbon-content {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.ribbon-#{$color} {
|
||||
background: ($value);
|
||||
|
||||
&.vertical-shape{
|
||||
&:after{
|
||||
border-top: 18px solid $value;
|
||||
border-bottom: 18px solid $value;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: darken(($value), 10%) transparent transparent;
|
||||
}
|
||||
|
||||
&.ribbon-shape {
|
||||
&::before {
|
||||
background-color: $value;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: lighten(($value), 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.ribbon-#{$color} {
|
||||
background: ($value);
|
||||
|
||||
&.ribbon-shape {
|
||||
&::before {
|
||||
border-right-color: ($value);
|
||||
border-top-color: ($value);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-right-color: ($value);
|
||||
border-bottom-color: ($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Ribbon Hover
|
||||
.ribbon-box {
|
||||
.trending-ribbon {
|
||||
transform: translateX(-50px);
|
||||
transition: all 0.5s ease;
|
||||
|
||||
.trending-ribbon-text {
|
||||
transition: all 0.5s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.trending-ribbon {
|
||||
transform: translateX(0);
|
||||
|
||||
.trending-ribbon-text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.trending-ribbon {
|
||||
transform: translateX(50px);
|
||||
transition: all 0.5s ease;
|
||||
|
||||
.trending-ribbon-text {
|
||||
transition: all 0.5s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.trending-ribbon {
|
||||
transform: translateX(0);
|
||||
|
||||
.trending-ribbon-text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
//
|
||||
// root.scss
|
||||
//
|
||||
|
||||
@mixin color-mode($mode: light, $root: false) {
|
||||
@if $color-mode-type =="media-query" {
|
||||
@if $root ==true {
|
||||
@media (prefers-color-scheme: $mode) {
|
||||
:root {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
@media (prefers-color-scheme: $mode) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
[data-bs-theme="#{$mode}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//theme-light
|
||||
:root {
|
||||
--#{$prefix}header-bg: #{$header-bg};
|
||||
--#{$prefix}header-item-color: #{$header-item-color};
|
||||
--#{$prefix}top-tagbar-bg: #{$top-tagbar-bg};
|
||||
--#{$prefix}header-item-sub-color: #{$text-muted};
|
||||
|
||||
// card
|
||||
--#{$prefix}card-logo-dark: block;
|
||||
--#{$prefix}card-logo-light: none;
|
||||
|
||||
// Topbar User
|
||||
--#{$prefix}topbar-user-bg: #{$gray-100};
|
||||
|
||||
// Horizontal nav
|
||||
--#{$prefix}topnav-bg: #{$white};
|
||||
--#{$prefix}topnav-item-color: #{darken($gray-600, 10%)};
|
||||
--#{$prefix}topnav-item-color-active: var(--#{$prefix}primary);
|
||||
|
||||
// twocolumn menu
|
||||
--#{$prefix}twocolumn-menu-iconview-bg: #{$white};
|
||||
--#{$prefix}twocolumn-menu-bg: #{$white};
|
||||
|
||||
&[data-topbar="dark"] {
|
||||
--#{$prefix}header-bg: #{$gray-800};
|
||||
--#{$prefix}header-item-color: #{$gray-100};
|
||||
--#{$prefix}header-item-sub-color: #8795ab;
|
||||
--#{$prefix}topbar-user-bg: #{rgba($gray-200, 0.1)};
|
||||
}
|
||||
|
||||
&[data-topbar="brand"] {
|
||||
--#{$prefix}header-bg: #{$blue-700};
|
||||
--#{$prefix}header-item-color: #{$gray-100};
|
||||
--#{$prefix}header-item-sub-color: #{lighten($blue-100, 2.5%)};
|
||||
--#{$prefix}topbar-user-bg: #335fa1;
|
||||
}
|
||||
|
||||
&[data-topbar="purple"] {
|
||||
--#{$prefix}header-bg: #{$purple-700};
|
||||
--#{$prefix}header-item-color: #{$gray-100};
|
||||
--#{$prefix}header-item-sub-color: #{lighten($purple-100, 1.5%)};
|
||||
}
|
||||
|
||||
//vertical light
|
||||
--#{$prefix}vertical-menu-bg: #{$white};
|
||||
--#{$prefix}vertical-menu-border: #{$border-color};
|
||||
--#{$prefix}vertical-menu-item-color: #{darken($gray-600, 10%)};
|
||||
--#{$prefix}vertical-menu-item-hover-color: var(--#{$prefix}primary);
|
||||
--#{$prefix}vertical-menu-item-hover-bg: var(--#{$prefix}primary);
|
||||
--#{$prefix}vertical-menu-item-active-color: var(--#{$prefix}primary);
|
||||
--#{$prefix}vertical-menu-sub-item-color: #{darken($gray-600, 4%)};
|
||||
--#{$prefix}vertical-menu-sub-item-hover-color: var(--#{$prefix}primary);
|
||||
--#{$prefix}vertical-menu-sub-item-active-color: var(--#{$prefix}primary);
|
||||
--#{$prefix}vertical-menu-title-color: #919da9;
|
||||
|
||||
&[data-sidebar="dark"] {
|
||||
--#{$prefix}vertical-menu-bg: #0e203a;
|
||||
--#{$prefix}vertical-menu-border: #0e203a;
|
||||
--#{$prefix}vertical-menu-item-color: #9aa5b5;
|
||||
--#{$prefix}vertical-menu-item-hover-color: #{$white};
|
||||
--#{$prefix}vertical-menu-item-hover-bg: #1c2932;
|
||||
--#{$prefix}vertical-menu-item-active-color: #{$white};
|
||||
--#{$prefix}vertical-menu-sub-item-color: #9aa5b5;
|
||||
--#{$prefix}vertical-menu-sub-item-hover-color: #{$white};
|
||||
--#{$prefix}vertical-menu-sub-item-active-color: #{$white};
|
||||
--#{$prefix}vertical-menu-title-color: #9aa5b5;
|
||||
--#{$prefix}twocolumn-menu-iconview-bg: #112645;
|
||||
--#{$prefix}twocolumn-menu-bg: #0e203a;
|
||||
}
|
||||
|
||||
&[data-sidebar="brand"] {
|
||||
--#{$prefix}vertical-menu-bg: #{$blue-700};
|
||||
--#{$prefix}vertical-menu-border: #{$blue-700};
|
||||
--#{$prefix}vertical-menu-item-color: #a5bad9;
|
||||
--#{$prefix}vertical-menu-item-hover-color: #{$white};
|
||||
--#{$prefix}vertical-menu-item-hover-bg: #1c2932;
|
||||
--#{$prefix}vertical-menu-item-active-color: #{$white};
|
||||
--#{$prefix}vertical-menu-sub-item-color: #a5bad9;
|
||||
--#{$prefix}vertical-menu-sub-item-hover-color: #{$white};
|
||||
--#{$prefix}vertical-menu-sub-item-active-color: #{$white};
|
||||
--#{$prefix}vertical-menu-title-color: #a5bad9;
|
||||
}
|
||||
|
||||
|
||||
&:is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) {
|
||||
--#{$prefix}vertical-menu-item-color: #{rgba($white, .50)};
|
||||
--#{$prefix}vertical-menu-item-hover-color: #{$white};
|
||||
--#{$prefix}vertical-menu-item-hover-bg: #1c2932;
|
||||
--#{$prefix}vertical-menu-item-active-color: #{$white};
|
||||
--#{$prefix}vertical-menu-sub-item-color: #{rgba($white, .50)};
|
||||
--#{$prefix}vertical-menu-sub-item-hover-color: #{$white};
|
||||
--#{$prefix}vertical-menu-sub-item-active-color: #{$white};
|
||||
--#{$prefix}vertical-menu-title-color: #{rgba($white, .50)};
|
||||
}
|
||||
|
||||
&[data-sidebar="gradient"] {
|
||||
--#{$prefix}vertical-menu-bg: linear-gradient(to left, #{$blue-700}, #{$blue-800});
|
||||
--#{$prefix}vertical-menu-border: #{$blue-700};
|
||||
--#{$prefix}twocolumn-menu-iconview-bg: linear-gradient(to left, #{$blue-700}, #{$blue-800});
|
||||
--#{$prefix}twocolumn-menu-bg: linear-gradient(to left, #{$blue-700}, #{$blue-800});
|
||||
}
|
||||
|
||||
&[data-sidebar="gradient-2"] {
|
||||
--#{$prefix}vertical-menu-bg: linear-gradient(to left, #{$purple-700}, #{$purple-800});
|
||||
--#{$prefix}vertical-menu-border: #{$purple-700};
|
||||
--#{$prefix}twocolumn-menu-iconview-bg: linear-gradient(to left, #{$purple-700}, #{$purple-800});
|
||||
--#{$prefix}twocolumn-menu-bg: linear-gradient(to left, #{$purple-700}, #{$purple-800});
|
||||
}
|
||||
|
||||
&[data-sidebar="gradient-3"] {
|
||||
--#{$prefix}vertical-menu-bg: linear-gradient(to left, #{$green-700}, #{$green-800});
|
||||
--#{$prefix}vertical-menu-border: #{$green-700};
|
||||
--#{$prefix}twocolumn-menu-iconview-bg: linear-gradient(to left, #{$green-700}, #{$green-800});
|
||||
--#{$prefix}twocolumn-menu-bg: linear-gradient(to left, #{$green-700}, #{$green-800});
|
||||
}
|
||||
|
||||
&[data-sidebar="gradient-4"] {
|
||||
--#{$prefix}vertical-menu-bg: linear-gradient(to left, #{$cyan-700}, #{$cyan-800});
|
||||
--#{$prefix}vertical-menu-border: #{$cyan-700};
|
||||
--#{$prefix}twocolumn-menu-iconview-bg: linear-gradient(to left, #{$cyan-700}, #{$cyan-800});
|
||||
--#{$prefix}twocolumn-menu-bg: linear-gradient(to left, #{$cyan-700}, #{$cyan-800});
|
||||
}
|
||||
|
||||
&[data-body-image="img-1"] {
|
||||
--#{$prefix}body-bg-image: url("../images/sidebar/body-light-1.png");
|
||||
}
|
||||
|
||||
&[data-body-image="img-2"] {
|
||||
--#{$prefix}body-bg-image: url("../images/sidebar/body-light-2.png");
|
||||
}
|
||||
|
||||
&[data-body-image="img-3"] {
|
||||
--#{$prefix}body-bg-image: url("../images/sidebar/body-light-3.png");
|
||||
}
|
||||
}
|
||||
|
||||
//theme dark
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark, true) {
|
||||
--#{$prefix}light: #{$light-dark};
|
||||
--#{$prefix}light-rgb: #{to-rgb($light-dark)};
|
||||
--#{$prefix}dark: #{$light-dark};
|
||||
--#{$prefix}dark-rgb: #{to-rgb($light-dark)};
|
||||
|
||||
--#{$prefix}header-bg: #{$header-bg-dark};
|
||||
--#{$prefix}header-item-color: #{$header-item-color-dark};
|
||||
|
||||
--#{$prefix}top-tagbar-bg: #{$top-tagbar-bg-dark};
|
||||
--#{$prefix}header-item-sub-color: #{$text-muted};
|
||||
|
||||
// card
|
||||
--#{$prefix}card-logo-dark: none;
|
||||
--#{$prefix}card-logo-light: block;
|
||||
|
||||
|
||||
.btn-dark {
|
||||
--#{$prefix}btn-bg: #{lighten($gray-700, 1.5%)};
|
||||
--#{$prefix}btn-border-color: #{lighten($gray-700, 1.5%)};
|
||||
--#{$prefix}btn-hover-bg: #{lighten($gray-700, 3.5%)};
|
||||
--#{$prefix}btn-hover-border-color: #{lighten($gray-700, 3.5%)};
|
||||
--#{$prefix}btn-active-bg: #{lighten($gray-700, 3.5%)};
|
||||
--#{$prefix}btn-active-border-color: #{lighten($gray-700, 3.5%)};
|
||||
--#{$prefix}btn-disabled-bg: #{lighten($gray-700, 3.5%)};
|
||||
--#{$prefix}btn-disabled-border-color: #{lighten($gray-700, 3.5%)};
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--#{$prefix}btn-color: #{$white};
|
||||
--#{$prefix}btn-border-color: #{lighten($gray-700, 1.5%)};
|
||||
--#{$prefix}btn-hover-bg: #{lighten($gray-700, 1.5%)};
|
||||
--#{$prefix}btn-hover-border-color: #{lighten($gray-700, 1.5%)};
|
||||
--#{$prefix}btn-active-bg: #{lighten($gray-700, 1.5%)};
|
||||
--#{$prefix}btn-active-border-color: #{lighten($gray-700, 1.5%)};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// scrollspy.scss
|
||||
//
|
||||
|
||||
// Scrollspy
|
||||
.scrollspy-example {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
margin-top: .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.scrollspy-example-2 {
|
||||
position: relative;
|
||||
height: 370px;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
//
|
||||
// _table.scss
|
||||
//
|
||||
|
||||
.table {
|
||||
>thead {
|
||||
border-color: $table-border-color;
|
||||
}
|
||||
>:not(:first-child) {
|
||||
border-top-width: $table-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table-nowrap {
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// card table
|
||||
.table-card{
|
||||
margin: (-$card-spacer-y) (-$card-spacer-x);
|
||||
|
||||
th,
|
||||
td {
|
||||
|
||||
&:first-child{
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.table > :not(:first-child) {
|
||||
border-top-width: $table-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.border-#{$color} {
|
||||
&.table {
|
||||
> thead {
|
||||
border-color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-#{$color} {
|
||||
&.table {
|
||||
> thead {
|
||||
border-bottom-color:lighten($value, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
.form-check {
|
||||
padding-left: 0px;
|
||||
margin-bottom: 0px;
|
||||
.form-check-input {
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
float: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.sort {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "\f035d";
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 18px;
|
||||
font-size: 0.8rem;
|
||||
font-family: "Material Design Icons";
|
||||
}
|
||||
&::after {
|
||||
position:absolute;
|
||||
right: 0.5rem;
|
||||
content: "\f0360";
|
||||
font-family: "Material Design Icons";
|
||||
font-size: 0.8rem;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-light {
|
||||
--#{$prefix}table-bg: var(--#{$prefix}light);
|
||||
--#{$prefix}table-color: var(--#{$prefix}secondary-color);
|
||||
--#{$prefix}table-border-color: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
//
|
||||
// toast.scss
|
||||
//
|
||||
|
||||
|
||||
// toast
|
||||
.toast {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $toast-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin toast-border-variant($bg) {
|
||||
.toast-body{
|
||||
color: $bg;
|
||||
border-bottom: 3px solid $bg;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.toast-border-#{$color} {
|
||||
@include toast-border-variant($value);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
//
|
||||
// type.scss
|
||||
//
|
||||
|
||||
// Text colors
|
||||
.text-white-75 {
|
||||
color: rgba($white, 0.75) !important;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
.custom-blockquote {
|
||||
&.blockquote {
|
||||
padding: 16px;
|
||||
border-left: 3px solid;
|
||||
|
||||
&.blockquote-outline{
|
||||
background-color: var(--#{$prefix}secondary-bg) !important;
|
||||
border: 1px solid;
|
||||
border-left: 3px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.custom-blockquote {
|
||||
&.blockquote {
|
||||
&.blockquote-#{$color} {
|
||||
color: #{$value};
|
||||
border-color: #{$value};
|
||||
background-color: rgba($value, 0.15);
|
||||
|
||||
.blockquote-footer {
|
||||
color: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
&.blockquote-outline{
|
||||
&.blockquote-#{$color} {
|
||||
border-color: #{$value};
|
||||
|
||||
.blockquote-footer {
|
||||
color: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-blockquote{
|
||||
&.blockquote{
|
||||
&.blockquote-dark{
|
||||
color: var(--#{$prefix}dark);
|
||||
border-color: var(--#{$prefix}dark);
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.15);
|
||||
.blockquote-footer {
|
||||
color: var(--#{$prefix}dark);
|
||||
}
|
||||
}
|
||||
&.blockquote-outline{
|
||||
&.blockquote-dark{
|
||||
border-color: var(--#{$prefix}dark);
|
||||
.blockquote-footer {
|
||||
color: var(--#{$prefix}dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
//
|
||||
// Widgets.scss
|
||||
//
|
||||
|
||||
.main-chart {
|
||||
.chart-border-left {
|
||||
border-left: 1.4px solid $border-color;
|
||||
padding: 2px 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Activity */
|
||||
|
||||
.activity-feed {
|
||||
list-style: none;
|
||||
|
||||
.feed-item {
|
||||
position: relative;
|
||||
padding-bottom: 27px;
|
||||
padding-left: 16px;
|
||||
border-left: 2px solid $light;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $primary;
|
||||
background-color: $card-bg;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// mini-stats-wid
|
||||
.mini-stats-wid {
|
||||
position: relative;
|
||||
|
||||
.mini-stat-icon {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 69px;
|
||||
background-color: rgba($success, .1);
|
||||
left: 3px;
|
||||
transform: rotate(32deg);
|
||||
top: -8px;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 27px;
|
||||
width: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.mini-stat-icon {
|
||||
&::after {
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user