first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,94 @@
|
||||
// Dark color mode variables
|
||||
//
|
||||
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
|
||||
|
||||
//
|
||||
// Global colors
|
||||
//
|
||||
|
||||
// scss-docs-start sass-dark-mode-vars
|
||||
// scss-docs-start theme-text-dark-variables
|
||||
$primary-text-emphasis-dark: tint-color($primary, 10%);
|
||||
$secondary-text-emphasis-dark: tint-color($secondary, 10%);
|
||||
$success-text-emphasis-dark: tint-color($success, 10%);
|
||||
$info-text-emphasis-dark: tint-color($info, 10%);
|
||||
$warning-text-emphasis-dark: tint-color($warning, 10%);
|
||||
$danger-text-emphasis-dark: tint-color($danger, 10%);
|
||||
$light-text-emphasis-dark: $gray-100;
|
||||
$dark-text-emphasis-dark: $gray-300;
|
||||
// scss-docs-end theme-text-dark-variables
|
||||
|
||||
// scss-docs-start theme-bg-subtle-dark-variables
|
||||
$primary-bg-subtle-dark: shade-color($primary, 60%);
|
||||
$secondary-bg-subtle-dark: shade-color($secondary, 60%);
|
||||
$success-bg-subtle-dark: shade-color($success, 60%);
|
||||
$info-bg-subtle-dark: shade-color($info, 60%);
|
||||
$warning-bg-subtle-dark: shade-color($warning, 60%);
|
||||
$danger-bg-subtle-dark: shade-color($danger, 60%);
|
||||
$light-bg-subtle-dark: $gray-800;
|
||||
$dark-bg-subtle-dark: lighten($gray-900, 2.5);
|
||||
// scss-docs-end theme-bg-subtle-dark-variables
|
||||
|
||||
// scss-docs-start theme-border-subtle-dark-variables
|
||||
$primary-border-subtle-dark: shade-color($primary, 40%);
|
||||
$secondary-border-subtle-dark: shade-color($secondary, 40%);
|
||||
$success-border-subtle-dark: shade-color($success, 40%);
|
||||
$info-border-subtle-dark: shade-color($info, 40%);
|
||||
$warning-border-subtle-dark: shade-color($warning, 40%);
|
||||
$danger-border-subtle-dark: shade-color($danger, 40%);
|
||||
$light-border-subtle-dark: $gray-700;
|
||||
$dark-border-subtle-dark: $gray-800;
|
||||
// scss-docs-end theme-border-subtle-dark-variables
|
||||
|
||||
$light-dark: $gray-700;
|
||||
$body-color-dark: $gray-100;
|
||||
$body-bg-dark: $gray-900;
|
||||
$body-emphasis-color-dark: $gray-100;
|
||||
$body-secondary-color-dark: #7f8f9f;
|
||||
$body-secondary-bg-dark: $gray-800;
|
||||
$body-tertiary-color-dark: rgba($body-color-dark, .75);
|
||||
$body-tertiary-bg-dark: lighten($gray-800, 2.5);
|
||||
$emphasis-color-dark: $white;
|
||||
$border-color-dark: $gray-700;
|
||||
$border-color-translucent-dark: $gray-700;
|
||||
$headings-color-dark: $gray-200;
|
||||
$link-color-dark: $blue-300;
|
||||
$link-hover-color-dark: $blue-200;
|
||||
$code-color-dark: $pink-300;
|
||||
$mark-color-dark: $body-color-dark;
|
||||
$mark-bg-dark: $yellow-800;
|
||||
|
||||
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
$form-select-indicator-color-dark: $body-color-dark;
|
||||
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
|
||||
|
||||
$form-switch-color-dark: rgba($white, .25);
|
||||
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");
|
||||
// scss-docs-start form-validation-colors-dark
|
||||
$form-valid-color-dark: $green-300;
|
||||
$form-valid-border-color-dark: $green-300;
|
||||
$form-invalid-color-dark: $red-300;
|
||||
$form-invalid-border-color-dark: $red-300;
|
||||
// scss-docs-end form-validation-colors-dark
|
||||
|
||||
//
|
||||
// Accordion
|
||||
//
|
||||
|
||||
$accordion-icon-color-dark: $primary-text-emphasis-dark;
|
||||
$accordion-icon-active-color-dark: $primary-text-emphasis-dark;
|
||||
|
||||
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><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>");
|
||||
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-emphasis-dark}'><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>");
|
||||
// scss-docs-end sass-dark-mode-vars
|
||||
|
||||
|
||||
// Topbar
|
||||
$header-bg-dark: $white;
|
||||
$header-item-color-dark: $gray-800;
|
||||
|
||||
$top-tagbar-bg-dark: $blue-600;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,107 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://themesbrand.com/
|
||||
Contact: support@themesbrand.com
|
||||
File: Main Css File
|
||||
*/
|
||||
|
||||
//Fonts
|
||||
@import "fonts/fonts";
|
||||
|
||||
//Core files
|
||||
@import "./node_modules/bootstrap/scss/functions";
|
||||
@import "./node_modules/bootstrap/scss/variables";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "./node_modules/bootstrap/scss/mixins";
|
||||
|
||||
// Structure
|
||||
@import "structure/topbar";
|
||||
@import "structure/page-head";
|
||||
@import "structure/footer";
|
||||
@import "structure/vertical";
|
||||
@import "structure/horizontal";
|
||||
@import "structure/two-column";
|
||||
@import "structure/layouts";
|
||||
@import "structure/landing-menu";
|
||||
|
||||
// Components
|
||||
@import "components/avatar";
|
||||
@import "components/accordion";
|
||||
@import "components/helper";
|
||||
@import "components/preloader";
|
||||
@import "components/forms";
|
||||
@import "components/widgets";
|
||||
@import "components/demos";
|
||||
@import "components/print";
|
||||
@import "components/ribbons";
|
||||
@import "components/toast";
|
||||
@import "components/scrollspy";
|
||||
|
||||
// Bootstrap components
|
||||
@import "components/root";
|
||||
@import "components/reboot";
|
||||
@import "components/alerts";
|
||||
@import "components/backgrounds";
|
||||
@import "components/badge";
|
||||
@import "components/buttons";
|
||||
@import "components/breadcrumb";
|
||||
@import "components/card";
|
||||
@import "components/dropdown";
|
||||
@import "components/nav";
|
||||
@import "components/table";
|
||||
@import "components/modal";
|
||||
@import "components/pagination";
|
||||
@import "components/progress";
|
||||
@import "components/popover";
|
||||
@import "components/type";
|
||||
@import "components/form-check";
|
||||
@import "components/form-control";
|
||||
@import "components/list-group";
|
||||
|
||||
// Plugins
|
||||
@import "plugins/custom-scrollbar";
|
||||
@import "plugins/prismjs";
|
||||
@import "plugins/sweetalert2";
|
||||
@import "plugins/dropzone";
|
||||
@import "plugins/sortablejs";
|
||||
@import "plugins/tour";
|
||||
@import "plugins/swiper";
|
||||
@import "plugins/multijs";
|
||||
@import "plugins/colorpicker";
|
||||
@import "plugins/form-input-spin";
|
||||
@import "plugins/ckeditor";
|
||||
@import "plugins/gridjs";
|
||||
@import "plugins/listjs";
|
||||
@import "plugins/apexcharts";
|
||||
@import "plugins/google-map";
|
||||
@import "plugins/autocomplete";
|
||||
@import "plugins/vector-maps";
|
||||
@import "plugins/leaflet-maps";
|
||||
@import "plugins/fullcalendar";
|
||||
@import "plugins/emoji-picker";
|
||||
@import "plugins/datatables";
|
||||
@import "plugins/toastify";
|
||||
@import "plugins/flatpicker";
|
||||
@import "plugins/flag-input";
|
||||
@import "plugins/choices";
|
||||
@import "plugins/tom-select";
|
||||
@import "plugins/range-slider";
|
||||
|
||||
// Pages
|
||||
@import "pages/authentication";
|
||||
@import "pages/dashboard";
|
||||
@import "pages/errors";
|
||||
@import "pages/profile";
|
||||
@import "pages/coming-soon";
|
||||
|
||||
//ecommerce scss
|
||||
@import "pages/ecommerce";
|
||||
@import "pages/extra-pages";
|
||||
@import "pages/categrory";
|
||||
@import "pages/sellers";
|
||||
@import "pages/invoice";
|
||||
@import "pages/watch";
|
||||
@import "pages/fashion";
|
||||
Vendored
+16
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Custom Bootstrap Css File
|
||||
*/
|
||||
|
||||
//Core files
|
||||
@import "./node_modules/bootstrap/scss/functions";
|
||||
@import "./node_modules/bootstrap/scss/variables";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://themesbrand.com/
|
||||
Contact: support@themesbrand.com
|
||||
File: Custom Css File
|
||||
*/
|
||||
@@ -0,0 +1,58 @@
|
||||
//
|
||||
// Font.scss
|
||||
//
|
||||
|
||||
//Google font - Lobster Two
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:wght@400;700&display=swap');
|
||||
|
||||
// Font - Switzer
|
||||
@font-face {
|
||||
font-family: 'Switzer';
|
||||
src: url('../fonts/Switzer-Light.woff2') format('woff2'),
|
||||
url('../fonts/Switzer-Light.woff') format('woff'),
|
||||
url('../fonts/Switzer-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Switzer';
|
||||
src: url('../fonts/Switzer-Regular.woff2') format('woff2'),
|
||||
url('../fonts/Switzer-Regular.woff') format('woff'),
|
||||
url('../fonts/Switzer-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Switzer';
|
||||
src: url('../fonts/Switzer-Medium.woff2') format('woff2'),
|
||||
url('../fonts/Switzer-Medium.woff') format('woff'),
|
||||
url('../fonts/Switzer-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Switzer';
|
||||
src: url('../fonts/Switzer-Semibold.woff2') format('woff2'),
|
||||
url('../fonts/Switzer-Semibold.woff') format('woff'),
|
||||
url('../fonts/Switzer-Semibold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Switzer';
|
||||
src: url('../fonts/Switzer-Bold.woff2') format('woff2'),
|
||||
url('../fonts/Switzer-Bold.woff') format('woff'),
|
||||
url('../fonts/Switzer-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Version: 1.2.0
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Icons Css File
|
||||
*/
|
||||
|
||||
// Icons Scss
|
||||
@import "plugins/icons/materialdesignicons";
|
||||
@import "plugins/icons/boxicons";
|
||||
@import "plugins/icons/remixicon";
|
||||
@import "plugins/icons/bootstrap-icons";
|
||||
@import "plugins/icons/phosphor";
|
||||
@@ -0,0 +1,97 @@
|
||||
//
|
||||
// _authentication.scss
|
||||
//
|
||||
.auth-page-wrapper {
|
||||
padding: 90px 0 80px;
|
||||
|
||||
.auth-header {
|
||||
.container-fluid {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
z-index: 1;
|
||||
|
||||
.card-header {
|
||||
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='1000' height='350' preserveAspectRatio='none' viewBox='0 0 1000 350'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1157%26quot%3b)' fill='none'%3e%3cpath d='M328.58 394.08C431.67 392.73 512.94 277.58 722.85 273.08 932.75 268.58 1010.02 108.53 1117.11 105.08' stroke='rgba(95%2c 157%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M453.78 394.57C543.12 393.38 614.47 292.66 795.29 289.27 976.11 285.88 1045.21 158.59 1136.8 156.27' stroke='rgba(95%2c 157%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M121.76 365.13C209.07 363.92 287.72 260.74 455.05 260.68 622.38 260.62 621.7 304.43 788.34 304.43 954.99 304.43 1037.59 260.77 1121.63 260.68' stroke='rgba(95%2c 157%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M476.17 407.18C572.4 393.77 628.5 169.12 783.24 168.97 937.99 168.82 1003.77 325.19 1090.32 329.97' stroke='rgba(95%2c 157%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M409.3 365.09C484.19 357.63 470.42 198 659.61 197.82 848.8 197.64 1033.73 271.12 1160.23 271.32' stroke='rgba(95%2c 157%2c 255%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1157'%3e%3crect width='1000' height='350' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
|
||||
// auth-pass-inputgroup
|
||||
.auth-pass-inputgroup {
|
||||
input[type="text"]+.btn .ri-eye-fill {
|
||||
&:before {
|
||||
content: "\ecb6";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// signin card title
|
||||
.signin-other-title {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px dashed var(--#{$prefix}border-color);
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
padding: 2px 16px;
|
||||
}
|
||||
}
|
||||
//passowrd validations
|
||||
#password-contain {
|
||||
display: none;
|
||||
|
||||
p {
|
||||
padding-left: 13px;
|
||||
|
||||
&.valid {
|
||||
color: $success;
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
left: -8px;
|
||||
content: "✔";
|
||||
}
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
color: $danger;
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
left: -8px;
|
||||
content: "✖";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.password-addon {
|
||||
z-index: 5;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.categrory-widgets {
|
||||
position: relative;
|
||||
|
||||
.category-img {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
bottom: 0;
|
||||
max-width: 120px;
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
#remove-actions {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
//
|
||||
// _coming-soon.scss
|
||||
//
|
||||
|
||||
// countdownlist
|
||||
|
||||
.countdownlist {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
|
||||
.countdownlist-item {
|
||||
width: 25%;
|
||||
|
||||
&:last-of-type {
|
||||
.count-num {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.count-title {
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-semibold;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(var(--#{$prefix}dark-rgb), 0.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.count-num {
|
||||
background-color: var(--#{$prefix}light);
|
||||
padding: 16px 10px;
|
||||
position: relative;
|
||||
border-radius: $card-border-radius;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: 32px;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ":";
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
right: -16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--#{$prefix}dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// coming soon
|
||||
|
||||
.move-animation {
|
||||
animation: mover 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes mover {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-input-subscribe {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
height: 50px;
|
||||
padding-right: 95px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown {
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.countdownlist{
|
||||
.countdownlist-item{
|
||||
.count-title{
|
||||
color: var(--#{$prefix}body-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
//
|
||||
// _dashboard.scss
|
||||
//
|
||||
|
||||
.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.dash-avatar {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.widget-responsive-fullscreen {
|
||||
@media (min-width: 1200px) and (max-width: 1440px) {
|
||||
.col-xxl-9 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
width: 33.33%;
|
||||
&:first-child {
|
||||
-webkit-box-ordinal-group: 7!important;
|
||||
-ms-flex-order: 6!important;
|
||||
order: 6!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,619 @@
|
||||
//
|
||||
// _ecommerce.scss
|
||||
//
|
||||
|
||||
//ecommerce landing page
|
||||
|
||||
#ecommerceHero {
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
opacity: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: $primary;
|
||||
top: 43%;
|
||||
border-radius: $border-radius;
|
||||
font-size: 24px;
|
||||
transition: all 0.5s ease;
|
||||
transform: rotate(45deg);
|
||||
|
||||
i {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control-next {
|
||||
right: 45px;
|
||||
}
|
||||
|
||||
.carousel-control-prev {
|
||||
left: 45px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-home {
|
||||
position: relative;
|
||||
padding: 160px 0 90px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 710px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width:1200px) {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-banner-1 {
|
||||
position: relative;
|
||||
|
||||
.product-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.bg-overlay {
|
||||
background: linear-gradient(270deg, $black, transparent);
|
||||
}
|
||||
|
||||
.blue {
|
||||
&.bg-overlay {
|
||||
background: linear-gradient(45deg, #0764619c, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.product-content {
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-about {
|
||||
padding: 180px 0 85px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.effect {
|
||||
.ecommerce-effect {
|
||||
position: absolute;
|
||||
height: 15rem;
|
||||
width: 15rem;
|
||||
filter: grayscale(33%) blur(40px);
|
||||
opacity: 0.1;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
left: 150px;
|
||||
|
||||
&:last-child {
|
||||
bottom: 20px;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-about-team {
|
||||
position: relative;
|
||||
padding: 150px 0 100px;
|
||||
|
||||
.team-box {
|
||||
.team-img {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
||||
img {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $success;
|
||||
left: 60%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: $danger;
|
||||
left: 38%;
|
||||
bottom: 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-about-cta {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -100px;
|
||||
}
|
||||
|
||||
.ecommerce-subscript {
|
||||
input {
|
||||
padding: 15px 105px 15px 24px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-product {
|
||||
display: flex;
|
||||
|
||||
.sidebar {
|
||||
width: 350px;
|
||||
|
||||
&.small-sidebar {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.offer-bar {
|
||||
width: 350px;
|
||||
|
||||
.offer-banner {
|
||||
height: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1200px) {
|
||||
flex-direction: column;
|
||||
|
||||
.sidebar,
|
||||
.offer-bar,
|
||||
.sidebar.small-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1440px) {
|
||||
.offer-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//ecommerce widgets
|
||||
.clothe-colors {
|
||||
li {
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked+label,
|
||||
input[type="checkbox"]:checked+label {
|
||||
&::after {
|
||||
content: "\f33e";
|
||||
font-family: Phosphor;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clothe-size {
|
||||
li {
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-size: $font-size-sm;
|
||||
border-radius: 5px;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked+label,
|
||||
input[type="checkbox"]:checked+label {
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-banner-2 {
|
||||
.product-content {
|
||||
position: absolute;
|
||||
right: 102px;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
|
||||
@media (max-width:425px) {
|
||||
right: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// product create
|
||||
|
||||
.error-msg {
|
||||
display: none;
|
||||
color: var(--#{$prefix}danger-text);
|
||||
font-size: .875em;
|
||||
}
|
||||
|
||||
.was-validated .error-msg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Product
|
||||
.categories-filter {
|
||||
.list-inline-item {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: var(--#{$prefix}tertiary-color);
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: 8px 15px;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-lable {
|
||||
transform: rotate(-90deg) translateX(-60%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -32px;
|
||||
}
|
||||
|
||||
.element-item {
|
||||
transition: all 0.5s;
|
||||
|
||||
.gallery-product {
|
||||
img {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
transition: all 0.5s;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
|
||||
.add-btn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.gallery-product-actions {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
opacity: 0;
|
||||
|
||||
.product-action {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.gallery-product {
|
||||
img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-product-actions {
|
||||
transition: all 0.5s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
transform: translateY(-27px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ecommerce-product-widgets {
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
|
||||
.action {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.ecommerce-deals-widgets {
|
||||
.gallery-product {
|
||||
img {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-deals {
|
||||
.count-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.count-num {
|
||||
font-size: 18px;
|
||||
background-color: rgba($white, 0.6);
|
||||
filter: blur(15%);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: -120px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.content {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// product slider
|
||||
|
||||
.latest-slider {
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
right: 55px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Testimonial client
|
||||
.testi-slider {
|
||||
.swiper-pagination {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0px 7px !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -5px;
|
||||
right: 0;
|
||||
border: 2px solid $secondary;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// client images
|
||||
.client-box {
|
||||
.client-desc {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 60px;
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
transform: rotate(67deg);
|
||||
border-color: transparent var(--#{$prefix}border-color) var(--#{$prefix}border-color) transparent;
|
||||
bottom: -30px;
|
||||
left: 80px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// client images
|
||||
.client-images {
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
max-height: 40px;
|
||||
width: 200px;
|
||||
margin: 6px auto;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
// Landing contdown
|
||||
.ecommerce-land-countdown {
|
||||
.countdownlist {
|
||||
.count-num {
|
||||
background-color: rgba($danger, 0.1);
|
||||
padding: 16px 8px;
|
||||
font-size: 22px;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 16px;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.count-title {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// INSTAGRAM
|
||||
.insta-img {
|
||||
background-color: $secondary;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
i {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.5s ease;
|
||||
font-size: 35px;
|
||||
color: $white;
|
||||
transform: scale(1.5) rotate(-15deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.2) rotate(-3deg);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
i {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// blog
|
||||
.blog-date {
|
||||
width: 60px;
|
||||
height: 68px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
margin-top: -70px;
|
||||
padding: 8px 0;
|
||||
border-top: 4px solid $primary;
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
// insta
|
||||
.insta-lable {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.categrory-box {
|
||||
position: relative;
|
||||
|
||||
.categrory-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
transition: all 0.5s ease-in;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.categrory-content {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.sticky-side-div {
|
||||
position: sticky;
|
||||
top: calc(#{$header-height} + 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
// product details
|
||||
.productSwiper {
|
||||
.swiper-slide {
|
||||
@media (min-width: 768px) {
|
||||
height: 80px !important;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.product-thumb {
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
&.swiper-slide-thumb-active {
|
||||
.product-thumb {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Delivery page
|
||||
@@ -0,0 +1,44 @@
|
||||
//
|
||||
// _errors.scss
|
||||
//
|
||||
|
||||
.error-basic-img{
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.error-500 {
|
||||
.title {
|
||||
font-size: 250px;
|
||||
}
|
||||
|
||||
.error-500-img {
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
.title {
|
||||
font-size: 150px;
|
||||
}
|
||||
|
||||
.error-500-img {
|
||||
width: 20% !important;
|
||||
top: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.title {
|
||||
font-size: 68px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.error-500-img {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,344 @@
|
||||
//
|
||||
// _extra-pages.scss
|
||||
//
|
||||
|
||||
.term-condition {
|
||||
position: relative;
|
||||
padding: 160px 0 300px 0;
|
||||
}
|
||||
|
||||
.term-card {
|
||||
position: relative;
|
||||
margin-top: -215px;
|
||||
}
|
||||
|
||||
//contact
|
||||
.map {
|
||||
line-height: 0;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.productswiper-2 {
|
||||
.swiper-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-widget {
|
||||
.brand-img {
|
||||
max-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 135px;
|
||||
min-width: 200px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 135px;
|
||||
width: 360px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.chat-conversation {
|
||||
height: calc(100vh - 299px);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 275px);
|
||||
}
|
||||
|
||||
.simplebar-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.simplebar-content {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-conversation-list {
|
||||
padding-top: 10px;
|
||||
margin-bottom: 0;
|
||||
|
||||
>li {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&:last-of-type {
|
||||
.conversation-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-list {
|
||||
|
||||
&.left {
|
||||
.check-message-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.message-box-drop {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.message-box-drop {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
margin: 0 16px 0 0
|
||||
/*rtl:0 0 0 16px*/
|
||||
;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-day-title {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
z-index: 1;
|
||||
padding: 6px 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba($primary, 0.2);
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
margin-bottom: 24px;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
align-items: flex-end;
|
||||
max-width: 85%;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.ctext-wrap {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ctext-content {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.ctext-wrap-content {
|
||||
padding: 12px 20px;
|
||||
background-color: var(--#{$prefix}light);
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
.attached-file {
|
||||
@media (max-width: 575.98px) {
|
||||
.attached-file-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown .dropdown-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-name {
|
||||
font-weight: $font-weight-medium;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
font-size: 18px;
|
||||
padding: 4px;
|
||||
color: $gray-600;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.message-img {
|
||||
border-radius: .2rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.message-img-list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.message-img-link {
|
||||
position: absolute;
|
||||
right: 10px
|
||||
/*rtl:auto*/
|
||||
;
|
||||
left: auto
|
||||
/*rtl:0*/
|
||||
;
|
||||
bottom: 10px;
|
||||
|
||||
li {
|
||||
>a {
|
||||
font-size: 18px;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.7);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.chat-avatar {
|
||||
order: 3;
|
||||
margin-right: 0px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
text-align: left;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
text-align: right;
|
||||
|
||||
.ctext-wrap {
|
||||
justify-content: flex-end;
|
||||
|
||||
.ctext-wrap-content {
|
||||
order: 2;
|
||||
background-color: rgba($primary, 0.2);
|
||||
color: $primary;
|
||||
text-align: right;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
.replymessage-block {
|
||||
background-color: rgba($white, 0.5);
|
||||
border-color: rgba(var(--vz-success-rgb), 1);
|
||||
color: $body-color;
|
||||
|
||||
.conversation-name {
|
||||
color: rgba(var(--vz-success-rgb), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-name {
|
||||
justify-content: flex-end;
|
||||
|
||||
.check-message-icon {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.time {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.name {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#subscribeModal {
|
||||
img {
|
||||
@media (min-width: 992px) {
|
||||
margin-top: -140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-cta {
|
||||
overflow-x: clip;
|
||||
|
||||
img {
|
||||
@media (max-width: 991.98px) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,275 @@
|
||||
//
|
||||
// _fashion.scss
|
||||
//
|
||||
|
||||
//modern fashion-home
|
||||
.modern-fashion-home{
|
||||
.font-effect {
|
||||
font-size: 14rem;
|
||||
opacity: 0.04;
|
||||
top: 50px;
|
||||
@media (max-width: 991.98px) {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-home-img {
|
||||
img {
|
||||
@media (max-width: 991.98px) {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.feedback-slider {
|
||||
:is(.swiper-button-next, .swiper-button-prev) {
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:is(.swiper-button-next, .swiper-button-prev) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subscribe-input {
|
||||
input {
|
||||
padding: calc($input-padding-y * 1.1) calc($input-padding-x * 1.1);
|
||||
padding-right: 145px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
//modern fashion home
|
||||
.modern-fashion-home {
|
||||
position: relative;
|
||||
padding: 170px 0 80px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 50px solid $warning;
|
||||
opacity: 0.1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: -90px;
|
||||
top: -90px;
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: -120px;
|
||||
bottom: -120px;
|
||||
height: 350px;
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.fashion-offer-widgets {
|
||||
height: 250px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
position: relative;
|
||||
padding: 150px 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
//products
|
||||
.product-widget {
|
||||
transition: all 0.5s ease;
|
||||
|
||||
.product-menu {
|
||||
position: absolute;
|
||||
right: calc($card-spacer-x * -0.5);
|
||||
top: calc($card-spacer-y * 0.5);
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
li {
|
||||
a {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
&:hover {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $warning;
|
||||
|
||||
i {
|
||||
&::before {
|
||||
content: "\f586";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
position: absolute;
|
||||
bottom: calc($card-spacer-y * -0.5);
|
||||
left: calc($card-spacer-x * 0.5);
|
||||
right: calc($card-spacer-x * 0.5);
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
}
|
||||
|
||||
.product-img-2 {
|
||||
transition: all 0.5s ease;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $box-shadow-lg;
|
||||
|
||||
.product-menu {
|
||||
right: calc($card-spacer-x * 0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
opacity: 1;
|
||||
bottom: calc($card-spacer-y * 0.5);
|
||||
}
|
||||
|
||||
.product-img-main {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-img-2 {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-product {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//category
|
||||
.category-widgets-main {
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.widgets-wrapper {
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
transition: all 0.2s linear;
|
||||
background: rgba($dark, 0.1);
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
transition: all 0.2s linear;
|
||||
background: rgba($dark, 0.1);
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
.effect::before,
|
||||
.effect::after {
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
transition: all 0.2s linear;
|
||||
background: rgba($dark, 0.1);
|
||||
}
|
||||
|
||||
.effect::before {
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
.effect::after {
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
&:hover::before,
|
||||
&:hover::after {
|
||||
width: calc(100% - 20px);
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
&:hover .effect::before,
|
||||
&:hover .effect::after {
|
||||
top: 10px;
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//trend fashion home
|
||||
|
||||
.trend-fashion-home {
|
||||
position: relative;
|
||||
padding: 105px 0 60px;
|
||||
}
|
||||
|
||||
.home-widgets {
|
||||
min-height: 85vh;
|
||||
height: 400px;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
//
|
||||
// _invoice.scss
|
||||
//
|
||||
|
||||
.invoice-table {
|
||||
tbody {
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.currency-select {
|
||||
.choices__inner {
|
||||
padding: 0px;
|
||||
padding-right: 15px;
|
||||
min-height: 0px;
|
||||
}
|
||||
|
||||
.choices__list--single {
|
||||
padding: 0px 16px 0 4px;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-one] {
|
||||
bottom: 0px;
|
||||
|
||||
:after {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
//
|
||||
// _profile.scss
|
||||
//
|
||||
|
||||
.profile-user {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.profile-photo-edit {
|
||||
position: absolute;
|
||||
right: $card-spacer-x;
|
||||
left: auto;
|
||||
top: $card-spacer-y;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-profile-image {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-img-file-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-basic{
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
//account
|
||||
|
||||
.profile-user-img {
|
||||
img {
|
||||
height: 285px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
//activity-timeline
|
||||
.acitivity-timeline {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.acitivity-item {
|
||||
position: relative;
|
||||
|
||||
.flex-shrink-0 {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.acitivity-avatar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
margin-top: 8px;
|
||||
background-color: $body-secondary-bg;
|
||||
border: 1px solid $primary;
|
||||
box-shadow: rgba($primary, 0.2) 2px 2px, rgba($primary, 0.1) 4px 4px, rgba($primary, 0.05) 6px 6px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 1px dashed var(--#{$prefix}border-color);
|
||||
left: 4px;
|
||||
height: 100%;
|
||||
top: 8px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
//
|
||||
// _sellers.scss
|
||||
//
|
||||
|
||||
.seller-search-box {
|
||||
.form-control {
|
||||
height: 50px;
|
||||
padding-left: 40px;
|
||||
padding-right: 110px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
i {
|
||||
left: 12px;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.order-tracking {
|
||||
.is-complete {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
outline: 6px solid var(--#{$prefix}body-bg);
|
||||
background-color: var(--#{$prefix}light);
|
||||
margin: 0 auto;
|
||||
transition: background 0.25s linear;
|
||||
-webkit-transition: background 0.25s linear;
|
||||
z-index: 2;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 14px;
|
||||
width: 7px;
|
||||
top: -2px;
|
||||
bottom: 0;
|
||||
left: 11px;
|
||||
margin: auto 0;
|
||||
border: 0px solid var(--#{$prefix}secondary-color);
|
||||
border-width: 0px 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&.completed {
|
||||
.is-complete {
|
||||
border-color: $success;
|
||||
background-color: $success;
|
||||
|
||||
&::after {
|
||||
border-color: $white;
|
||||
border-width: 0px 2px 2px 0;
|
||||
width: 7px;
|
||||
left: 11px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 115%;
|
||||
background-color: var(--#{$prefix}border-color);
|
||||
top: 15px;
|
||||
position: absolute;
|
||||
right: -70%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:last-child:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.track-orders {
|
||||
.order-tracking::before {
|
||||
width: 150%;
|
||||
right: -104%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
//
|
||||
// _watch.scss
|
||||
//
|
||||
|
||||
//watch layout
|
||||
.watch-layout {
|
||||
position: relative;
|
||||
padding: 175px 0 130px;
|
||||
min-height: 80vh;
|
||||
background-image: url('../images/watch/home.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
//watch category
|
||||
.watch-category-widgets {
|
||||
.category-btn {
|
||||
margin-top: -3.8rem;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.category-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-watch {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 450px;
|
||||
width: 450px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba($primary, 0.04);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.watch-cta {
|
||||
padding: 100px 0 185px;
|
||||
background-image: url('../images/watch/cta.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.video-card {
|
||||
position: relative;
|
||||
margin-top: -6.5rem;
|
||||
}
|
||||
|
||||
.video-main {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.waves {
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: rgba($gray-900, 0.3);
|
||||
opacity: 0;
|
||||
border-radius: 100%;
|
||||
right: -34px;
|
||||
bottom: -34px;
|
||||
z-index: 0;
|
||||
animation: waves 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.wave-1 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.wave-2 {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.wave-3 {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes waves {
|
||||
0% {
|
||||
transform: scale(0.2, 0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.9, 0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.watch-product {
|
||||
.watch-widgets-menu {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.watch-widgets-menu {
|
||||
opacity: 1;
|
||||
bottom: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.watch-widgets-menu {
|
||||
a {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--#{$prefix}body-color);
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
&:hover {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $warning;
|
||||
|
||||
i {
|
||||
&::before {
|
||||
content: "\f586";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
//
|
||||
// apexcharts.scss
|
||||
//
|
||||
|
||||
.apex-charts {
|
||||
min-height: 10px !important;
|
||||
text {
|
||||
font-family: $font-family-base !important;
|
||||
}
|
||||
.apexcharts-canvas {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-title,
|
||||
.apexcharts-tooltip-text {
|
||||
color: var(--#{$prefix}primary);
|
||||
font-family: $font-family-base !important;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip{
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent) !important;
|
||||
background-color: var(--#{$prefix}secondary-bg) !important;
|
||||
box-shadow: $box-shadow !important;
|
||||
* {
|
||||
font-family: $font-family-base !important;
|
||||
color: $gray-600 !important;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-title{
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), .75) !important;
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color-translucent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-dark{
|
||||
* {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-legend-series {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.apexcharts-gridline {
|
||||
pointer-events: none;
|
||||
stroke: rgba(var(--#{$prefix}light-rgb), .75);
|
||||
}
|
||||
|
||||
.apexcharts-legend-text {
|
||||
color: $gray-600 !important;
|
||||
font-family: $font-family-base !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.apexcharts-pie-label {
|
||||
fill: $white !important;
|
||||
}
|
||||
|
||||
.apexcharts-title-text, .apexcharts-subtitle-text{
|
||||
fill: $gray-500;
|
||||
}
|
||||
|
||||
.apexcharts-yaxis,
|
||||
.apexcharts-xaxis {
|
||||
text {
|
||||
font-size: 12px;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-family: $font-family-base !important;
|
||||
fill: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-yaxis-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// column dynamic loaded chart
|
||||
|
||||
#dynamicloadedchart-wrap {
|
||||
margin: 0px auto;
|
||||
max-width: 800px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#chart-year,
|
||||
#chart-quarter {
|
||||
width: 96%;
|
||||
max-width: 48%;
|
||||
box-shadow: none;
|
||||
padding-left: 0;
|
||||
padding-top: 20px;
|
||||
background: var(--#{$prefix}secondary-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
#chart-year {
|
||||
float: left;
|
||||
position: relative;
|
||||
transition: 1s ease transform;
|
||||
z-index: 3;
|
||||
&.chart-quarter-activated {
|
||||
transform: translateX(0);
|
||||
transition: 1s ease transform;
|
||||
}
|
||||
}
|
||||
|
||||
#chart-quarter {
|
||||
float: left;
|
||||
position: relative;
|
||||
z-index: -2;
|
||||
transition: 1s ease transform;
|
||||
&.active {
|
||||
transition: 1.1s ease-in-out transform;
|
||||
transform: translateX(0);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 480px) {
|
||||
#chart-year {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
#chart-quarter {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// radar chart
|
||||
|
||||
.apexcharts-radar-series{
|
||||
polygon, line{
|
||||
stroke: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-pie{
|
||||
circle ,line{
|
||||
stroke: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
text{
|
||||
fill: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.apex-charts {
|
||||
|
||||
.apexcharts-xaxis,
|
||||
.apexcharts-yaxis {
|
||||
line {
|
||||
stroke: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxis-tick {
|
||||
stroke: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
.apexcharts-pie-series,
|
||||
.apexcharts-bar-series {
|
||||
path {
|
||||
stroke: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-radialbar-track {
|
||||
path {
|
||||
stroke: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
|
||||
// .apexcharts-marker {
|
||||
// stroke: var(--#{$prefix}secondary-bg);
|
||||
// }
|
||||
|
||||
.apexcharts-boxPlot-series {
|
||||
path {
|
||||
stroke: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-treemap,
|
||||
.apexcharts-heatmap-series {
|
||||
rect {
|
||||
stroke: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip{
|
||||
&.apexcharts-theme-light{
|
||||
box-shadow: $box-shadow;
|
||||
color: $text-muted;
|
||||
background: var(--#{$prefix}secondary-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
font-family: $font-family-base;
|
||||
&::before {
|
||||
border-bottom-color: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-grid-borders{
|
||||
line{
|
||||
stroke: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
//
|
||||
// _autocomplete.scss
|
||||
//
|
||||
|
||||
.autoComplete_wrapper {
|
||||
display: block;
|
||||
|
||||
>input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-family: $input-font-family;
|
||||
font-size: $input-font-size;
|
||||
font-weight: $input-font-weight;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
background-clip: padding-box;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
background-image: none;
|
||||
|
||||
&::placeholder {
|
||||
padding: 0 !important;
|
||||
color: $input-placeholder-color !important;
|
||||
font-size: $input-font-size !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: $input-border-width solid $input-focus-border-color;
|
||||
color: $input-focus-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
|
||||
>ul {
|
||||
border-radius: $border-radius;
|
||||
border-color: $dropdown-border-color;
|
||||
background-color: $dropdown-bg;
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
max-height: 160px;
|
||||
margin: 0;
|
||||
animation-name: DropDownSlide;
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
|
||||
> li {
|
||||
font-size: $dropdown-font-size;
|
||||
margin: 0;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
border-radius: 0;
|
||||
background-color: $dropdown-bg;
|
||||
color: $dropdown-color;
|
||||
|
||||
mark {
|
||||
color: $danger;
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
&[aria-selected=true],
|
||||
&:hover {
|
||||
color: $dropdown-link-hover-color;
|
||||
@include gradient-bg($dropdown-link-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.no_result {
|
||||
padding: $dropdown-item-padding-y *2 $dropdown-item-padding-x;
|
||||
font-style: italic;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,406 @@
|
||||
//
|
||||
// _choices.scss
|
||||
//
|
||||
|
||||
.choices {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
font-size: 16px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.is-disabled{
|
||||
.choices__inner,
|
||||
.choices__input {
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 0.75);
|
||||
cursor: not-allowed;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.choices__item {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// data-type = select-one
|
||||
&[data-type*='select-one'] {
|
||||
cursor: pointer;
|
||||
.choices__inner{
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.choices__input{
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
background-color: $input-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
font-size: $input-font-size;
|
||||
border-radius: $input-border-radius;
|
||||
color: $input-color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.choices__button{
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
padding: 0;
|
||||
background-size: 8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: auto;
|
||||
margin-top: -10px;
|
||||
margin-right: 25px;
|
||||
margin-left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 10em;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0px 0px 0px 2px #00bcd4;
|
||||
}
|
||||
}
|
||||
|
||||
.choices__item[data-value=''] .choices__button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "\F0140";
|
||||
position: absolute;
|
||||
border: 0;
|
||||
border-color: $dark transparent transparent;
|
||||
right: 11.5px;
|
||||
left: auto;
|
||||
font-family: 'Material Design Icons';
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.is-open:after {
|
||||
margin-top: 0;
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// data-type = select- multiple & text
|
||||
|
||||
&[data-type*='select-multiple'],
|
||||
&[data-type*='text'] {
|
||||
.choices__inner {
|
||||
cursor: text;
|
||||
padding-right: $form-select-padding-x;
|
||||
}
|
||||
|
||||
.choices__button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-right: -4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid rgba($white, 0.5);
|
||||
border-right: 0;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
background-size: 8px;
|
||||
width: 8px;
|
||||
line-height: 1;
|
||||
opacity: 0.75;
|
||||
border-radius: 0;
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.choices__list--dropdown{
|
||||
padding-bottom: 10px;
|
||||
.choices__list{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-type*=select-multiple] {
|
||||
.choices__input {
|
||||
padding-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Select Light
|
||||
.input-light {
|
||||
.choices__inner {
|
||||
background-color: var(--#{$prefix}light);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
background-color: $form-select-bg;
|
||||
padding: 0.25rem ($form-select-padding-x + $form-select-indicator-padding) 0.1rem 0.5rem;
|
||||
border: $form-select-border-width solid $form-select-border-color;
|
||||
border-radius: $form-select-border-radius !important;
|
||||
font-size: $input-font-size;
|
||||
min-height: 40.59px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.is-focused,
|
||||
.is-open {
|
||||
.choices__inner {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.choices__list {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.choices__list--single {
|
||||
display: inline-block;
|
||||
padding: 4px 16px 4px 4px;
|
||||
width: 100%;
|
||||
|
||||
.choices__item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.choices__list--multiple {
|
||||
display: inline;
|
||||
.choices__item {
|
||||
display: inline-block;
|
||||
vertical-align: initial;
|
||||
border-radius: 7px;
|
||||
padding: 2px 7px;
|
||||
font-size: 11px;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-right: 3.75px;
|
||||
margin-bottom: 3.75px;
|
||||
margin-top: 2px;
|
||||
background-color: var(--#{$prefix}primary);
|
||||
border: 1px solid var(--#{$prefix}primary);
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
color: $white;
|
||||
box-shadow: $element-shadow;
|
||||
&[data-deletable] {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
&.is-highlighted {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
border: 1px solid var(--#{$prefix}primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.is-disabled {
|
||||
.choices__list--multiple {
|
||||
.choices__item {
|
||||
background-color: $secondary;
|
||||
border: 1px solid $secondary
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choices__list--dropdown {
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: $dropdown-bg;
|
||||
border: 1px solid $dropdown-border-color;
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
top: 100%;
|
||||
margin-top: 0;
|
||||
padding: 10px 10px 20px 10px;
|
||||
border-bottom-left-radius: 2.5px;
|
||||
border-bottom-right-radius: 2.5px;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
will-change: visibility;
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
transform: translateY(1px);
|
||||
&.is-active {
|
||||
visibility: visible;
|
||||
animation-name: DropDownSlide;
|
||||
}
|
||||
|
||||
.choices__item--selectable.is-highlighted {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
|
||||
.choices__list {
|
||||
margin: 0 -16px -16px;
|
||||
}
|
||||
|
||||
.has-no-results {
|
||||
font-style: italic;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.choices__item--selectable:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.is-open{
|
||||
.choices__list--dropdown {
|
||||
border-color: $dropdown-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.is-flipped{
|
||||
.choices__list--dropdown {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
&.is-active {
|
||||
animation-name: DropDownSlideDown;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.choices__list--dropdown{
|
||||
.choices__list {
|
||||
position: relative;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
.choices__item {
|
||||
position: relative;
|
||||
font-size: $dropdown-font-size;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x $dropdown-item-padding-y 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.choices__list--dropdown {
|
||||
.choices__item--selectable {
|
||||
|
||||
&:after {
|
||||
content: attr(data-select-text);
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.is-highlighted {
|
||||
&:after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.choices__item {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.choices__item--selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.choices__item--disabled {
|
||||
cursor: not-allowed;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.choices__heading {
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: 12px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid $dropdown-border-color;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.choices__button {
|
||||
text-indent: -9999px;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.choices__input {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
background-color: $input-bg;
|
||||
color: $input-color;
|
||||
font-size: $input-font-size;
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
max-width: 100%;
|
||||
padding: 2px 0 2px 2px;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.choices__placeholder {
|
||||
color: $input-placeholder-color;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
[data-bs-theme="dark"]{
|
||||
.choices[data-type*=select-one]{
|
||||
.choices__button{
|
||||
filter: $btn-close-white-filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
//
|
||||
// _ckeditor.scss
|
||||
//
|
||||
|
||||
.ck {
|
||||
font-family: $font-family-base !important;
|
||||
|
||||
&.ck-reset_all, &.ck-reset_all *{
|
||||
color: var(--#{$prefix}tertiary-color) !important;
|
||||
}
|
||||
&.ck-toolbar{
|
||||
background: #{rgba(var(--#{$prefix}light-rgb), .75)} !important;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.ck-toolbar {
|
||||
border: 1px solid $input-border-color !important;
|
||||
|
||||
&.ck-toolbar_grouping>.ck-toolbar__items {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
.ck.ck-toolbar__separator {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ck-editor__main>.ck-editor__editable {
|
||||
border-top: 0 !important;
|
||||
background-color: var(--#{$prefix}secondary-bg) !important;
|
||||
border-color: $input-border-color !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&.ck-dropdown__panel{
|
||||
background: var(--#{$prefix}secondary-bg) !important;
|
||||
box-shadow: $box-shadow-lg;
|
||||
animation-name: DropDownSlide;
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
border-radius: $dropdown-border-radius;
|
||||
}
|
||||
|
||||
&.ck-list {
|
||||
background: var(--#{$prefix}secondary-bg) !important;
|
||||
}
|
||||
|
||||
&.ck-dropdown {
|
||||
.ck-dropdown__panel {
|
||||
&.ck-dropdown__panel_ne,
|
||||
&.ck-dropdown__panel_se {
|
||||
left: 0;
|
||||
right: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ck-editor__editable_inline {
|
||||
&[dir=ltr] {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ck-dropdown__panel {
|
||||
box-shadow: $dropdown-box-shadow !important;
|
||||
border-radius: $dropdown-border-radius !important;
|
||||
border: 1px solid $dropdown-border-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ck.ck-button,
|
||||
a.ck.ck-button{
|
||||
|
||||
&:focus, &:active{
|
||||
box-shadow: none !important;
|
||||
border: 1px solid var(--#{$prefix}light) !important;
|
||||
}
|
||||
|
||||
&:not(.ck-disabled){
|
||||
&:hover{
|
||||
background: var(--#{$prefix}light) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ck-on{
|
||||
background: var(--#{$prefix}light) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,
|
||||
.ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners{
|
||||
border-radius: $border-radius !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
|
||||
.ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
|
||||
border-radius: $border-radius !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ck-editor__editable {
|
||||
min-height: 245px !important;
|
||||
}
|
||||
|
||||
.ck[class*=ck-heading_heading] {
|
||||
font-weight: $font-weight-medium !important;
|
||||
}
|
||||
|
||||
.ck,
|
||||
a.ck {
|
||||
&.ck-button {
|
||||
&.ck-on:not(.ck-disabled) {
|
||||
&:hover,
|
||||
&:active {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ck{
|
||||
&.ck-tooltip{
|
||||
.ck-tooltip__text {
|
||||
background: $dark !important;
|
||||
color: $light !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ck-input-text{
|
||||
background: $input-bg !important;
|
||||
border: 1px solid $input-border-color !important;
|
||||
&:focus{
|
||||
border: 1px solid $input-focus-border-color !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ck-balloon-panel{
|
||||
background: $dropdown-bg !important;
|
||||
border: 1px solid $dropdown-border-color !important;
|
||||
|
||||
&[class*=arrow_n]{
|
||||
&:after{
|
||||
border-bottom-color: $dropdown-bg !important;
|
||||
}
|
||||
|
||||
&::before{
|
||||
border-bottom-color: $dropdown-border-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ck.ck-labeled-field-view>.ck.ck-labeled-field-view__input-wrapper>.ck.ck-label{
|
||||
background: $dropdown-bg !important;
|
||||
}
|
||||
|
||||
// ck-editor-reverse
|
||||
|
||||
.ck-editor-reverse{
|
||||
.ck-editor{
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.ck{
|
||||
&.ck-editor__main>.ck-editor__editable{
|
||||
border: 1px solid $input-border-color !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
|
||||
.ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners{
|
||||
border-radius: $border-radius !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,
|
||||
.ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners{
|
||||
border-radius: $border-radius !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
.ck.ck-toolbar>.ck-toolbar__items {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
//
|
||||
// _colorpicker.scss
|
||||
//
|
||||
|
||||
.pcr-app{
|
||||
background: var(--#{$prefix}secondary-bg);
|
||||
box-shadow: $box-shadow-lg;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
.pickr{
|
||||
.pcr-button{
|
||||
height: 60px;
|
||||
width: 150px;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $element-shadow;
|
||||
&::after, &::before{
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pcr-app{
|
||||
&[data-theme=classic]{
|
||||
.pcr-selection {
|
||||
.pcr-color-preview{
|
||||
margin-right: .75em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pcr-color-chooser, .pcr-color-opacity{
|
||||
margin-left: .75em;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-theme="monolith"]{
|
||||
.pcr-result{
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pcr-interaction{
|
||||
.pcr-type.active{
|
||||
background: var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
.pcr-result{
|
||||
background-color: $input-bg;
|
||||
color: $input-color;
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
|
||||
input{
|
||||
border-radius: $input-border-radius !important;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
background-color: $input-focus-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.pcr-save{
|
||||
background: $success !important;
|
||||
}
|
||||
|
||||
.pcr-clear, .pcr-cancel{
|
||||
background: $danger !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
//
|
||||
// _custom-scrollbar.scss
|
||||
//
|
||||
|
||||
[data-simplebar] {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.simplebar-wrapper {
|
||||
overflow: hidden;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
max-width: inherit;
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
.simplebar-mask {
|
||||
direction: inherit;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.simplebar-offset {
|
||||
direction: inherit !important;
|
||||
box-sizing: inherit !important;
|
||||
resize: none !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0 !important;
|
||||
bottom: 0;
|
||||
right: 0 !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.simplebar-content-wrapper {
|
||||
direction: inherit;
|
||||
box-sizing: border-box !important;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
|
||||
width: auto;
|
||||
visibility: visible;
|
||||
overflow: auto; /* Scroll on this element otherwise element can't have a padding applied properly */
|
||||
max-width: 100%; /* Not required for horizontal scroll to trigger */
|
||||
max-height: 100%; /* Needed for vertical scroll to trigger */
|
||||
scrollbar-width: none;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.simplebar-content-wrapper::-webkit-scrollbar,
|
||||
.simplebar-hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.simplebar-content:before,
|
||||
.simplebar-content:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
|
||||
.simplebar-placeholder {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.simplebar-height-auto-observer-wrapper {
|
||||
box-sizing: inherit !important;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 1px;
|
||||
position: relative;
|
||||
float: left;
|
||||
max-height: 1px;
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
flex-grow: inherit;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.simplebar-height-auto-observer {
|
||||
box-sizing: inherit;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 1000%;
|
||||
width: 1000%;
|
||||
min-height: 1px;
|
||||
min-width: 1px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.simplebar-track {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-simplebar].simplebar-dragging .simplebar-content {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
[data-simplebar].simplebar-dragging .simplebar-track {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
width: 6px;
|
||||
min-height: 10px;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: #a2adb7;
|
||||
border-radius: 7px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar.simplebar-visible:before {
|
||||
/* When hovered, remove all transitions from drag handle */
|
||||
opacity: 0.5;
|
||||
transition: opacity 0s linear;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-vertical {
|
||||
top: 0;
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal {
|
||||
left: 0;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
|
||||
height: 100%;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
|
||||
right: auto;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
height: 7px;
|
||||
min-height: 0;
|
||||
min-width: 10px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Rtl support */
|
||||
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hs-dummy-scrollbar-size {
|
||||
direction: rtl;
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.simplebar-hide-scrollbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.custom-scroll {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
[data-simplebar-track="#{$color}"]{
|
||||
.simplebar-scrollbar:before{
|
||||
background: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
//
|
||||
// _datatables.scss
|
||||
//
|
||||
|
||||
table.dataTable td.dataTables_empty,
|
||||
table.dataTable th.dataTables_empty {
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
font-weight: $font-weight-semibold;
|
||||
--tb-table-accent-bg: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
|
||||
table.dataTable>thead .sorting:before,
|
||||
table.dataTable>thead .sorting_asc:before,
|
||||
table.dataTable>thead .sorting_desc:before,
|
||||
table.dataTable>thead .sorting_asc_disabled:before,
|
||||
table.dataTable>thead .sorting_desc_disabled:before {
|
||||
content:"\f0360";
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 12px;
|
||||
font-size: .8rem;
|
||||
font-family: "Material Design Icons";
|
||||
}
|
||||
|
||||
table.dataTable>thead .sorting:after,
|
||||
table.dataTable>thead .sorting_asc:after,
|
||||
table.dataTable>thead .sorting_desc:after,
|
||||
table.dataTable>thead .sorting_asc_disabled:after,
|
||||
table.dataTable>thead .sorting_desc_disabled:after {
|
||||
content: "\f035d";
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 18px;
|
||||
font-size: .8rem;
|
||||
font-family: "Material Design Icons";
|
||||
}
|
||||
|
||||
table.dataTable>tbody>tr.child span.dtr-title {
|
||||
font-weight: $font-weight-semibold;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
|
||||
//responsive
|
||||
table {
|
||||
&.dataTable {
|
||||
&.dtr-inline {
|
||||
&.collapsed {
|
||||
>tbody {
|
||||
>tr {
|
||||
|
||||
>th,
|
||||
>td {
|
||||
&.dtr-control {
|
||||
&::before {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
border-color: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.parent {
|
||||
&.parent {
|
||||
>th {
|
||||
&.dtr-control {
|
||||
&::before {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>td {
|
||||
&.dtr-control {
|
||||
&::before {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>tbody {
|
||||
>tr {
|
||||
&.child {
|
||||
span {
|
||||
&.dtr-title {
|
||||
min-width: 135px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table-card {
|
||||
|
||||
.dataTables_length,
|
||||
.dataTables_filter {
|
||||
padding: $card-cap-padding-y $card-cap-padding-x;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.dataTables_info,
|
||||
.dataTables_paginate {
|
||||
padding: $card-cap-padding-y $card-cap-padding-x;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper {
|
||||
.col-md-6 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div {
|
||||
&.dataTables_filter {
|
||||
input {
|
||||
width: calc(100% - 52px);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div{
|
||||
&.dtr-modal {
|
||||
div {
|
||||
&.dtr-modal-display {
|
||||
background-color: $modal-content-bg;
|
||||
border-color: $border-color;
|
||||
box-shadow: none;
|
||||
height: 70%;
|
||||
}
|
||||
&.dtr-modal-content {
|
||||
padding: $modal-inner-padding;
|
||||
h2 {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-semibold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.dtr-details{
|
||||
tr {
|
||||
td {
|
||||
padding: $table-cell-padding-y $table-cell-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dtr-modal-close {
|
||||
font-size: 24px;
|
||||
top: 9px;
|
||||
right: 11px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
border-color: $border-color;
|
||||
&:hover {
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dt-buttons {
|
||||
button.dt-button,
|
||||
div.dt-button,
|
||||
a.dt-button,
|
||||
input.dt-button {
|
||||
border-color: var(--#{$prefix}border-color-translucent);
|
||||
background: var(--#{$prefix}secondary-bg);
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// Dropzone
|
||||
//
|
||||
|
||||
|
||||
.dropzone {
|
||||
min-height: 230px;
|
||||
border: 2px dashed var(--#{$prefix}border-color);
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
border-radius: 6px;
|
||||
|
||||
.dz-message {
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-dz-thumbnail]{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
//
|
||||
// emoji-picker.scss
|
||||
//
|
||||
|
||||
.fg-emoji-picker{
|
||||
width: 250px !important;
|
||||
box-shadow: $box-shadow !important;
|
||||
top: auto !important;
|
||||
bottom: 130px;
|
||||
|
||||
*{
|
||||
font-family: $font-family-base !important;
|
||||
color: var(--#{$prefix}body-color) !important;
|
||||
}
|
||||
@media (max-width:991.98px) {
|
||||
left: 14px !important;
|
||||
top: auto !important;
|
||||
bottom: 118px;
|
||||
}
|
||||
|
||||
.fg-emoji-picker-container-title{
|
||||
color: $dark !important;
|
||||
}
|
||||
|
||||
.fg-emoji-picker-search{
|
||||
height: 40px !important;
|
||||
input{
|
||||
background-color: $input-bg !important;
|
||||
color: $input-color !important;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x !important;
|
||||
font-size: $font-size-base !important;
|
||||
&::placeholder{
|
||||
color: $input-placeholder-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
svg{
|
||||
fill: var(--#{$prefix}body-color) !important;
|
||||
right: 11px;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.fg-emoji-picker-categories{
|
||||
background-color: $light !important;
|
||||
li.active{
|
||||
background-color: rgba(var(--bs-primary-rgb), 0.2);
|
||||
}
|
||||
a{
|
||||
&:hover{
|
||||
background-color: rgba(var(--bs-primary-rgb), 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.fg-emoji-picker-grid > li:hover{
|
||||
background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
|
||||
}
|
||||
|
||||
a.fg-emoji-picker-close-button{
|
||||
background-color: darken($light, 4%) !important;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
// flag input
|
||||
|
||||
[data-input-flag] {
|
||||
position: relative;
|
||||
|
||||
.dropdown-menu {
|
||||
.dropdown-menu-list {
|
||||
max-height: 158px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), .075);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-option-flag-img-name] {
|
||||
.flag-input {
|
||||
padding-left: 45px;
|
||||
background-image: url("../images/flags/us.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 14px 8px;
|
||||
background-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-option-flag-name],
|
||||
[data-option-flag-img-name] {
|
||||
&::before {
|
||||
content: "\f0140";
|
||||
font-family: "Material Design Icons";
|
||||
position: absolute;
|
||||
right: $input-padding-x;
|
||||
top: $input-padding-y;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-option-countrycode="false"] {
|
||||
.country-codeno {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-search-input="false"] {
|
||||
.searchlist-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,850 @@
|
||||
//
|
||||
// _flatpicker.scss
|
||||
//
|
||||
|
||||
.flatpickr-calendar {
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
animation: none;
|
||||
direction: ltr;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
width: 307.875px;
|
||||
box-sizing: border-box;
|
||||
touch-action: manipulation;
|
||||
background: $dropdown-bg;
|
||||
box-shadow: 1px 0 0 var(--#{$prefix}border-color-translucent), -1px 0 0 var(--#{$prefix}border-color-translucent), 0 1px 0 var(--#{$prefix}border-color-translucent), 0 -1px 0 var(--#{$prefix}border-color-translucent), 0 3px 13px rgba(0, 0, 0, 0.08);
|
||||
|
||||
&.open,
|
||||
&.inline {
|
||||
opacity: 1;
|
||||
max-height: 640px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.open {
|
||||
display: inline-block;
|
||||
z-index: 1056;
|
||||
}
|
||||
|
||||
&.animate.open {
|
||||
animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
&.inline {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
|
||||
.flatpickr-rContainer {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
.flatpickr-days {
|
||||
width: 100%;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
|
||||
|
||||
.dayContainer {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
.flatpickr-day {
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-time {
|
||||
border: $input-border-width solid $input-border-color !important;
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.static {
|
||||
position: absolute;
|
||||
top: calc(100% + 2px);
|
||||
&.open {
|
||||
z-index: 999;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
|
||||
box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
|
||||
}
|
||||
|
||||
.hasWeeks .dayContainer,
|
||||
.hasTime .dayContainer {
|
||||
border-bottom: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.hasWeeks .dayContainer {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&.hasTime .flatpickr-time {
|
||||
height: 40px;
|
||||
border-top: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
&.noCalendar.hasTime .flatpickr-time {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
border: solid transparent;
|
||||
content: '';
|
||||
height: 0;
|
||||
width: 0;
|
||||
left: 22px;
|
||||
}
|
||||
|
||||
&.rightMost::before,
|
||||
&.arrowRight::before,
|
||||
&.rightMost::after,
|
||||
&.arrowRight::after {
|
||||
left: auto;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
&.arrowCenter::before,
|
||||
&.arrowCenter::after {
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-width: 5px;
|
||||
margin: 0 -5px;
|
||||
}
|
||||
&::after {
|
||||
border-width: 4px;
|
||||
margin: 0 -4px;
|
||||
}
|
||||
|
||||
&.arrowTop::before,
|
||||
&.arrowTop::after {
|
||||
bottom: 100%;
|
||||
}
|
||||
&.arrowTop::before {
|
||||
border-bottom-color: var(--#{$prefix}primary);
|
||||
}
|
||||
&.arrowTop::after {
|
||||
border-bottom-color: var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
&.arrowBottom::before,
|
||||
&.arrowBottom::after {
|
||||
top: 100%;
|
||||
}
|
||||
&.arrowBottom::before {
|
||||
border-top-color: var(--#{$prefix}primary);
|
||||
}
|
||||
&.arrowBottom::after {
|
||||
border-top-color: var(--#{$prefix}primary);
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flatpickr-months {
|
||||
display: flex;
|
||||
background-color: var(--#{$prefix}primary);
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
|
||||
.flatpickr-month {
|
||||
background: transparent;
|
||||
color: rgba($white, 0.9);
|
||||
fill: rgba($white, 0.9);
|
||||
height: 34px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flatpickr-prev-month,
|
||||
.flatpickr-next-month {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
height: 34px;
|
||||
padding: 10px;
|
||||
z-index: 3;
|
||||
color: rgba($white, 0.9);
|
||||
fill: rgba($white, 0.9);
|
||||
|
||||
&.flatpickr-disabled{
|
||||
display: none;
|
||||
}
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.flatpickr-prev-month {
|
||||
/*
|
||||
/*rtl:begin:ignore*/
|
||||
/*
|
||||
*/
|
||||
left: 0;
|
||||
/*
|
||||
/*rtl:end:ignore*/
|
||||
/*
|
||||
*/
|
||||
}
|
||||
/*
|
||||
/*rtl:begin:ignore*/
|
||||
/*
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
&.flatpickr-next-month {
|
||||
/*
|
||||
/*rtl:begin:ignore*/
|
||||
/*
|
||||
*/
|
||||
right: 0;
|
||||
/*
|
||||
/*rtl:end:ignore*/
|
||||
/*
|
||||
*/
|
||||
}
|
||||
/*
|
||||
/*rtl:begin:ignore*/
|
||||
/*
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
&:hover {
|
||||
color: #959ea9;
|
||||
|
||||
svg {
|
||||
fill: rgba($white, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
path {
|
||||
transition: fill 0.1s;
|
||||
fill: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.numInputWrapper {
|
||||
position: relative;
|
||||
height: auto;
|
||||
|
||||
input,
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
|
||||
&::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 14px;
|
||||
padding: 0 4px 0 2px;
|
||||
height: 50%;
|
||||
line-height: 50%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(var(--#{$prefix}dark-rgb),0.15);
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&.arrowUp {
|
||||
top: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
&:after {
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 4px solid rgba(57,57,57,0.6);
|
||||
top: 26%;
|
||||
}
|
||||
}
|
||||
|
||||
&.arrowDown {
|
||||
top: 50%;
|
||||
|
||||
&:after {
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid rgba(57,57,57,0.6);
|
||||
top: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: auto;
|
||||
|
||||
path {
|
||||
fill: rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.05);
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-current-month {
|
||||
font-size: 100%;
|
||||
line-height: inherit;
|
||||
font-weight: 300;
|
||||
color: inherit;
|
||||
position: absolute;
|
||||
width: 75%;
|
||||
left: 12.5%;
|
||||
padding: 10.48px 0 0 0;
|
||||
line-height: 1;
|
||||
height: 34px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
|
||||
span.cur-month {
|
||||
font-family: inherit;
|
||||
font-weight: 700;
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
margin-left: 0.5ch;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.numInputWrapper {
|
||||
width: 6ch;
|
||||
width: 7ch\0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span{
|
||||
&.arrowUp::after {
|
||||
border-bottom-color: rgba(0,0,0,0.9);
|
||||
}
|
||||
&.arrowDown:after {
|
||||
border-top-color: rgba(0,0,0,0.9);
|
||||
}
|
||||
}
|
||||
|
||||
input.cur-year {
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
cursor: text;
|
||||
padding: 0 0 0 0.5ch;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: $font-weight-semibold;
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
vertical-align: initial;
|
||||
appearance: textfield;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
font-size: 100%;
|
||||
color: rgba($white, 0.9);
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-monthDropdown-months {
|
||||
appearance: menulist;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: $font-weight-semibold;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
margin: -1px 0 0 0;
|
||||
outline: none;
|
||||
padding: 0 0 0 0.5ch;
|
||||
position: relative;
|
||||
vertical-align: initial;
|
||||
width: auto;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.flatpickr-monthDropdown-month {
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
color: rgba($black, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flatpickr-weekdays {
|
||||
background-color: var(--#{$prefix}light);
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
// border-bottom: 1px solid $border-color;
|
||||
.flatpickr-weekdaycontainer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
span.flatpickr-weekday {
|
||||
cursor: default;
|
||||
font-size: 90%;
|
||||
background: var(--#{$prefix}light);
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
display: block;
|
||||
flex: 1;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.dayContainer,
|
||||
.flatpickr-weeks {
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
.flatpickr-days {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: 307.875px;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dayContainer {
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
text-align: left;
|
||||
width: 307.875px;
|
||||
min-width: 307.875px;
|
||||
max-width: 307.875px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
opacity: 1;
|
||||
+ .dayContainer {
|
||||
box-shadow: -1px 0 0 #e6e6e6;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-day {
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 150px;
|
||||
box-sizing: border-box;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
width: 14.2857143%;
|
||||
flex-basis: 14.2857143%;
|
||||
max-width: 39px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 0.7);
|
||||
}
|
||||
|
||||
&.inRange,
|
||||
&.prevMonthDay.inRange,
|
||||
&.nextMonthDay.inRange,
|
||||
&.today.inRange,
|
||||
&.prevMonthDay.today.inRange,
|
||||
&.nextMonthDay.today.inRange,
|
||||
&:hover,
|
||||
&.prevMonthDay:hover,
|
||||
&.nextMonthDay:hover,
|
||||
&:focus,
|
||||
&.prevMonthDay:focus,
|
||||
&.nextMonthDay:focus {
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 0.06);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.today {
|
||||
// border-color: var(--#{$prefix}primary);
|
||||
color: var(--#{$prefix}primary);
|
||||
font-weight: $font-weight-medium;
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 0.1);
|
||||
box-shadow: $element-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
border-color: var(--#{$prefix}primary);
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.startRange,
|
||||
&.endRange,
|
||||
&.selected.inRange,
|
||||
&.startRange.inRange,
|
||||
&.endRange.inRange,
|
||||
&.selected:focus,
|
||||
&.startRange:focus,
|
||||
&.endRange:focus,
|
||||
&.selected:hover,
|
||||
&.startRange:hover,
|
||||
&.endRange:hover,
|
||||
&.selected.prevMonthDay,
|
||||
&.startRange.prevMonthDay,
|
||||
&.endRange.prevMonthDay,
|
||||
&.selected.nextMonthDay,
|
||||
&.startRange.nextMonthDay,
|
||||
&.endRange.nextMonthDay {
|
||||
background: var(--#{$prefix}primary);
|
||||
box-shadow: $element-shadow;
|
||||
color: $white;
|
||||
border-color: var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.startRange,
|
||||
&.endRange{
|
||||
&.startRange {
|
||||
border-radius: 50px 0 0 50px;
|
||||
+ .endRange:not(:nth-child(7n+1)) {
|
||||
box-shadow: -10px 0 0 var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
.endRange{
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.startRange,
|
||||
&.endRange{
|
||||
&.endRange {
|
||||
border-radius: 0 50px 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.inRange {
|
||||
border-radius: 0;
|
||||
box-shadow: -5px 0 0 rgba(var(--#{$prefix}primary-rgb), 0.02), 5px 0 0 rgba(var(--#{$prefix}primary-rgb), 0.02);
|
||||
}
|
||||
|
||||
&.flatpickr-disabled,
|
||||
&.flatpickr-disabled:hover,
|
||||
&.prevMonthDay,
|
||||
&.nextMonthDay,
|
||||
&.notAllowed,
|
||||
&.notAllowed.prevMonthDay,
|
||||
&.notAllowed.nextMonthDay {
|
||||
color: rgba(var(--#{$prefix}secondary-color-rgb),0.3);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.flatpickr-disabled,
|
||||
&.flatpickr-disabled:hover {
|
||||
cursor: not-allowed;
|
||||
color: rgba(var(--#{$prefix}secondary-color-rgb),0.3);
|
||||
}
|
||||
|
||||
&.week.selected {
|
||||
border-radius: 0;
|
||||
box-shadow: -5px 0 0 var(--#{$prefix}primary), 5px 0 0 var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.rangeMode .flatpickr-day {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.flatpickr-weekwrapper {
|
||||
float: left;
|
||||
.flatpickr-weeks {
|
||||
padding: 0 12px;
|
||||
box-shadow: 1px 0 0 var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
.flatpickr-weekday {
|
||||
float: none;
|
||||
width: 100%;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
span{
|
||||
&.flatpickr-day,
|
||||
&.flatpickr-day:hover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
color: rgba(var(--#{$prefix}secondary-color-rgb),0.3);
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flatpickr-innerContainer {
|
||||
display: block;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flatpickr-rContainer {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.flatpickr-time {
|
||||
text-align: center;
|
||||
outline: 0;
|
||||
display: block;
|
||||
height: 0;
|
||||
line-height: 40.59px;
|
||||
max-height: 40.59px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.numInputWrapper {
|
||||
flex: 1;
|
||||
width: 40%;
|
||||
height: 40.59px;
|
||||
float: left;
|
||||
span{
|
||||
&.arrowUp, &.arrowDown{
|
||||
&:after {
|
||||
border-bottom-color: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hasSeconds .numInputWrapper {
|
||||
width: 26%;
|
||||
}
|
||||
|
||||
&.time24hr .numInputWrapper {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
appearance: textfield;
|
||||
|
||||
&.flatpickr-hour {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.flatpickr-minute,
|
||||
&.flatpickr-second {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flatpickr-time-separator,
|
||||
.flatpickr-am-pm {
|
||||
height: inherit;
|
||||
float: left;
|
||||
line-height: inherit;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
font-weight: bold;
|
||||
width: 2%;
|
||||
user-select: none;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.flatpickr-am-pm {
|
||||
outline: 0;
|
||||
width: 18%;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
input, .flatpickr-am-pm{
|
||||
&:hover, &:focus{
|
||||
background: rgba(var(--#{$prefix}primary-rgb), 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-am-pm,
|
||||
.numInput,
|
||||
.numInputWrapper {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-input[readonly] {
|
||||
cursor: pointer;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
|
||||
[data-inline-date="true"],[data-time-inline] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes fpFadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
[datepicker-inline],
|
||||
[timepicker-inline] {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
//
|
||||
// _form-input-spin.scss
|
||||
//
|
||||
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.input-step {
|
||||
border: 1px solid $input-border-color;
|
||||
display: inline-flex;
|
||||
overflow: visible;
|
||||
height: 37.5px;
|
||||
@include border-radius($input-border-radius, 0);
|
||||
background: $input-bg;
|
||||
padding: 4px;
|
||||
|
||||
input {
|
||||
width: 4em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: $input-color;
|
||||
border-radius: $input-border-radius;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 1.4em;
|
||||
font-weight: 300;
|
||||
height: 100%;
|
||||
line-height: 0.1em;
|
||||
font-size: 1.4em;
|
||||
padding: 0.2em !important;
|
||||
background: var(--#{$prefix}light);
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
border: none;
|
||||
border-radius: $btn-border-radius;
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: var(--#{$prefix}light);
|
||||
|
||||
button {
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.light-input {
|
||||
background: var(--#{$prefix}light);
|
||||
|
||||
input {
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.input-step {
|
||||
&.step-#{$color} {
|
||||
button {
|
||||
background-color: $value;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,447 @@
|
||||
//
|
||||
// _fullcalendar.scss
|
||||
//
|
||||
|
||||
|
||||
.fc td,
|
||||
.fc th {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
.fc {
|
||||
.fc-toolbar {
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
|
||||
.fc-left,
|
||||
.fc-right,
|
||||
.fc-center {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
>*>* {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.fc-today-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-col-header-cell {
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
.fc-col-header-cell-cushion {
|
||||
display: block;
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-number {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: $font-weight-medium;
|
||||
margin: 2px;
|
||||
}
|
||||
.fc-toolbar-chunk {
|
||||
|
||||
.fc-button-group{
|
||||
.fc-button{
|
||||
background-color: rgba(var(--#{$prefix}secondary-rgb), 0.15) ;
|
||||
color: var(--#{$prefix}secondary);
|
||||
border: none;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active,&.active,&.fc-button-active{
|
||||
background-color: var(--#{$prefix}secondary);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fc-today-button {
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 0.1) !important;
|
||||
|
||||
.fc-daygrid-day-number {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-day {
|
||||
&.fc-day-today {
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 0.1);
|
||||
|
||||
.fc-daygrid-day-number {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-day {
|
||||
&.fc-day-today {
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timegrid-col {
|
||||
&.fc-day-today {
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-list-event:hover td {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.fc-list-event-title {
|
||||
a {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-col-header,
|
||||
.fc-daygrid-body,
|
||||
.fc-scrollgrid-sync-table {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.fc-scrollgrid-section>*{
|
||||
border-left: $table-border-width solid $table-border-color;
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
.fc-scrollgrid-section-liquid>td{
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-theme-bootstrap a:not([href]) {
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.fc {
|
||||
th.fc-widget-header {
|
||||
background: $gray-300;
|
||||
line-height: 20px;
|
||||
padding: 10px 0;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-unthemed {
|
||||
|
||||
.fc-content,
|
||||
.fc-divider,
|
||||
.fc-list-heading td,
|
||||
.fc-list-view,
|
||||
.fc-popover,
|
||||
.fc-row,
|
||||
tbody,
|
||||
td,
|
||||
th,
|
||||
thead {
|
||||
border-color: $gray-300;
|
||||
}
|
||||
|
||||
td.fc-today {
|
||||
background: lighten($gray-200, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
border-color: $border-color;
|
||||
color: $gray-700;
|
||||
text-transform: capitalize;
|
||||
box-shadow: none;
|
||||
padding: 6px 12px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.fc-state-down,
|
||||
.fc-state-active,
|
||||
.fc-state-disabled {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
color: $white;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
cursor: move;
|
||||
font-size: 0.8125rem;
|
||||
margin: 5px 7px;
|
||||
padding: 5px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fc-event,
|
||||
.fc-event-dot {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
.fc-daygrid-dot-event.fc-event-mirror,
|
||||
.fc-daygrid-dot-event:hover {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
// .fc-daygrid-dot-event {
|
||||
// color: $white !important;
|
||||
// }
|
||||
|
||||
.fc-event-title,
|
||||
.fc-sticky {
|
||||
font-weight: $font-weight-semibold !important;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fc-daygrid-event-dot {
|
||||
border-color: $white !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-event-time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-event .fc-content {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
#external-events {
|
||||
.external-event {
|
||||
text-align: left;
|
||||
padding: 8px 16px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.bg-dark {
|
||||
.fc-content {
|
||||
color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-prev-button,
|
||||
.fc-next-button {
|
||||
position: relative;
|
||||
height: 37.5px;
|
||||
width: 37.5px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
font-family: remixicon !important;
|
||||
font-size: 20px;
|
||||
top: 0;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-prev-button {
|
||||
&::before {
|
||||
content: "\ea64";
|
||||
}
|
||||
}
|
||||
|
||||
.fc-next-button {
|
||||
&::before {
|
||||
content: "\ea6e";
|
||||
}
|
||||
}
|
||||
|
||||
.fc-toolbar-chunk {
|
||||
.btn-group {
|
||||
box-shadow: $element-shadow;
|
||||
.btn {
|
||||
color: $secondary;
|
||||
background-color: rgba($secondary, 0.15);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $white;
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-today-button {
|
||||
background-color: $secondary !important;
|
||||
border: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
@media (max-width: 575.98px) {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#upcoming-event-list {
|
||||
.card {
|
||||
&:last-child {
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#event-modal {
|
||||
.event-details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view-event {
|
||||
.event-form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#event-category-tag {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.event-details {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-event-harness {
|
||||
.fc-daygrid-event {
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timegrid-event-harness {
|
||||
.fc-timegrid-event {
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fc-timegrid-slots {
|
||||
table {
|
||||
tr {
|
||||
border-color: var(--#{$prefix}border-color)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-list-table {
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.fc-daygrid-event-harness {
|
||||
.fc-daygrid-event {
|
||||
&.bg-#{$color}-subtle {
|
||||
|
||||
.fc-event-title,
|
||||
.fc-event-main {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timegrid-event-harness {
|
||||
.fc-timegrid-event {
|
||||
&.bg-#{$color}-subtle {
|
||||
.fc-event-title {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-list-table {
|
||||
.fc-list-event {
|
||||
&.bg-#{$color}-subtle {
|
||||
color: $value !important;
|
||||
|
||||
.fc-list-event-title {
|
||||
>a {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-list-event-dot {
|
||||
border-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-event-harness .fc-daygrid-event.bg-dark-subtle{
|
||||
.fc-event-main, .fc-event-title {
|
||||
color: var(--#{$prefix}body-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-direction-ltr{
|
||||
direction: ltr;
|
||||
.fc-toolbar>*>:not(:first-child){
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-button-group{
|
||||
button{
|
||||
span{
|
||||
&::before{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-theme-standard .fc-list {
|
||||
border: 1px solid var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
.fc-theme-standard .fc-scrollgrid{
|
||||
border: 1px solid var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.fc-theme-standard .fc-list-day-cushion{
|
||||
background-color: var(--#{$prefix}tertiary-bg) !important;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
|
||||
//
|
||||
// _google-map.scss
|
||||
//
|
||||
|
||||
.gmaps, .gmaps-panaroma {
|
||||
height: 300px;
|
||||
background: $gray-100;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.gmaps-overlay {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
background: var(--#{$prefix}primary);
|
||||
border-radius: 4px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.gmaps-overlay_arrow {
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
&.above {
|
||||
bottom: -15px;
|
||||
border-left: 16px solid transparent;
|
||||
border-right: 16px solid transparent;
|
||||
border-top: 16px solid var(--#{$prefix}primary);
|
||||
}
|
||||
&.below {
|
||||
top: -15px;
|
||||
border-left: 16px solid transparent;
|
||||
border-right: 16px solid transparent;
|
||||
border-bottom: 16px solid var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,280 @@
|
||||
//
|
||||
// _gridjs.scss
|
||||
//
|
||||
|
||||
.gridjs-container {
|
||||
color: $table-color;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gridjs-wrapper {
|
||||
box-shadow: none;
|
||||
border: 1px solid $table-border-color;
|
||||
border-radius: 0px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), .075);
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-footer {
|
||||
border: none !important;
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
|
||||
.gridjs-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gridjs-tbody, td.gridjs-td{
|
||||
background-color: $table-bg;
|
||||
}
|
||||
|
||||
th.gridjs-th,
|
||||
td.gridjs-td {
|
||||
border: 1px solid $table-border-color;
|
||||
padding: $table-cell-padding-y $table-cell-padding-x;
|
||||
}
|
||||
|
||||
th {
|
||||
&.gridjs-th {
|
||||
border-top: 0;
|
||||
color: $table-color;
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), .75);
|
||||
|
||||
}
|
||||
|
||||
&.gridjs-th-sort {
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), .85);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-head{
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.gridjs-footer {
|
||||
box-shadow: none;
|
||||
border: 1px solid $table-border-color;
|
||||
border-top: 0;
|
||||
background-color: $table-bg;
|
||||
}
|
||||
|
||||
.gridjs-summary {
|
||||
color: $text-muted;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.gridjs-pagination {
|
||||
|
||||
.gridjs-pages {
|
||||
button {
|
||||
margin-left: 0.3rem;
|
||||
border-radius: $border-radius !important;
|
||||
border: 1px solid $pagination-border-color;
|
||||
background-color: $pagination-bg;
|
||||
color: $pagination-color;
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid $pagination-border-color;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&:hover:disabled,
|
||||
&[disabled] {
|
||||
color: $pagination-disabled-color;
|
||||
background-color: $pagination-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $pagination-hover-bg;
|
||||
color: $pagination-hover-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:last-child,
|
||||
&:first-child {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.gridjs-currentPage {
|
||||
background-color: $pagination-active-bg;
|
||||
color: $pagination-active-color;
|
||||
border-color: $pagination-active-border-color;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
float: left !important;
|
||||
margin-top: 10px;
|
||||
button {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-search {
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
&::before {
|
||||
content: "\f0d1";
|
||||
font-family: "remixicon";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 10px;
|
||||
font-size: 14px;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
input.gridjs-input {
|
||||
border-color: $input-border-color;
|
||||
background-color: $input-bg;
|
||||
color: $input-color;
|
||||
line-height: $input-line-height;
|
||||
padding: $input-padding-y $input-padding-x $input-padding-y $input-padding-x*2.25;
|
||||
border-radius: $input-border-radius;
|
||||
@include font-size($input-font-size);
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: $input-focus-border-color;
|
||||
background-color: $input-focus-bg;
|
||||
}
|
||||
|
||||
&::placeholder{
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
th.gridjs-th {
|
||||
.gridjs-th-content {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
button.gridjs-sort {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
th.gridjs-th-sort .gridjs-th-content {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
button{
|
||||
&.gridjs-sort-asc, &.gridjs-sort-desc{
|
||||
background-size: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// card table
|
||||
|
||||
.table-card{
|
||||
|
||||
.gridjs-head{
|
||||
padding: 16px 16px 5px;
|
||||
}
|
||||
|
||||
.gridjs-wrapper{
|
||||
border-top: 0;
|
||||
border-radius: 0;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
|
||||
.gridjs-footer{
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// gridjs selection
|
||||
.gridjs-tr-selected {
|
||||
td{
|
||||
background-color: $table-active-bg;
|
||||
}
|
||||
.gridjs-td .gridjs-checkbox[type=checkbox]{
|
||||
background-color: $form-check-input-checked-bg-color;
|
||||
border-color: $form-check-input-checked-border-color;
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image);
|
||||
}
|
||||
}
|
||||
}
|
||||
.gridjs-td{
|
||||
.gridjs-checkbox{
|
||||
width: $form-check-input-width;
|
||||
height: $form-check-input-width;
|
||||
vertical-align: top;
|
||||
background-color: $form-check-input-bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
border: $form-check-input-border;
|
||||
appearance: none;
|
||||
color-adjust: exact; // Keep themed appearance for print
|
||||
@include transition($form-check-transition);
|
||||
&[type="checkbox"] {
|
||||
@include border-radius($form-check-input-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-border-none{
|
||||
td.gridjs-td, th.gridjs-th{
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gridjs-loading-bar {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"]{
|
||||
button{
|
||||
&.gridjs-sort-neutral, &.gridjs-sort-asc, &.gridjs-sort-desc{
|
||||
filter: $btn-close-white-filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
//
|
||||
// _leaflet-maps.scss
|
||||
//
|
||||
|
||||
.leaflet-map {
|
||||
height: 300px;
|
||||
&.leaflet-container{
|
||||
z-index: 0;
|
||||
font-family: $font-family-primary;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
//
|
||||
// _listjs.scss
|
||||
//
|
||||
|
||||
.listjs-pagination{
|
||||
margin-bottom: 0;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
li{
|
||||
.page{
|
||||
display: block;
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
color: $pagination-color;
|
||||
background-color: $pagination-bg;
|
||||
border: $pagination-border-width solid $pagination-border-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&.active{
|
||||
.page{
|
||||
color: $pagination-active-color;
|
||||
@include gradient-bg($pagination-active-bg);
|
||||
border-color: $pagination-active-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-next,
|
||||
.pagination-prev {
|
||||
color: var(--#{$prefix}primary);
|
||||
font-weight: $font-weight-medium;
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
background-color: $pagination-bg;
|
||||
border: $pagination-border-width solid $pagination-border-color;
|
||||
border-radius: $border-radius;
|
||||
&:hover {
|
||||
color: lighten($primary, 20%);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $text-muted;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
|
||||
//
|
||||
// _multijs.scss
|
||||
//
|
||||
|
||||
.multi-wrapper{
|
||||
border: none;
|
||||
position: relative;
|
||||
|
||||
&::before{
|
||||
content: "\ea61";
|
||||
position: absolute;
|
||||
font-family: "remixicon";
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 86px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
border-radius: 50%;
|
||||
color: $text-muted;
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.non-selected-wrapper{
|
||||
border: 1px solid $input-border-color;
|
||||
background-color: $input-bg;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
.selected-wrapper, .non-selected-wrapper{
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), .2);
|
||||
border-radius: 10px;
|
||||
border: 2px solid $input-bg;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.item-group .group-label{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.item{
|
||||
color: $input-color;
|
||||
&:hover{
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.selected-wrapper{
|
||||
border: 1px solid $input-border-color;
|
||||
background: $input-bg;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
.search-input{
|
||||
flex: 0 0 auto;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-family: $input-font-family;
|
||||
font-size: $input-font-size;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
margin-bottom: 16px;
|
||||
&::placeholder{
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.header{
|
||||
font-weight: $font-weight-semibold;
|
||||
color: var(--#{$prefix}tertiary-color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
// padding: 1em;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: var(--#{$prefix}card-bg-custom) !important;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
/* This background color was intended by the author of this theme. */
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #d63284;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Prism editor */
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: $gray-200;
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: $gray-600;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Scrollbar
|
||||
|
||||
.language-markup, .language-js {
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), .1);
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--#{$prefix}light)
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background-color: var(--#{$prefix}light)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Scroll-top
|
||||
|
||||
#scroll-top {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: fixed;
|
||||
bottom: 65px;
|
||||
right: 30px;
|
||||
background: #343a40;
|
||||
border-color: transparent;
|
||||
border-radius: 3px;
|
||||
color: #ffffff;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
// Toolbar (Copy button)
|
||||
|
||||
.btn-clipboard {
|
||||
position: absolute !important;
|
||||
right: 15px !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar {
|
||||
opacity: 1 !important;
|
||||
button {
|
||||
display: inline-block !important;
|
||||
margin: 0.375rem 0.5rem !important;
|
||||
padding: 0.25rem 0.75rem !important;
|
||||
transition: $btn-transition !important;
|
||||
border-radius: $border-radius-sm !important;
|
||||
border: $border-width solid rgba(var(--#{$prefix}primary-rgb), 0.35) !important;
|
||||
background-color: transparent;
|
||||
color: var(--#{$prefix}primary) !important;
|
||||
box-shadow: none !important;
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--#{$prefix}primary) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
//
|
||||
// _quilljs.scss
|
||||
//
|
||||
|
||||
.ql-editor {
|
||||
text-align: left;
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 1.5em;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
li:not(.ql-direction-rtl)::before {
|
||||
margin-left: -1.5em;
|
||||
margin-right: 0.3em;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
font-family: $font-family-base;
|
||||
|
||||
&.ql-snow {
|
||||
border-color: $input-border-color;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-bubble {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
|
||||
.ql-toolbar {
|
||||
font-family: $font-family-base !important;
|
||||
|
||||
span {
|
||||
outline: none !important;
|
||||
color: var(--#{$prefix}choices-link-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ql-snow {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-color: $input-border-color;
|
||||
|
||||
.ql-picker.ql-expanded {
|
||||
.ql-picker-label {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-picker-options {
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
border-radius: $dropdown-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-snow {
|
||||
|
||||
.ql-stroke,
|
||||
.ql-script,
|
||||
.ql-strike svg {
|
||||
stroke: var(--#{$prefix}choices-link-color);
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: var(--#{$prefix}choices-link-color);
|
||||
}
|
||||
|
||||
.ql-picker:not(.ql-color-picker):not(.ql-icon-picker) {
|
||||
svg {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-picker {
|
||||
&.ql-expanded .ql-picker-label {
|
||||
color: var(--#{$prefix}choices-link-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ql-snow {
|
||||
.ql-picker-options {
|
||||
background-color: var(--#{$prefix}choices-bg);
|
||||
border-color: $dropdown-border-color !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,282 @@
|
||||
|
||||
//
|
||||
// _range-slider.scss
|
||||
//
|
||||
|
||||
.noUi-connect{
|
||||
background: $success;
|
||||
}
|
||||
|
||||
.noUi-handle{
|
||||
background: $success;
|
||||
border: 2px solid var(--#{$prefix}secondary-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.noUi-horizontal{
|
||||
height: 4px;
|
||||
.noUi-handle{
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
right: -10px !important;
|
||||
top: -7px;
|
||||
|
||||
&::before, &::after{
|
||||
display: none;
|
||||
}
|
||||
&:focus{
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-pips-horizontal{
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
// tooltip
|
||||
|
||||
.noUi-tooltip{
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
border-color: var(--#{$prefix}border-color-translucent);
|
||||
border-radius: $tooltip-border-radius;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
// Vertical Slider
|
||||
|
||||
.noUi-vertical{
|
||||
width: 4px;
|
||||
.noUi-handle{
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
right: -8px;
|
||||
top: -12px;
|
||||
left: auto;
|
||||
border-radius: 50%;
|
||||
&::before, &::after{
|
||||
display: none;
|
||||
}
|
||||
&:focus{
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-origin{
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-value{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal{
|
||||
&.noUi-marker-large{
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-value-horizontal{
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.noUi-target{
|
||||
box-shadow: none;
|
||||
background-color: var(--#{$prefix}light);
|
||||
border-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
.noUi-touch-area{
|
||||
&:focus{
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Colorpicker
|
||||
|
||||
#red, #green, #blue {
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#colorpicker {
|
||||
height: 240px;
|
||||
width: 310px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
|
||||
#result {
|
||||
margin: 60px 26px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
box-shadow: 0 0 3px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
#red {
|
||||
.noUi-connect {
|
||||
background: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
#green {
|
||||
.noUi-connect {
|
||||
background: $success;
|
||||
}
|
||||
}
|
||||
|
||||
#blue {
|
||||
.noUi-connect {
|
||||
background: var(--#{$prefix}primary);
|
||||
}
|
||||
}
|
||||
|
||||
// Adding keyboard support
|
||||
|
||||
.form-control{
|
||||
&.keyboard{
|
||||
max-width: 340px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Non linear slider
|
||||
|
||||
.example-val{
|
||||
font-size: 12px;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
&:before{
|
||||
content: "Value: ";
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// showing tooltips
|
||||
|
||||
.noUi-tooltip {
|
||||
display: none;
|
||||
}
|
||||
.noUi-active .noUi-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Colored Connect Elements
|
||||
|
||||
.c-1-color { background: $danger; }
|
||||
.c-2-color { background: $warning; }
|
||||
.c-3-color { background: $success; }
|
||||
.c-4-color { background: var(--#{$prefix}primary); }
|
||||
.c-5-color { background: $purple; }
|
||||
|
||||
// slider togle
|
||||
|
||||
#slider-toggle {
|
||||
height: 50px;
|
||||
&.off{
|
||||
.noUi-handle{
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// rangeslider color
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
[data-slider-color="#{$color}"] {
|
||||
.noUi-connect{
|
||||
background: $value;
|
||||
}
|
||||
|
||||
.noUi-handle{
|
||||
background: $value;
|
||||
}
|
||||
|
||||
&[data-slider-style="border"], &[data-slider-style="square"]{
|
||||
.noUi-handle{
|
||||
border-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// rangeslider sizes
|
||||
|
||||
[data-slider-size="lg"]{
|
||||
&.noUi-horizontal{
|
||||
height: 12px;
|
||||
|
||||
.noUi-handle{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-slider-size="md"]{
|
||||
&.noUi-horizontal{
|
||||
height: 8px;
|
||||
|
||||
.noUi-handle{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-slider-size="sm"]{
|
||||
&.noUi-horizontal{
|
||||
height: 4px;
|
||||
|
||||
.noUi-handle{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// rangeslider style
|
||||
|
||||
[data-slider-style="line"]{
|
||||
&.noUi-horizontal .noUi-handle{
|
||||
width: 8px;
|
||||
border-radius: 4px;
|
||||
right: -8px;
|
||||
}
|
||||
&.noUi-vertical .noUi-handle{
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-slider-style="border"]{
|
||||
.noUi-handle{
|
||||
border-color: $success;
|
||||
background-color: $card-bg;
|
||||
}
|
||||
}
|
||||
|
||||
[data-slider-style="square"]{
|
||||
.noUi-handle{
|
||||
border-radius: 0px;
|
||||
transform: rotate(45deg);
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: -4px;
|
||||
border-color: $success;
|
||||
background-color: $card-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
//
|
||||
// _sortablejs.scss
|
||||
//
|
||||
|
||||
|
||||
.nested-list{
|
||||
.list-group-item{
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 0.05);
|
||||
border-color: rgba(var(--#{$prefix}primary-rgb), 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.nested-list, .nested-1, .nested-2, .nested-3{
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
.nested-sortable-handle{
|
||||
.handle{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
}
|
||||
.list-group-item{
|
||||
padding-left: 42px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
|
||||
//
|
||||
// _sweetalert2.scss
|
||||
//
|
||||
|
||||
.swal2-container {
|
||||
.swal2-title{
|
||||
padding: 24px 24px 0;
|
||||
font-size: 20px;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-popup{
|
||||
padding-bottom: 24px;
|
||||
border-radius: $modal-content-border-radius;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
color: var(--#{$prefix}body-color);
|
||||
|
||||
.swal2-title{
|
||||
color: var(--#{$prefix}heading-color);
|
||||
}
|
||||
|
||||
.swal2-html-container{
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-footer{
|
||||
border-top: 1px solid var(--#{$prefix}border-color);
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.swal2-html-container{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.swal2-icon{
|
||||
&.swal2-question{
|
||||
border-color: $info;
|
||||
color: $info;
|
||||
}
|
||||
&.swal2-success {
|
||||
[class^=swal2-success-line]{
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.swal2-success-ring{
|
||||
border-color: rgba($success, 0.3);
|
||||
}
|
||||
}
|
||||
&.swal2-warning{
|
||||
border-color: $warning;
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-styled{
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-loader{
|
||||
border-color: var(--#{$prefix}primary) transparent var(--#{$prefix}primary) transparent;
|
||||
}
|
||||
|
||||
.swal2-timer-progress-bar{
|
||||
background-color: rgba($success, 0.4);
|
||||
}
|
||||
|
||||
.swal2-progress-steps {
|
||||
.swal2-progress-step{
|
||||
background: var(--#{$prefix}primary);
|
||||
&.swal2-active-progress-step{
|
||||
background: var(--#{$prefix}primary);
|
||||
&~.swal2-progress-step, &~.swal2-progress-step-line{
|
||||
background: rgba(var(--#{$prefix}primary-rgb), 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.swal2-progress-step-line{
|
||||
background: var(--#{$prefix}primary);
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-actions.swal2-loading{
|
||||
.swal2-styled.swal2-confirm{
|
||||
border-left-color: var(--#{$prefix}primary) !important;
|
||||
border-right-color: var(--#{$prefix}primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-file, .swal2-input, .swal2-textarea{
|
||||
border: 1px solid $input-border-color;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-input{
|
||||
height: auto;
|
||||
display: block;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
font-family: $input-font-family;
|
||||
@include font-size($input-font-size);
|
||||
font-weight: $input-font-weight;
|
||||
line-height: $input-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
background-clip: padding-box;
|
||||
border: $input-border-width solid $input-border-color;
|
||||
}
|
||||
|
||||
.swal2-close{
|
||||
font-family: $font-family-base;
|
||||
font-weight: $font-weight-light;
|
||||
font-size: 28px;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
color: var(--#{$prefix}primary);
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-validation-message{
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
//
|
||||
// _swiper.scss
|
||||
//
|
||||
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 0.2);
|
||||
backdrop-filter: blur(2px);
|
||||
border-radius: 8px;
|
||||
&::after {
|
||||
font-family: remixicon;
|
||||
font-size: 28px;
|
||||
color: rgba(var(--#{$prefix}primary-rgb), 1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
&::after {
|
||||
content: "\ea64" !important;
|
||||
}
|
||||
}
|
||||
.swiper-button-next {
|
||||
&::after {
|
||||
content: "\ea6e" !important;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet{
|
||||
width: 22px;
|
||||
height: 5px;
|
||||
background-color: $white;
|
||||
border-radius: 50px;
|
||||
box-shadow: $element-shadow;
|
||||
.swiper-pagination-bullet-active{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dynamic-pagination{
|
||||
.swiper-pagination-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: $white;
|
||||
opacity: 0.5;
|
||||
transition: all 0.5s ease;
|
||||
&.swiper-pagination-bullet-active{
|
||||
opacity: 1;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination-fraction {
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
background-color: rgba($black, 0.3);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
|
||||
.pagination-custom{
|
||||
.swiper-pagination-bullet {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
line-height: 25px;
|
||||
border-radius: 8px;
|
||||
background-color: $white;
|
||||
opacity: 0.5;
|
||||
transition: all 0.5s ease;
|
||||
&.swiper-pagination-bullet-active{
|
||||
color: $secondary;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination-progressbar{
|
||||
height: 6px !important;
|
||||
background-color: rgba($success, 0.25);
|
||||
.swiper-pagination-progressbar-fill {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.swiper-scrollbar {
|
||||
background-color: rgba($white, 0.35);
|
||||
backdrop-filter: blur(2px);
|
||||
padding: 1.2px;
|
||||
height: 6px !important;
|
||||
.swiper-scrollbar-drag {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination-dark {
|
||||
.swiper-pagination-bullet {
|
||||
background-color: $secondary;
|
||||
}
|
||||
.dynamic-pagination{
|
||||
.swiper-pagination-bullet {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
&.pagination-custom{
|
||||
.swiper-pagination-bullet {
|
||||
color: $white;
|
||||
&.swiper-pagination-bullet-active{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.swiper-scrollbar {
|
||||
background-color: rgba($dark, 0.35);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
//
|
||||
// toastify.scss
|
||||
//
|
||||
|
||||
|
||||
.toastify {
|
||||
padding: 12px 16px;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
|
||||
background: $success;
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
max-width: calc(50% - 20px);
|
||||
z-index: 2147483647;
|
||||
&.on {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toast-close {
|
||||
opacity: 0.4;
|
||||
padding: 0 5px;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
margin-left: 4px;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.toastify-right {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.toastify-left {
|
||||
left: 15px;
|
||||
.toast-close {
|
||||
left: -4px;
|
||||
margin-left: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.toastify-top {
|
||||
top: -150px;
|
||||
}
|
||||
|
||||
.toastify-bottom {
|
||||
bottom: -150px;
|
||||
}
|
||||
|
||||
.toastify-rounded {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.toastify-avatar {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin: -7px 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.toastify-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: fit-content;
|
||||
max-width: -moz-fit-content;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 360px) {
|
||||
.toastify-right, .toastify-left {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: fit-content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
//
|
||||
// tom-select.scss
|
||||
//
|
||||
|
||||
.ts-wrapper {
|
||||
.ts-control{
|
||||
background-color: $dropdown-bg;
|
||||
border-color: var(--#{$prefix}border-color-translucent);
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
input{
|
||||
color: $dropdown-link-color;
|
||||
&::placeholder{
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.multi{
|
||||
&.has-items {
|
||||
.ts-control{
|
||||
padding: calc($input-padding-y - 1px) $input-padding-x calc($input-padding-y - 4px);
|
||||
}
|
||||
}
|
||||
.ts-control>div{
|
||||
background-color: var(--#{$prefix}light);
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.focus .ts-control{
|
||||
color: $dropdown-link-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ts-control, .ts-control input, .ts-dropdown{
|
||||
color: $dropdown-link-color;
|
||||
}
|
||||
|
||||
.ts-control, .ts-wrapper.single.input-active .ts-control{
|
||||
background-color: $dropdown-bg !important;
|
||||
}
|
||||
|
||||
.ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select{
|
||||
background-color: $dropdown-bg;
|
||||
}
|
||||
.ts-dropdown .active{
|
||||
background-color: $dropdown-link-active-bg;
|
||||
color: $dropdown-link-active-color;
|
||||
}
|
||||
|
||||
|
||||
.ts-dropdown{
|
||||
.create,
|
||||
.no-results,
|
||||
.optgroup-header,
|
||||
.option{
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
.title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.url {
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
&.contacts {
|
||||
.ts-control {
|
||||
>div {
|
||||
.email {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.name+.email {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.email:before {
|
||||
content: '<';
|
||||
}
|
||||
|
||||
.email:after {
|
||||
content: '>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ts-dropdown {
|
||||
.caption {
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
//
|
||||
// tour.scss
|
||||
//
|
||||
|
||||
.shepherd-element{
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.shepherd-has-title{
|
||||
.shepherd-content{
|
||||
.shepherd-header{
|
||||
background-color: var(--#{$prefix}light);
|
||||
padding: $toast-padding-y $toast-padding-x;
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon{
|
||||
color: rgba(var(--#{$prefix}dark-rgb), .75);
|
||||
&:hover{
|
||||
color: rgba(var(--#{$prefix}dark-rgb), .75);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
.shepherd-title{
|
||||
font-size: 15px;
|
||||
font-weight: $font-weight-medium;
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.shepherd-text{
|
||||
padding: $toast-padding-x;
|
||||
font-size: $font-size-base;
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.shepherd-button{
|
||||
&.btn-success:not(:disabled):hover{
|
||||
background: darken($success, 2.5%);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.btn-light:not(:disabled):hover{
|
||||
background: rgba(var(--#{$prefix}light-rgb), .75);
|
||||
color: var(--#{$prefix}dark);
|
||||
}
|
||||
|
||||
&.btn-primary:not(:disabled):hover{
|
||||
background: darken($primary, 2.5%);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.shepherd-footer{
|
||||
padding: 0 $toast-padding-x $toast-padding-x;
|
||||
}
|
||||
.shepherd-arrow,
|
||||
.shepherd-arrow:before{
|
||||
content: "\ea75";
|
||||
font-family: 'remixicon';
|
||||
font-size: 24px;
|
||||
z-index: 1;
|
||||
background-color: transparent !important;
|
||||
transform: rotate(0deg);
|
||||
color: var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{
|
||||
top: -18px;
|
||||
}
|
||||
|
||||
.shepherd-button{
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
//
|
||||
// vector-maps.scss
|
||||
//
|
||||
|
||||
.jvm-tooltip {
|
||||
border-radius: 3px;
|
||||
background-color: var(--#{$prefix}primary);
|
||||
font-family: $font-family-base;
|
||||
box-shadow: $box-shadow-lg;
|
||||
padding: 5px 9px;
|
||||
}
|
||||
|
||||
.jvm-container {
|
||||
text {
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
fill: var(--#{$prefix}gray-700);
|
||||
}
|
||||
}
|
||||
|
||||
.jvm-zoom-btn {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
}
|
||||
|
||||
#jvm-markers-group{
|
||||
.jvm-marker {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
#SvgjsLine1040 {
|
||||
stroke: $primary;
|
||||
fill: rgb(17, 114, 250);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,183 @@
|
||||
//
|
||||
// _footer.scss
|
||||
//
|
||||
|
||||
.footer {
|
||||
bottom: 0;
|
||||
padding: 20px calc(#{$grid-gutter-width} * 0.5);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: $footer-color;
|
||||
left: $vertical-menu-width;
|
||||
height: $footer-height;
|
||||
background-color: $footer-bg;
|
||||
border-top: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"] {
|
||||
|
||||
&:is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]) {
|
||||
.footer {
|
||||
left: $vertical-menu-width-sm;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-size="md"] {
|
||||
.footer {
|
||||
left: $vertical-menu-width-md;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[data-layout="horizontal"] {
|
||||
.footer {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"][data-layout-style="detached"] {
|
||||
|
||||
@media (min-width: 1024.1px) {
|
||||
.footer {
|
||||
left: 0 !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="twocolumn"] {
|
||||
.footer {
|
||||
@media (min-width: 768.1px) {
|
||||
left: calc(#{$twocolumn-menu-iconview-width} + #{$twocolumn-menu-width});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Foooter Landing
|
||||
.footer-landing {
|
||||
border-top: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
|
||||
.footer-desc {
|
||||
color: rgba(var(--#{$prefix}secondary-color-rgb), 0.8);
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: var(--#{$prefix}card-logo-light);
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: var(--#{$prefix}card-logo-dark);
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
a {
|
||||
color: rgba(var(--#{$prefix}secondary-color-rgb), 0.8);
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
color: rgba(var(--#{$prefix}secondary-color-rgb), 1);
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
i {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: inline-block;
|
||||
line-height: 34px;
|
||||
background-color: rgba(var(--#{$prefix}secondary-color-rgb), 0.1);
|
||||
|
||||
color: rgba(var(--#{$prefix}secondary-color-rgb), 0.6);
|
||||
font-size: 14px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
transition: all 0.5s ease;
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-border-alt {
|
||||
padding: 30px 0px;
|
||||
border-top: 1px solid rgba(var(--#{$prefix}secondary-color-rgb), 0.1);
|
||||
color: rgba(var(--#{$prefix}secondary-color-rgb), 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
//footer dark
|
||||
[data-footer="dark"] {
|
||||
.footer-landing {
|
||||
background-color: $gray-900;
|
||||
border-top-color: $gray-700;
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
a {
|
||||
color: #758195;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.8);
|
||||
transition: all 0.5s;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
i {
|
||||
background-color: rgba($white, 0.08);
|
||||
color: $white;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
.footer-desc {
|
||||
color: #758195;
|
||||
}
|
||||
|
||||
.footer-border-alt {
|
||||
border-top: 1px solid rgba($white, 0.15);
|
||||
color: #758195;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,306 @@
|
||||
//
|
||||
// _horizontal.scss
|
||||
//
|
||||
|
||||
[data-layout="horizontal"] {
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024.1px) {
|
||||
|
||||
.top-tagbar{
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.layout-width,
|
||||
.container-fluid {
|
||||
max-width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.topnav-hamburger {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-logo {
|
||||
padding-left: calc(#{$grid-gutter-width} * 0.5);
|
||||
width: auto;
|
||||
@media (max-width: 1024.98px) {
|
||||
padding-left: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
background: var(--#{$prefix}topnav-bg);
|
||||
border-right-color: transparent;
|
||||
padding: 0 calc(#{$grid-gutter-width} * 0.5);
|
||||
box-shadow: $horizontal-menu-box-shadow;
|
||||
position: fixed;
|
||||
top: calc(#{$top-tagbar-height} + #{$header-height});
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
bottom: auto;
|
||||
|
||||
@media (max-width:575.98px) {
|
||||
.container-fluid {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
|
||||
.nav-sm {
|
||||
padding-left: 0;
|
||||
|
||||
.nav-link {
|
||||
&:before {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $topnav-item-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $topnav-item-color;
|
||||
padding: $horizontal-menu-item-padding-y $horizontal-menu-item-padding-x;
|
||||
|
||||
i {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $topnav-item-color-active;
|
||||
&:after {
|
||||
color: $topnav-item-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-bs-toggle=collapse][aria-expanded=true] {
|
||||
color: $topnav-item-color-active;
|
||||
&:after {
|
||||
color: $topnav-item-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.nav-item {
|
||||
>.nav-link[data-bs-toggle=collapse]:after {
|
||||
right: 0px;
|
||||
transform: rotate(90deg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
>li:nth-of-type(2) {
|
||||
>.nav-link.menu-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
||||
.nav-link[data-bs-toggle=collapse]:after {
|
||||
right: 10px;
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
|
||||
>.nav-link {
|
||||
>.badge {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
>.nav-link {
|
||||
color: $topnav-item-color-active;
|
||||
|
||||
&:after {
|
||||
color: $topnav-item-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024.1px) {
|
||||
>.menu-dropdown {
|
||||
display: block;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $topnav-item-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
position: absolute;
|
||||
min-width: $horizontal-menu-dropdown-min-width;
|
||||
padding: $dropdown-padding-y $dropdown-padding-x;
|
||||
box-shadow: $horizontal-menu-dropdown-box-shadow;
|
||||
animation-name: DropDownSlide;
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
margin: 0;
|
||||
z-index: $zindex-dropdown;
|
||||
background-color: $dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
border-radius: $dropdown-border-radius;
|
||||
display: none;
|
||||
|
||||
.menu-dropdown {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mega-dropdown-menu {
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-custom-right {
|
||||
left: -100% !important;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.navbar-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"] {
|
||||
.menu {
|
||||
@media (max-width: 1024px) {
|
||||
.navbar-menu {
|
||||
display: block;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
padding-left: 0;
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
|
||||
>li:nth-of-type(2)>.nav-link.menu-link {
|
||||
padding-left: $vertical-menu-item-padding-x;
|
||||
}
|
||||
|
||||
.nav-sm .nav-link:before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
position: relative;
|
||||
min-width: 100%;
|
||||
box-shadow: none;
|
||||
padding-left: 28px;
|
||||
left: 0;
|
||||
animation: none;
|
||||
padding-top: 0;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-custom-right {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.nav-item .nav-link[data-bs-toggle=collapse]:after {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.mega-dropdown-menu {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:is([data-topbar="dark"], [data-topbar="brand"]) {
|
||||
.navbar-header {
|
||||
.horizontal-logo {
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme dark
|
||||
[data-bs-theme="dark"] {
|
||||
&[data-topbar="light"] {
|
||||
.navbar-header {
|
||||
.horizontal-logo {
|
||||
.logo-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header-item{
|
||||
button{
|
||||
color: var(--#{$prefix}header-item-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// rtl
|
||||
[dir="rtl"]{
|
||||
&[data-layout=horizontal] {
|
||||
.navbar-menu {
|
||||
.navbar-nav>.nav-item>.nav-link[data-bs-toggle=collapse]{
|
||||
&:after{
|
||||
transform: rotate(-90deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
.nav-item {
|
||||
.nav-link[data-bs-toggle=collapse]{
|
||||
&:after{
|
||||
transform: rotate(-180deg)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
//
|
||||
// _landing-menu.scss
|
||||
//
|
||||
|
||||
.ecommerce-navbar {
|
||||
height: 70px;
|
||||
transition: all 0.5s ease;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 34px;
|
||||
z-index: 1000;
|
||||
padding: 0;
|
||||
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: #637790;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
padding: 0px 14px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-list {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
padding: $dropdown-item-padding-y 0px;
|
||||
background-color: transparent !important;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background-color: $primary;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 2px;
|
||||
transition: all 0.5s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
padding-left: 13px;
|
||||
color: $primary;
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.submenu {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&::before {
|
||||
left: 1.45rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
padding-left: 37px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
&.is-sticky {
|
||||
background-color: var(--#{$prefix}secondary-bg) !important;
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
.logo-light {
|
||||
display: var(--#{$prefix}card-logo-light);
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: var(--#{$prefix}card-logo-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-custom-right {
|
||||
left: auto !important;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
@media (min-width:992px) {
|
||||
.dropdown-hover {
|
||||
&:hover {
|
||||
>.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
transition: all 0.5s ease;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-hover-end {
|
||||
&:hover {
|
||||
>.dropdown-menu {
|
||||
display: block;
|
||||
top: 70px !important;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
transition: all 0.5s ease;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
&.dropdown-menu-center {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
&.submenu {
|
||||
width: 200px;
|
||||
|
||||
&.dropdown-custom-right {
|
||||
left: -100% !important;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
width: 100%;
|
||||
padding: .35rem 1.5rem;
|
||||
|
||||
&.dropdown-toggle::after {
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-hover {
|
||||
.dropdown-menu {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-overlay.navbar-overlay {
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.navbar-collapse:not(.show)+.navbar-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width:991.98px) {
|
||||
.ecommerce-navbar {
|
||||
.navbar-collapse {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh !important;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
width: 250px;
|
||||
z-index: 999;
|
||||
overflow-y: auto;
|
||||
transform: translateX(0);
|
||||
transition: all 0.4s;
|
||||
|
||||
&:not(.show) {
|
||||
transform: translateX(-250px);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
justify-content: flex-start;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
|
||||
&.dropdown-toggle:after {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
width: 100%;
|
||||
|
||||
&.submenu {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-list {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
height: auto;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
padding: 0 $dropdown-item-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-mega-full {
|
||||
position: static !important;
|
||||
|
||||
.dropdown-menu {
|
||||
padding: 20px;
|
||||
left: 20px !important;
|
||||
right: 20px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
//
|
||||
// _layouts.scss
|
||||
//
|
||||
|
||||
[data-layout-width="boxed"] {
|
||||
body {
|
||||
background: $body-bg-image;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgba(var(--#{$prefix}body-bg-rgb), 0.60);
|
||||
}
|
||||
}
|
||||
|
||||
#layout-wrapper {
|
||||
max-width: $boxed-layout-width;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 5px 15px rgba(30, 32, 37, 0.40);
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
}
|
||||
|
||||
|
||||
&[data-layout="vertical"] {
|
||||
#layout-wrapper {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
#page-topbar,
|
||||
.footer {
|
||||
max-width: $boxed-layout-width;
|
||||
margin: 0 auto;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
&:is([data-sidebar-size="sm-hover"],[data-sidebar-size="sm"]) {
|
||||
|
||||
&[data-layout="vertical"] {
|
||||
@media (min-width: 768px) {
|
||||
#layout-wrapper {
|
||||
min-height: 1400px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@media (max-width: 767.98px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page-topbar,
|
||||
.footer {
|
||||
left: 0 !important;
|
||||
max-width: calc(#{$boxed-layout-width} - #{$vertical-menu-width-sm});
|
||||
|
||||
@media (min-width: 768px) {
|
||||
left: $vertical-menu-width-sm !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:is([data-sidebar-size="sm-hover-active"], [data-sidebar-size="lg"]) {
|
||||
|
||||
#page-topbar,
|
||||
.footer {
|
||||
max-width: calc(#{$boxed-layout-width} - #{$vertical-menu-width});
|
||||
|
||||
@media (min-width: 768px) {
|
||||
left: $vertical-menu-width !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-size="md"] {
|
||||
|
||||
#page-topbar,
|
||||
.footer {
|
||||
max-width: calc(#{$boxed-layout-width} - #{$vertical-menu-width-md});
|
||||
|
||||
@media (min-width: 768px) {
|
||||
left: $vertical-menu-width-md !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// deteched
|
||||
|
||||
&[data-layout=vertical][data-layout-style=detached] {
|
||||
body {
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
}
|
||||
|
||||
@media (min-width: 1024.1px) {
|
||||
#layout-wrapper {
|
||||
max-width: 1300px;
|
||||
}
|
||||
|
||||
.top-tagbar {
|
||||
.container-fluid {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
padding: 0 calc(#{$grid-gutter-width} * 1) 0 calc(#{$grid-gutter-width} * 1);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-width {
|
||||
max-width: 1300px;
|
||||
}
|
||||
}
|
||||
|
||||
&:is([data-sidebar-size="sm-hover"], [data-sidebar-size="sm"], [data-sidebar-size="md"], [data-sidebar-size="lg"]) {
|
||||
|
||||
#page-topbar,
|
||||
.footer {
|
||||
max-width: 100%;
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal Boxed Layout
|
||||
|
||||
[data-layout="horizontal"][data-layout-width="boxed"] {
|
||||
|
||||
#page-topbar,
|
||||
#layout-wrapper,
|
||||
.footer {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.container-fluid,
|
||||
.navbar-header {
|
||||
max-width: $boxed-layout-width;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 calc(#{$grid-gutter-width} * 0.5) 0 0;
|
||||
}
|
||||
|
||||
&:is([data-sidebar-size="sm-hover"],[data-sidebar-size="sm"], [data-sidebar-size="sm-hover-active"], [data-sidebar-size="lg"]) {
|
||||
#page-topbar,
|
||||
.footer {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scrollable layout
|
||||
|
||||
[data-layout-position="scrollable"] {
|
||||
@media (min-width: 992px) {
|
||||
|
||||
#page-topbar,
|
||||
.navbar-menu {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="horizontal"] {
|
||||
@media (min-width: 992px) {
|
||||
|
||||
#page-topbar,
|
||||
.topnav {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
//
|
||||
// _page-head.scss
|
||||
//
|
||||
|
||||
.page-wrapper{
|
||||
position: relative;
|
||||
padding: 132px 0 35px;
|
||||
}
|
||||
|
||||
.page-title-box {
|
||||
padding: 0 0 20px; //$grid-gutter-width
|
||||
|
||||
.breadcrumb {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 15px!important;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"] {
|
||||
.page-title-box {
|
||||
padding: 1.2rem 0;
|
||||
background-color: transparent !important;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
|
||||
@media (min-width: 1024.1px) {
|
||||
margin: -19px 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"] {
|
||||
&[data-layout-style="detached"]{
|
||||
.page-title-box {
|
||||
padding: 1.2rem 0;
|
||||
background-color: transparent !important;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
|
||||
@media (min-width: 1024.1px) {
|
||||
margin: -19px 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,457 @@
|
||||
//
|
||||
// _topbar.scss
|
||||
|
||||
.top-tagbar {
|
||||
background-color: var(--#{$prefix}top-tagbar-bg);
|
||||
z-index: 1001;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: $top-tagbar-height;
|
||||
padding: 0 calc(#{$grid-gutter-width} * 0.5) 0 calc(#{$grid-gutter-width} * 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topbar-tag-dropdown {
|
||||
height: $top-tagbar-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.btn-icon {
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
top: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#page-topbar {
|
||||
position: fixed;
|
||||
top: $top-tagbar-height;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
background-color: var(--#{$prefix}header-bg);
|
||||
transition: all 0.1s ease-out;
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
|
||||
&.topbar-shadow {
|
||||
box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 3px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
left: $vertical-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
display: flex;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
height: $header-height;
|
||||
padding: 0 calc(#{$grid-gutter-width} * 1) 0 calc(#{$grid-gutter-width} * 1)
|
||||
/*rtl: 0 0 0 calc(#{$grid-gutter-width} / 2) */
|
||||
;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
padding: 0 calc(#{$grid-gutter-width} * 0.5) 0 calc(#{$grid-gutter-width} * 0.5);
|
||||
}
|
||||
|
||||
.topbar-head-dropdown {
|
||||
.dropdown-menu.show {
|
||||
top: 13px !important;
|
||||
}
|
||||
|
||||
.notification-actions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: var(--#{$prefix}dropdown-bg);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 7px;
|
||||
border-top: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-topbar {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
|
||||
@media (max-width: 360px) {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name-text {
|
||||
color: var(--#{$prefix}header-item-color);
|
||||
}
|
||||
|
||||
.user-name-sub-text {
|
||||
color: var(--#{$prefix}header-item-sub-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
.app-search {
|
||||
padding: calc(#{$header-height - 38px} / 2) 0;
|
||||
|
||||
.form-control {
|
||||
border: none;
|
||||
height: 38px;
|
||||
padding-left: 40px;
|
||||
padding-right: 30px;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
span.search-widget-icon {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
left: 13px;
|
||||
top: 0;
|
||||
color: $gray-600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-widget-icon-close {
|
||||
right: 7px;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1023.99px) {
|
||||
padding-left: calc(#{$grid-gutter-width} / 2);
|
||||
}
|
||||
}
|
||||
|
||||
#searchModal {
|
||||
top: 6px;
|
||||
|
||||
.form-control {
|
||||
padding-left: 45px;
|
||||
padding-right: 55px;
|
||||
}
|
||||
|
||||
.search-widget-icon {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.search-widget-icon-close {
|
||||
right: 18px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
top: 94px;
|
||||
width: 100%;
|
||||
.list-group-item{
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mega menu
|
||||
|
||||
.megamenu-list {
|
||||
li {
|
||||
position: relative;
|
||||
padding: 5px 0px;
|
||||
|
||||
a {
|
||||
color: $dropdown-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.logo {
|
||||
span.logo-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.logo-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-item {
|
||||
height: $header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-profile-user {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.topbar-badge-sm {
|
||||
right: 0;
|
||||
top: 7px !important;
|
||||
}
|
||||
|
||||
.topbar-badge {
|
||||
right: -9px;
|
||||
top: 4px !important;
|
||||
}
|
||||
|
||||
.navbar-header .topbar-user {
|
||||
@media (min-width: 768px) {
|
||||
background-color: var(--#{$prefix}topbar-user-bg);
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
top: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
padding: 0.75rem 1rem;
|
||||
white-space: inherit;
|
||||
position: relative;
|
||||
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.active-badge {
|
||||
top: 25px;
|
||||
border: 2px solid var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
&.unread-message {
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 1.5);
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 2.5);
|
||||
}
|
||||
}
|
||||
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown with Icons
|
||||
.dropdown-icon-item {
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
padding: 15px 0 15px;
|
||||
border: 1px solid transparent;
|
||||
color: var(--#{$prefix}dropdown-link-color);
|
||||
|
||||
img {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--#{$prefix}dropdown-link-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Full Screen
|
||||
.fullscreen-enable {
|
||||
[data-toggle="fullscreen"] {
|
||||
.bx-fullscreen::before {
|
||||
content: "\eacb";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode enable
|
||||
[data-bs-theme="dark"] {
|
||||
.mode-layout {
|
||||
.bi-sun::before {
|
||||
content: "\f497";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mode-auto {
|
||||
.mode-layout {
|
||||
.bi-sun::before {
|
||||
content: "\f496" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navbar-header {
|
||||
.dropdown {
|
||||
position: static;
|
||||
|
||||
.dropdown-menu {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
#search-dropdown-reponsive {
|
||||
top: 54px !important;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"] {
|
||||
&[data-layout-style="detached"] {
|
||||
@media (min-width: 1024.1px) {
|
||||
#page-topbar {
|
||||
left: 0 !important;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.horizontal-logo {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.topnav-hamburger {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.layout-width {
|
||||
max-width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&[data-sidebar-size="sm"],
|
||||
&[data-sidebar-size="sm-hover"] {
|
||||
.navbar-brand-box {
|
||||
background-color: transparent !important;
|
||||
position: relative;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
|
||||
.logo-sm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-lg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&[data-topbar="dark"]:is([data-sidebar="light"], [data-sidebar="dark"], [data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"],[data-sidebar="gradient-4"]),
|
||||
&[data-topbar="brand"]:is([data-sidebar="light"], [data-sidebar="dark"], [data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"],[data-sidebar="gradient-4"]) {
|
||||
.horizontal-logo {
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:is([data-sidebar="dark"], [data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) {
|
||||
.horizontal-logo {
|
||||
.logo-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"] {
|
||||
#page-topbar {
|
||||
left: 0;
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
|
||||
@media (min-width: 1024.1px) {
|
||||
&.topbar-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
@media (min-width: 1024.1px) {
|
||||
margin-top: calc(#{$header-height} + #{$top-tagbar-height});
|
||||
}
|
||||
|
||||
padding: calc(45px + #{$grid-gutter-width}) calc(#{$grid-gutter-width} * 0.5) $footer-height calc(#{$grid-gutter-width} * 0.5);
|
||||
}
|
||||
|
||||
&[data-layout-width="boxed"] {
|
||||
.page-content {
|
||||
@media (min-width: 1024.1px) {
|
||||
min-height: calc(100vh - #{$footer-height + $header-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"] {
|
||||
|
||||
&:is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]){
|
||||
#page-topbar {
|
||||
@media (min-width: 768px) {
|
||||
left: $vertical-menu-width-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-size="md"] {
|
||||
#page-topbar {
|
||||
@media (min-width: 768px) {
|
||||
left: $vertical-menu-width-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="twocolumn"] {
|
||||
#page-topbar {
|
||||
@media (min-width: 768px) {
|
||||
left: calc(#{$twocolumn-menu-iconview-width} + #{$twocolumn-menu-width});
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
//
|
||||
// _two-column.scss
|
||||
//
|
||||
|
||||
[data-layout="twocolumn"] {
|
||||
.app-menu {
|
||||
padding-bottom: 0;
|
||||
width: $twocolumn-menu-width;
|
||||
left: $twocolumn-menu-iconview-width;
|
||||
|
||||
.menu-link {
|
||||
letter-spacing: .05em;
|
||||
cursor: default;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: $vertical-menu-title-color !important;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
&:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
height: calc(100vh - #{$header-height});
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
>li:not(.twocolumn-item-show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.twocolumn-item-show {
|
||||
>div {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
>.nav-item {
|
||||
>.menu-dropdown {
|
||||
display: block !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.menu-dropdown {
|
||||
.row {
|
||||
margin: 0;
|
||||
|
||||
.col-lg-4 {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sm {
|
||||
.nav-link {
|
||||
color: $vertical-menu-item-color;
|
||||
|
||||
&.active {
|
||||
color: $vertical-menu-item-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: calc(#{$twocolumn-menu-width} + #{$twocolumn-menu-iconview-width});
|
||||
|
||||
@media (max-width:767.98px) {
|
||||
margin-left: $twocolumn-menu-iconview-width;
|
||||
}
|
||||
}
|
||||
|
||||
.twocolumn-iconview {
|
||||
width: $twocolumn-menu-iconview-width;
|
||||
background: $twocolumn-menu-iconview-bg;
|
||||
height: 100%;
|
||||
left: -$twocolumn-menu-iconview-width;
|
||||
box-shadow: $twocolumn-menu-box-shadow;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
.nav-icon {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: $vertical-menu-item-color;
|
||||
z-index: 1;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
margin: 5px 0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon-dual {
|
||||
width: 18px;
|
||||
color: $vertical-menu-item-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--#{$prefix}vertical-menu-item-active-bg);
|
||||
color: var(--#{$prefix}vertical-menu-item-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.logo {
|
||||
|
||||
span.logo-lg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span.logo-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:is([data-sidebar="dark"],[data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]){
|
||||
.app-menu {
|
||||
.navbar-brand-box {
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.twocolumn-panel {
|
||||
.app-menu {
|
||||
width: 0;
|
||||
border-right: 0;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand-box,
|
||||
.navbar-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: $twocolumn-menu-iconview-width;
|
||||
}
|
||||
|
||||
#page-topbar,
|
||||
.footer {
|
||||
left: $twocolumn-menu-iconview-width;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#page-topbar,
|
||||
.footer {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page-topbar,
|
||||
.footer {
|
||||
@media (max-width: 767.98px) {
|
||||
left: $twocolumn-menu-iconview-width;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#page-topbar,
|
||||
.footer {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,985 @@
|
||||
//
|
||||
// _vertical.scss
|
||||
//
|
||||
|
||||
.app-content {
|
||||
margin-left: $vertical-menu-width;
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
padding: 0 15px 10px 15px;
|
||||
margin-top: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
transition: all .1s ease-out;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-left: $vertical-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: calc(#{$header-height} + #{$top-tagbar-height} + #{$grid-gutter-width}) calc(#{$grid-gutter-width} * 0.5) $footer-height calc(#{$grid-gutter-width} * 0.5);
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
width: $vertical-menu-width;
|
||||
z-index: $vertical-menu-z-index;
|
||||
background: $vertical-menu-bg;
|
||||
border-right: 1px solid $vertical-menu-border;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
position: fixed;
|
||||
top: $top-tagbar-height;
|
||||
padding: 0 0 calc(#{$header-height} + 25px) 0;
|
||||
transition: all .1s ease-out;
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $vertical-menu-item-padding-y $vertical-menu-item-padding-x;
|
||||
color: $vertical-menu-item-color;
|
||||
font-size: $vertical-menu-item-font-size;
|
||||
font-family: $vertical-menu-item-font-family;
|
||||
|
||||
&.active {
|
||||
color: $vertical-menu-item-active-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $vertical-menu-item-hover-color;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
min-width: $vertical-menu-item-icon-width;
|
||||
font-size: 16px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
margin-right: 0.665rem;
|
||||
color: $vertical-menu-item-color;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-left: auto;
|
||||
margin-right: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $vertical-menu-item-hover-color;
|
||||
}
|
||||
|
||||
&[data-bs-toggle=collapse] {
|
||||
&:after {
|
||||
display: block;
|
||||
content: "\F0142";
|
||||
font-family: 'Material Design Icons';
|
||||
margin-left: auto;
|
||||
transition: transform .2s;
|
||||
font-size: 1.05rem;
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
color: $vertical-menu-title-color;
|
||||
}
|
||||
|
||||
&[aria-expanded=true] {
|
||||
color: $vertical-menu-item-active-color;
|
||||
|
||||
&:after {
|
||||
transform: rotate(90deg);
|
||||
color: $vertical-menu-item-active-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
background-color: $vertical-menu-item-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
&.active {
|
||||
&::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sm {
|
||||
padding-left: $vertical-menu-item-icon-width;
|
||||
|
||||
.nav-link {
|
||||
padding: $vertical-menu-sub-item-padding-y $vertical-menu-sub-item-padding-x !important;
|
||||
color: $vertical-menu-sub-item-color;
|
||||
white-space: none;
|
||||
position: relative;
|
||||
font-size: $vertical-menu-sub-item-font-size;
|
||||
font-family: $vertical-menu-sub-item-font-family;
|
||||
|
||||
&:hover {
|
||||
color: $vertical-menu-sub-item-hover-color;
|
||||
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $vertical-menu-item-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sm {
|
||||
padding-left: 15px;
|
||||
|
||||
.nav-link {
|
||||
|
||||
&:before {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
left: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border: 1px solid;
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vertical-sm-hover {
|
||||
color: $text-muted;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
text-align: center;
|
||||
padding: 0 1.3rem;
|
||||
transition: all .1s ease-out;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-icon {
|
||||
width: 20px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
||||
span {
|
||||
background-color: var(--#{$prefix}header-item-sub-color);
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
transition: .3s cubic-bezier(.8, .5, .2, 1.4);
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
display: block;
|
||||
left: 0px;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 0;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
bottom: 0;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-menu-btn:hover &:not(.open) {
|
||||
span {
|
||||
|
||||
&:nth-child(1) {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
bottom: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
transform: rotate(-90deg);
|
||||
|
||||
span {
|
||||
|
||||
&:nth-child(1) {
|
||||
left: 1px;
|
||||
top: 5px;
|
||||
width: 20px;
|
||||
transform: rotate(90deg);
|
||||
transition-delay: 150ms;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
left: 3px;
|
||||
top: 13px;
|
||||
width: 10px;
|
||||
transform: rotate(45deg);
|
||||
transition-delay: 50ms;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
left: 9px;
|
||||
top: 13px;
|
||||
width: 10px;
|
||||
transform: rotate(-45deg);
|
||||
transition-delay: 100ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
line-height: $header-height;
|
||||
|
||||
.logo-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"] {
|
||||
.app-menu {
|
||||
.row {
|
||||
margin: 0;
|
||||
|
||||
>* {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-left: -100%;
|
||||
padding: 10px 0 20px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
.container-fluid {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
@media (max-width: 767.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/********** sm-hover **********/
|
||||
&[data-sidebar-size="sm-hover"] {
|
||||
|
||||
.main-content {
|
||||
margin-left: $vertical-menu-width-sm;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
span.logo-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.logo-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vertical-sm-hover {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.topnav-hamburger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Side menu
|
||||
.navbar-menu {
|
||||
width: $vertical-menu-width-sm;
|
||||
|
||||
.btn-vertical-sm-hover {
|
||||
display: none;
|
||||
|
||||
i {
|
||||
&.ri-record-circle-line:before {
|
||||
content: "\EB7D";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Menu
|
||||
.navbar-nav {
|
||||
|
||||
.badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
line-height: 36px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
|
||||
&.las,
|
||||
&.lar,
|
||||
&.lab {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $vertical-menu-width !important;
|
||||
border-right: 1px solid $border-color;
|
||||
|
||||
@media (min-width: 1024.99px) {
|
||||
.btn-vertical-sm-hover {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.menu-dropdown.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
span,
|
||||
&:after,
|
||||
&:before {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
span.logo-lg {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span.logo-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
text-align: left;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********** sm-hover-active **********/
|
||||
&[data-sidebar-size="sm-hover-active"] {
|
||||
.navbar-brand-box {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.topnav-hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-vertical-sm-hover {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&:is([data-sidebar-size="sm-hover"], [data-sidebar-size="sm-hover-active"]) {
|
||||
.navbar-header {
|
||||
@media (min-width: 1025px) {
|
||||
padding-left: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********** sidebar sm **********/
|
||||
&[data-sidebar-size="sm"] {
|
||||
@media (min-width: 768px) {
|
||||
min-height: 1400px;
|
||||
|
||||
.main-content {
|
||||
margin-left: $vertical-menu-width-sm;
|
||||
}
|
||||
}
|
||||
|
||||
#page-topbar {
|
||||
z-index: calc(#{$vertical-menu-z-index} + 1);
|
||||
}
|
||||
|
||||
.logo {
|
||||
span.logo-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.logo-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Side menu
|
||||
.navbar-menu {
|
||||
position: absolute;
|
||||
width: $vertical-menu-width-sm !important;
|
||||
padding-top: $header-height;
|
||||
|
||||
.simplebar-mask,
|
||||
.simplebar-content-wrapper {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar,
|
||||
.vertical-menu-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.simplebar-offset {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
// Sidebar Menu
|
||||
.navbar-nav {
|
||||
|
||||
.badge {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
display: none;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
|
||||
>a.menu-link {
|
||||
position: relative;
|
||||
width: calc(200px + #{$vertical-menu-width-sm});
|
||||
color: $white;
|
||||
background: $vertical-menu-item-hover-bg;
|
||||
transition: none;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
transform: rotate(90deg);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
>.menu-dropdown {
|
||||
display: block;
|
||||
left: $vertical-menu-width-sm;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background: $vertical-menu-bg;
|
||||
height: auto !important;
|
||||
padding: 0.5rem 0;
|
||||
border-radius: 0 0 3px 3px;
|
||||
box-shadow: $vertical-menu-dropdown-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sm {
|
||||
padding: 0;
|
||||
|
||||
.nav-item {
|
||||
&:hover {
|
||||
>.nav-link {
|
||||
color: $vertical-menu-item-hover-color;
|
||||
|
||||
&:after {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
&:after {
|
||||
display: block !important;
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
left: 100% !important;
|
||||
top: 0;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
width: calc(70px - 1px);
|
||||
z-index: 1;
|
||||
top: $top-tagbar-height;
|
||||
background: $vertical-menu-bg;
|
||||
}
|
||||
|
||||
&[data-layout-style=detached] {
|
||||
.navbar-brand-box {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********** sidebar md **********/
|
||||
&[data-sidebar-size="md"] {
|
||||
@media (min-width: 768px) {
|
||||
.main-content {
|
||||
margin-left: $vertical-menu-width-md;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
width: $vertical-menu-width-md;
|
||||
}
|
||||
|
||||
// Side menu
|
||||
.navbar-menu {
|
||||
width: $vertical-menu-width-md !important;
|
||||
|
||||
// Sidebar Menu
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: $vertical-menu-sub-item-padding-y $vertical-menu-sub-item-padding-x*0.35;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&[data-bs-toggle=collapse]:after {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
&.menu-link {
|
||||
&[data-bs-toggle=collapse]:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-sm {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-title {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********** dark **********/
|
||||
&:is([data-sidebar="dark"], [data-sidebar="brand"]) {
|
||||
&[data-sidebar-size="sm"] {
|
||||
|
||||
// Side menu
|
||||
.navbar-menu {
|
||||
.navbar-nav {
|
||||
.nav-sm {
|
||||
.nav-link {
|
||||
&:after {
|
||||
display: block !important;
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
left: 100% !important;
|
||||
top: 0;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
&:is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"],[data-sidebar="gradient-4"]) {
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/********** light **********/
|
||||
&[data-sidebar="light"] {
|
||||
.logo-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/********** detached **********/
|
||||
&[data-layout-style="detached"] {
|
||||
|
||||
#layout-wrapper,
|
||||
.main-content {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: 1024.1px) {
|
||||
.main-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-tagbar {
|
||||
.container-fluid {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
#layout-wrapper {
|
||||
max-width: 95%;
|
||||
margin: 0 auto;
|
||||
padding-left: $grid-gutter-width;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding-left: $grid-gutter-width;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
top: calc(#{$header-height} + calc(#{$grid-gutter-width} * 2.5));
|
||||
bottom: $grid-gutter-width;
|
||||
padding: 0;
|
||||
border-right: $vertical-menu-bg;
|
||||
border-radius: 5px;
|
||||
padding: 10px 0;
|
||||
z-index: 1;
|
||||
|
||||
.navbar-brand-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px dashed var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.auth-page-wrapper {
|
||||
.footer {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar-size="sm"] {
|
||||
@media (min-width: 768px) {
|
||||
|
||||
#layout-wrapper,
|
||||
.main-content {
|
||||
min-height: 1400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
letter-spacing: .05em;
|
||||
cursor: default;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: $vertical-menu-title-color;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
span {
|
||||
padding: 12px 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba($dark, 0.35);
|
||||
z-index: 1003;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Mobile Menu
|
||||
.vertical-sidebar-enable {
|
||||
.vertical-overlay {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-menu {
|
||||
margin-left: 0 !important;
|
||||
z-index: 1004;
|
||||
}
|
||||
}
|
||||
|
||||
// rtl
|
||||
[dir="rtl"] {
|
||||
.navbar-menu {
|
||||
.navbar-nav {
|
||||
.nav-link[data-bs-toggle=collapse] {
|
||||
&:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&[aria-expanded=true]:after {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-vertical-gradient {
|
||||
background: linear-gradient(to left, #{$blue-700}, #{$blue-800});
|
||||
;
|
||||
}
|
||||
|
||||
.bg-vertical-gradient-2 {
|
||||
background: linear-gradient(to left, #{$purple-700}, #{$purple-800});
|
||||
}
|
||||
|
||||
.bg-vertical-gradient-3 {
|
||||
background: linear-gradient(to left, #{$green-700}, #{$green-800});
|
||||
}
|
||||
|
||||
.bg-vertical-gradient-4 {
|
||||
background: linear-gradient(to left, #{$cyan-700}, #{$cyan-800});
|
||||
}
|
||||
|
||||
//sidebar-images
|
||||
.sidebar-background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
opacity: .07;
|
||||
}
|
||||
|
||||
[data-sidebar-image="img-1"] {
|
||||
.sidebar-background {
|
||||
background-image: url('../images/sidebar/img-1.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-image="img-2"] {
|
||||
.sidebar-background {
|
||||
background-image: url('../images/sidebar/img-2.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-image="img-3"] {
|
||||
.sidebar-background {
|
||||
background-image: url('../images/sidebar/img-3.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
[data-sidebar-image="img-4"] {
|
||||
.sidebar-background {
|
||||
background-image: url('../images/sidebar/img-4.jpg');
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
|
||||
/********** light **********/
|
||||
&[data-sidebar="light"] {
|
||||
.logo-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-topbar="dark"],
|
||||
[data-topbar="brand"] {
|
||||
.btn-ghost-dark {
|
||||
color: $gray-200;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $gray-200;
|
||||
background-color: rgba($gray-200, 0.1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
position: fixed;
|
||||
left: 12px;
|
||||
bottom: 24px;
|
||||
}
|
||||
Reference in New Issue
Block a user