sifatbaho
This commit is contained in:
285
resources/scss/_theme-dark.scss
vendored
Executable file
285
resources/scss/_theme-dark.scss
vendored
Executable file
@@ -0,0 +1,285 @@
|
||||
// :root CSS dark variables
|
||||
|
||||
|
||||
[data-layout-mode="dark"]{
|
||||
|
||||
// Color system - Dark Mode only
|
||||
$gray-100: #1a1d21;
|
||||
$gray-200: #212529;
|
||||
$gray-300: #2a2f34;
|
||||
$gray-400: #878a99;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #bfc8e2;
|
||||
$gray-700: #ced4da;
|
||||
$gray-800: #eff2f7;
|
||||
$gray-900: #f3f6f9;
|
||||
|
||||
$grays: (
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
"500": $gray-500,
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900
|
||||
);
|
||||
|
||||
// Prefix for :root CSS variables
|
||||
@each $color, $value in $grays {
|
||||
--#{$prefix}gray-#{$color}: #{$value};
|
||||
}
|
||||
|
||||
// body
|
||||
--#{$prefix}body-bg : #{$gray-100};
|
||||
--#{$prefix}body-bg-rgb : #{to-rgb($gray-100)};
|
||||
--#{$prefix}body-color: #{$gray-700};
|
||||
--#{$prefix}body-color-rgb: #{to-rgb($gray-700)};
|
||||
|
||||
//vertical light
|
||||
--#{$prefix}vertical-menu-bg: #{$white};
|
||||
--#{$prefix}vertical-menu-item-color: #{darken($gray-400, 16%)};
|
||||
--#{$prefix}vertical-menu-item-hover-color: #{$primary};
|
||||
--#{$prefix}vertical-menu-item-active-color: #{$primary};
|
||||
--#{$prefix}vertical-menu-sub-item-color: #{darken($gray-400, 12%)};
|
||||
--#{$prefix}vertical-menu-sub-item-hover-color: #{$primary};
|
||||
--#{$prefix}vertical-menu-sub-item-active-color: #{$primary};
|
||||
--#{$prefix}vertical-menu-title-color: #{$gray-400};
|
||||
|
||||
//vertical dark
|
||||
--#{$prefix}vertical-menu-bg-dark: #{$gray-200};
|
||||
--#{$prefix}vertical-menu-item-color-dark: #{$gray-400};
|
||||
--#{$prefix}vertical-menu-item-hover-color-dark: #{$white};
|
||||
--#{$prefix}vertical-menu-item-active-color-dark: #{$white};
|
||||
--#{$prefix}vertical-menu-sub-item-color-dark: #{darken($gray-400, 4%)};
|
||||
--#{$prefix}vertical-menu-sub-item-hover-color-dark: #{$white};
|
||||
--#{$prefix}vertical-menu-sub-item-active-color-dark: #{$white};
|
||||
--#{$prefix}vertical-menu-title-color-dark: #{darken($gray-400, 16%)};
|
||||
|
||||
// Topbar - (Default Light)
|
||||
--#{$prefix}header-bg: #292e32;
|
||||
--#{$prefix}header-item-color: #e9ecef;
|
||||
// Topbar - Dark
|
||||
--#{$prefix}header-bg-dark: #{$primary};
|
||||
--#{$prefix}header-item-color-dark: #b0c4d9;
|
||||
|
||||
// Topbar Search
|
||||
--#{$prefix}topbar-search-bg: #202328;
|
||||
// Topbar User
|
||||
--#{$prefix}topbar-user-bg: #{lighten($gray-300, 3%)};
|
||||
--#{$prefix}topbar-user-bg-dark: #52639c;
|
||||
|
||||
//footer
|
||||
--#{$prefix}footer-bg: #{$gray-200};
|
||||
--#{$prefix}footer-color: #{$gray-400};
|
||||
|
||||
// Horizontal nav
|
||||
--#{$prefix}topnav-bg: #{lighten($gray-200, 2.5%)};
|
||||
--#{$prefix}topnav-item-color: #{$gray-400};
|
||||
--#{$prefix}topnav-item-color-active: #{$white};
|
||||
|
||||
// twocolumn menu
|
||||
--#{$prefix}twocolumn-menu-iconview-bg: #{$white};
|
||||
--#{$prefix}twocolumn-menu-bg: #{$white};
|
||||
|
||||
// two column dark
|
||||
--#{$prefix}twocolumn-menu-iconview-bg-dark: var(--#{$prefix}vertical-menu-bg-dark);
|
||||
--#{$prefix}twocolumn-menu-bg-dark: #30363a;
|
||||
--#{$prefix}twocolumn-menu-item-color-dark: var(--#{$prefix}vertical-menu-item-color-dark);
|
||||
--#{$prefix}twocolumn-menu-item-active-color-dark: #{$white};
|
||||
--#{$prefix}twocolumn-menu-item-active-bg-dark: #{rgba($white, .15)};
|
||||
|
||||
// boxed
|
||||
--#{$prefix}boxed-body-bg: #{darken($gray-100, 4%)};
|
||||
|
||||
// heading-color
|
||||
--#{$prefix}heading-color: #{$gray-700};
|
||||
|
||||
// component variable
|
||||
--#{$prefix}light: #{$gray-300};
|
||||
--#{$prefix}light-rgb: #{to-rgb($gray-300)};
|
||||
--#{$prefix}dark: #{$gray-800};
|
||||
--#{$prefix}dark-rgb: #{to-rgb($gray-800)};
|
||||
|
||||
// link
|
||||
--#{$prefix}link-color: #{$gray-700};
|
||||
--#{$prefix}link-hover-color: #{$gray-700};
|
||||
|
||||
// Border variable
|
||||
--#{$prefix}border-color: #{lighten($gray-300, 3.5%)};
|
||||
|
||||
// dropdown
|
||||
.dropdown-menu {
|
||||
--#{$prefix}dropdown-bg: #{lighten($gray-200, 3.5%)};
|
||||
--#{$prefix}dropdown-link-color: #{$gray-500};
|
||||
--#{$prefix}dropdown-link-hover-color: #{shade-color($gray-700, 10%)};
|
||||
--#{$prefix}dropdown-link-hover-bg: #{lighten($gray-300, 2%)};
|
||||
--#{$prefix}dropdown-border-width: 1px;
|
||||
--#{$prefix}dropdown-link-active-color: #{$gray-500};
|
||||
--#{$prefix}dropdown-link-active-bg: #{lighten($gray-300, 2%)};
|
||||
}
|
||||
|
||||
//choices
|
||||
.choices, .flatpickr-calendar, .ck, .ql-toolbar, .select2-container, .menu-dropdown {
|
||||
--#{$prefix}choices-bg: #{lighten($gray-200, 3.5%)};
|
||||
--#{$prefix}choices-link-color: #{$gray-500};
|
||||
--#{$prefix}choices-link-hover-bg: #{lighten($gray-300, 2%)};
|
||||
--#{$prefix}choices-link-active-color: #{shade-color($gray-900, 10%)};
|
||||
}
|
||||
|
||||
//buttons
|
||||
.btn-light {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}dark);
|
||||
--#{$prefix}btn-bg: var(--#{$prefix}light);
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}dark);
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
.btn-light, .btn-outline-light {
|
||||
--#{$prefix}btn-hover-color: var(--#{$prefix}dark);
|
||||
--#{$prefix}btn-hover-bg: rgba(var(--#{$prefix}light-rgb), 0.75);
|
||||
--#{$prefix}btn-hover-border-color: rgba(var(--#{$prefix}light-rgb), 0.75);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}light);
|
||||
--#{$prefix}btn-bg: var(--#{$prefix}dark);
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}dark);
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}dark);
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}dark);
|
||||
}
|
||||
|
||||
.btn-dark, .btn-outline-dark {
|
||||
--#{$prefix}btn-hover-color: var(--#{$prefix}light);
|
||||
--#{$prefix}btn-hover-bg: rgba(var(--#{$prefix}dark-rgb), 0.75);
|
||||
--#{$prefix}btn-hover-border-color: rgba(var(--#{$prefix}dark-rgb), 0.75);
|
||||
}
|
||||
|
||||
// card
|
||||
.card {
|
||||
--#{$prefix}card-bg: #{$gray-200};
|
||||
--#{$prefix}card-cap-bg: #{$gray-200};
|
||||
}
|
||||
|
||||
--#{$prefix}card-bg-custom: #{$gray-200};
|
||||
--#{$prefix}card-logo-dark: none;
|
||||
--#{$prefix}card-logo-light: block;
|
||||
|
||||
// modal
|
||||
.modal {
|
||||
--#{$prefix}modal-bg: #{$gray-200};
|
||||
}
|
||||
|
||||
// nav tabs
|
||||
.nav-tabs {
|
||||
--#{$prefix}nav-tabs-link-active-color: #{$gray-900};
|
||||
--#{$prefix}nav-tabs-link-active-bg: #{$gray-300};
|
||||
}
|
||||
|
||||
// accordion
|
||||
.accordion{
|
||||
--#{$prefix}accordion-button-active-color: #{$white};
|
||||
--#{$prefix}accordion-bg: #{$gray-200};
|
||||
--#{$prefix}accordion-btn-bg: #{$gray-200};
|
||||
}
|
||||
|
||||
//offcanvas
|
||||
.offcanvas,
|
||||
.offcanvas-lg,
|
||||
.offcanvas-md,
|
||||
.offcanvas-sm,
|
||||
.offcanvas-xl,
|
||||
.offcanvas-xxl {
|
||||
--#{$prefix}offcanvas-bg: #{$gray-200};
|
||||
|
||||
}
|
||||
|
||||
// progress
|
||||
.progress{
|
||||
--#{$prefix}progress-bg: #{$gray-300};
|
||||
}
|
||||
|
||||
//table
|
||||
.table {
|
||||
--vz-table-striped-bg: #{rgba($white, .03)};
|
||||
--vz-table-active-bg: #{rgba($white, .07)};
|
||||
--vz-table-hover-bg: #{rgba($white, .07)};
|
||||
}
|
||||
|
||||
.table-light{
|
||||
--vz-table-color: #{$white};
|
||||
--vz-table-bg: #{rgba($white, .05)};
|
||||
--vz-table-border-color: #{$border-color};
|
||||
--vz-table-striped-bg: #{rgba($white, .07)};
|
||||
--vz-table-striped-color: #{$white};
|
||||
}
|
||||
|
||||
// toast
|
||||
.toast {
|
||||
--#{$prefix}toast-bg: #{rgba($gray-300, .85)};
|
||||
--#{$prefix}toast-header-bg: #{rgba($gray-300, .85)};
|
||||
--#{$prefix}toast-border-color: #{rgba($white, .1)};
|
||||
--#{$prefix}toast-header-border-color: #{rgba($white, .05)};
|
||||
}
|
||||
|
||||
//list
|
||||
--#{$prefix}list-group-hover-bg: #{lighten($gray-200, 2.5%)};
|
||||
|
||||
// popover
|
||||
.popover{
|
||||
--#{$prefix}popover-bg: #{lighten($gray-200, 1%)};
|
||||
}
|
||||
|
||||
// pagination
|
||||
.pagination{
|
||||
--#{$prefix}pagination-hover-bg: #{lighten($gray-200, 4%)};
|
||||
--#{$prefix}pagination-focus-bg: #{lighten($gray-200, 4%)};
|
||||
}
|
||||
|
||||
//form
|
||||
--#{$prefix}input-bg: #{lighten($gray-200, 2%)};
|
||||
--#{$prefix}input-border: #{$gray-300};
|
||||
--#{$prefix}input-focus-border: #{lighten($gray-300, 4%)};
|
||||
--#{$prefix}input-disabled-bg: #{$gray-200};
|
||||
|
||||
// input-group-addon
|
||||
--#{$prefix}input-group-addon-bg: #{$gray-300};
|
||||
|
||||
//check
|
||||
--#{$prefix}input-check-border: #{lighten($gray-300, 4%)};
|
||||
}
|
||||
|
||||
//sidebar color
|
||||
[data-sidebar="gradient"] {
|
||||
--#{$prefix}vertical-menu-bg-gradient: linear-gradient(to right, var(--#{$prefix}primary), var(--#{$prefix}success));
|
||||
--#{$prefix}vertical-menu-border-gradient: var(--#{$prefix}success);
|
||||
--#{$prefix}twocolumn-menu-bg-dark: var(--#{$prefix}success);
|
||||
}
|
||||
|
||||
[data-sidebar="gradient-2"] {
|
||||
--#{$prefix}vertical-menu-bg-gradient: linear-gradient(to right, var(--#{$prefix}info), var(--#{$prefix}secondary));
|
||||
--#{$prefix}vertical-menu-border-gradient: var(--#{$prefix}secondary);
|
||||
--#{$prefix}twocolumn-menu-bg-dark: var(--#{$prefix}secondary);
|
||||
}
|
||||
|
||||
[data-sidebar="gradient-3"] {
|
||||
--#{$prefix}vertical-menu-bg-gradient: linear-gradient(to right, var(--#{$prefix}info), var(--#{$prefix}success));
|
||||
--#{$prefix}vertical-menu-border-gradient: var(--#{$prefix}success);
|
||||
--#{$prefix}twocolumn-menu-bg-dark: var(--#{$prefix}success);
|
||||
}
|
||||
|
||||
[data-sidebar="gradient-4"] {
|
||||
--#{$prefix}vertical-menu-bg-gradient: linear-gradient(to right, #1a1d21, var(--#{$prefix}primary));
|
||||
--#{$prefix}vertical-menu-border-gradient: var(--#{$prefix}primary);
|
||||
--#{$prefix}twocolumn-menu-bg-dark: var(--#{$prefix}primary);
|
||||
}
|
||||
103
resources/scss/_theme-light.scss
vendored
Executable file
103
resources/scss/_theme-light.scss
vendored
Executable file
@@ -0,0 +1,103 @@
|
||||
// :root CSS variables
|
||||
|
||||
:root{
|
||||
|
||||
//vertical light
|
||||
--#{$prefix}vertical-menu-bg: #{$white};
|
||||
--#{$prefix}vertical-menu-item-color: #{darken($gray-600, 10%)};
|
||||
--#{$prefix}vertical-menu-item-hover-color: #{$primary};
|
||||
--#{$prefix}vertical-menu-item-active-color: #{$primary};
|
||||
--#{$prefix}vertical-menu-sub-item-color: #{darken($gray-600, 4%)};
|
||||
--#{$prefix}vertical-menu-sub-item-hover-color: #{$primary};
|
||||
--#{$prefix}vertical-menu-sub-item-active-color: #{$primary};
|
||||
--#{$prefix}vertical-menu-title-color: #919da9;
|
||||
|
||||
//vertical dark
|
||||
--#{$prefix}vertical-menu-bg-dark: #{$primary};
|
||||
--#{$prefix}vertical-menu-item-color-dark: #abb9e8;
|
||||
--#{$prefix}vertical-menu-item-hover-color-dark: #{$white};
|
||||
--#{$prefix}vertical-menu-item-active-color-dark: #{$white};
|
||||
--#{$prefix}vertical-menu-sub-item-color-dark: #abb9e8;
|
||||
--#{$prefix}vertical-menu-sub-item-hover-color-dark: #{$white};
|
||||
--#{$prefix}vertical-menu-sub-item-active-color-dark: #{$white};
|
||||
--#{$prefix}vertical-menu-title-color-dark: #838fb9;
|
||||
|
||||
// Topbar - (Default Light)
|
||||
--#{$prefix}header-bg: #{$white};
|
||||
--#{$prefix}header-item-color: #e9ecef;
|
||||
// Topbar - Dark
|
||||
--#{$prefix}header-bg-dark: #{$primary};
|
||||
--#{$prefix}header-item-color-dark: #b0c4d9;
|
||||
|
||||
// Topbar Search
|
||||
--#{$prefix}topbar-search-bg: #f3f3f9;
|
||||
// Topbar User
|
||||
--#{$prefix}topbar-user-bg: #f3f3f9;
|
||||
--#{$prefix}topbar-user-bg-dark: #52639c;
|
||||
|
||||
//footer
|
||||
--#{$prefix}footer-bg: #{$white};
|
||||
--#{$prefix}footer-color: #98a6ad;
|
||||
|
||||
// Horizontal nav
|
||||
--#{$prefix}topnav-bg: #{$white};
|
||||
--#{$prefix}topnav-item-color: #{darken($gray-600, 10%)};
|
||||
--#{$prefix}topnav-item-color-active: #{$primary};
|
||||
|
||||
// twocolumn menu
|
||||
--#{$prefix}twocolumn-menu-iconview-bg: #{$white};
|
||||
--#{$prefix}twocolumn-menu-bg: #{$white};
|
||||
// two column dark
|
||||
--#{$prefix}twocolumn-menu-iconview-bg-dark: var(--#{$prefix}vertical-menu-bg-dark);
|
||||
--#{$prefix}twocolumn-menu-bg-dark: #{lighten($primary, 2%)};
|
||||
--#{$prefix}twocolumn-menu-item-color-dark: var(--#{$prefix}vertical-menu-item-color-dark);
|
||||
--#{$prefix}twocolumn-menu-item-active-color-dark: #{$white};
|
||||
--#{$prefix}twocolumn-menu-item-active-bg-dark: #{rgba($white, .15)};
|
||||
|
||||
// boxed
|
||||
--#{$prefix}boxed-body-bg: #{darken($body-bg, 4%)};
|
||||
|
||||
// heading-color
|
||||
--#{$prefix}heading-color: #{$gray-700};
|
||||
|
||||
// component variable
|
||||
// link
|
||||
--#{$prefix}link-color: #{$primary};
|
||||
--#{$prefix}link-hover-color: #{$primary};
|
||||
|
||||
// Border variable
|
||||
--#{$prefix}border-color: #{$gray-300};
|
||||
|
||||
// card
|
||||
--#{$prefix}card-bg-custom: #{$white};
|
||||
--#{$prefix}card-logo-dark: block;
|
||||
--#{$prefix}card-logo-light: none;
|
||||
|
||||
// nav tabs
|
||||
.nav-tabs {
|
||||
--#{$prefix}nav-tabs-link-active-bg: #{$body-bg};
|
||||
}
|
||||
|
||||
//choices
|
||||
.choices, .flatpickr-calendar, .ck, .ql-toolbar, .select2-container, .menu-dropdown{
|
||||
--#{$prefix}choices-bg: #{$white};
|
||||
--#{$prefix}choices-link-color: #{$gray-900};
|
||||
--#{$prefix}choices-link-hover-bg: #{$gray-100};
|
||||
--#{$prefix}choices-link-active-color: #{shade-color($gray-900, 10%)};
|
||||
}
|
||||
|
||||
//list
|
||||
--#{$prefix}list-group-hover-bg: #{$gray-100};
|
||||
|
||||
// form
|
||||
--#{$prefix}input-bg: #{$white};
|
||||
--#{$prefix}input-border: #{$gray-400};
|
||||
--#{$prefix}input-focus-border: #{tint-color($component-active-bg, 50%)};
|
||||
--#{$prefix}input-disabled-bg: #{$gray-200};
|
||||
|
||||
// input-group-addon
|
||||
--#{$prefix}input-group-addon-bg: #{$gray-200};
|
||||
|
||||
//check
|
||||
--#{$prefix}input-check-border: var(--#{$prefix}input-border);
|
||||
}
|
||||
1767
resources/scss/_variables.scss
vendored
Executable file
1767
resources/scss/_variables.scss
vendored
Executable file
File diff suppressed because it is too large
Load Diff
120
resources/scss/app.scss
vendored
Executable file
120
resources/scss/app.scss
vendored
Executable file
@@ -0,0 +1,120 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Version: 2.0.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 "./node_modules/bootstrap/scss/mixins";
|
||||
|
||||
@import "theme-light";
|
||||
@import "theme-dark";
|
||||
|
||||
// Structure
|
||||
@import "structure/topbar";
|
||||
@import "structure/page-head";
|
||||
@import "structure/footer";
|
||||
@import "structure/vertical";
|
||||
@import "structure/horizontal";
|
||||
@import "structure/two-column";
|
||||
@import "structure/layouts";
|
||||
|
||||
// Components
|
||||
@import "components/waves";
|
||||
@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/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/range-slider";
|
||||
@import "plugins/sortablejs";
|
||||
@import "plugins/tour";
|
||||
@import "plugins/swiper";
|
||||
@import "plugins/multijs";
|
||||
@import "plugins/colorpicker";
|
||||
@import "plugins/filepond";
|
||||
@import "plugins/form-input-spin";
|
||||
@import "plugins/ckeditor";
|
||||
@import "plugins/quilljs";
|
||||
@import "plugins/gridjs";
|
||||
@import "plugins/listjs";
|
||||
@import "plugins/apexcharts";
|
||||
@import "plugins/chartjs";
|
||||
@import "plugins/echarts";
|
||||
@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/select2";
|
||||
|
||||
// Plugins
|
||||
@import "plugins/toastify";
|
||||
@import "plugins/choices";
|
||||
@import "plugins/flatpicker";
|
||||
@import "plugins/flag-input";
|
||||
|
||||
// Pages
|
||||
@import "pages/authentication";
|
||||
@import "pages/dashboard";
|
||||
@import "pages/timeline";
|
||||
@import "pages/gallery";
|
||||
@import "pages/errors";
|
||||
@import "pages/profile";
|
||||
@import "pages/sitemap";
|
||||
@import "pages/team";
|
||||
@import "pages/coming-soon";
|
||||
@import "pages/search-results";
|
||||
@import "pages/ecommerce";
|
||||
@import "pages/invoice";
|
||||
@import "pages/chat";
|
||||
@import "pages/email";
|
||||
@import "pages/kanban";
|
||||
@import "pages/landing";
|
||||
@import "pages/nft-landing";
|
||||
@import "pages/file-manager";
|
||||
@import "pages/to-do";
|
||||
16
resources/scss/bootstrap.scss
vendored
Executable file
16
resources/scss/bootstrap.scss
vendored
Executable file
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Version: 2.0.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 "./node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
187
resources/scss/components/_accordion.scss
vendored
Executable file
187
resources/scss/components/_accordion.scss
vendored
Executable file
@@ -0,0 +1,187 @@
|
||||
//
|
||||
// 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-layout-mode="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);
|
||||
}
|
||||
}
|
||||
}
|
||||
200
resources/scss/components/_alerts.scss
vendored
Executable file
200
resources/scss/components/_alerts.scss
vendored
Executable file
@@ -0,0 +1,200 @@
|
||||
//
|
||||
// alerts.scss
|
||||
//
|
||||
|
||||
// alert solid
|
||||
|
||||
.alert-solid {
|
||||
.alert-link {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// alert outline
|
||||
|
||||
.alert-outline {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
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}card-bg-custom);
|
||||
border-color: $border-color;
|
||||
border-top: 2px solid;
|
||||
color: var(--#{$prefix}body-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} {
|
||||
background-color: $value;
|
||||
border-color: $value;
|
||||
color: set-color-from-background($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}dark);
|
||||
}
|
||||
|
||||
64
resources/scss/components/_avatar.scss
vendored
Executable file
64
resources/scss/components/_avatar.scss
vendored
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
resources/scss/components/_backgrounds.scss
vendored
Executable file
20
resources/scss/components/_backgrounds.scss
vendored
Executable file
@@ -0,0 +1,20 @@
|
||||
//
|
||||
// backgrounds.scss
|
||||
//
|
||||
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.bg-soft-#{$color} {
|
||||
background-color: rgba(($value), 0.18) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-soft-dark{
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb),.18)!important;
|
||||
}
|
||||
|
||||
.bg-soft-light{
|
||||
background-color: rgba(var(--#{$prefix}light-rgb),.18)!important;
|
||||
}
|
||||
|
||||
106
resources/scss/components/_badge.scss
vendored
Executable file
106
resources/scss/components/_badge.scss
vendored
Executable file
@@ -0,0 +1,106 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// [data-layout-mode="dark"]{
|
||||
// .badge{
|
||||
// &.bg-dark{
|
||||
// background-color: var(--#{$prefix}light) !important;
|
||||
// }
|
||||
|
||||
// &.bg-light{
|
||||
// background-color: var(--#{$prefix}dark) !important;
|
||||
// color: var(--#{$prefix}light) !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
//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);
|
||||
}
|
||||
19
resources/scss/components/_breadcrumb.scss
vendored
Executable file
19
resources/scss/components/_breadcrumb.scss
vendored
Executable file
@@ -0,0 +1,19 @@
|
||||
//
|
||||
// breadcrumb.scss
|
||||
//
|
||||
|
||||
|
||||
// Breadcrumb item arrow
|
||||
.breadcrumb-item {
|
||||
> a {
|
||||
color: var(--#{$prefix}gray-700);
|
||||
}
|
||||
+.breadcrumb-item {
|
||||
&::before {
|
||||
font-family: "Material Design Icons";
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
369
resources/scss/components/_buttons.scss
vendored
Executable file
369
resources/scss/components/_buttons.scss
vendored
Executable file
@@ -0,0 +1,369 @@
|
||||
//
|
||||
// _buttons.scss
|
||||
//
|
||||
|
||||
button,
|
||||
a {
|
||||
outline: none !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn {
|
||||
box-shadow: $element-shadow;
|
||||
&:hover, &.active, &:focus, &:active, &.show, &:first-child:active {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
: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 + #{$btn-border-width * 2});
|
||||
width: calc(#{$btn-padding-y * 2} + #{$btn-line-height}em + #{$btn-border-width * 2});
|
||||
padding: 0;
|
||||
|
||||
i,
|
||||
svg,
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
height: calc(#{$btn-padding-y-sm * 2} + #{$btn-line-height}em + #{$btn-border-width * 2});
|
||||
width: calc(#{$btn-padding-y-sm * 2} + #{$btn-line-height}em + #{$btn-border-width * 2});
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
height: calc(#{$btn-padding-y-lg * 2} + #{$btn-line-height}em + #{$btn-border-width * 2});
|
||||
width: calc(#{$btn-padding-y-lg * 2} + #{$btn-line-height}em + #{$btn-border-width * 2});
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Soft Buttons
|
||||
//
|
||||
|
||||
@mixin button-variant-soft($bg) {
|
||||
color: $bg;
|
||||
background-color: rgba($bg, 0.1);
|
||||
border-color: transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white !important;
|
||||
background-color: $bg !important;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.btn-soft-#{$color} {
|
||||
@include button-variant-soft($value);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Ghost Buttons
|
||||
//
|
||||
|
||||
@mixin button-variant-ghost($bg) {
|
||||
color: $bg;
|
||||
border-color: transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $bg !important;
|
||||
background-color: rgba($bg, 0.1) !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.btn-ghost-#{$color} {
|
||||
@include button-variant-ghost($value);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-ghost-secondary {
|
||||
color: var(--#{$prefix}gray-700);
|
||||
}
|
||||
|
||||
//button with icon
|
||||
.btn-label {
|
||||
position: relative;
|
||||
padding-left: 44px;
|
||||
|
||||
.label-icon {
|
||||
position: absolute;
|
||||
width: 35.5px;
|
||||
left: -$btn-border-width;
|
||||
top: -$btn-border-width;
|
||||
bottom: -$btn-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: -$btn-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 {
|
||||
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-layout-mode="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}dark);
|
||||
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}light);
|
||||
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}dark);
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.1);
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}light);
|
||||
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}dark);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--#{$prefix}dark);
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-load {
|
||||
|
||||
.spinner-border,
|
||||
.spinner-grow {
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
//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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//custom toggle
|
||||
.custom-toggle {
|
||||
.icon-off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.icon-on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-off {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
170
resources/scss/components/_card.scss
vendored
Executable file
170
resources/scss/components/_card.scss
vendored
Executable file
@@ -0,0 +1,170 @@
|
||||
//
|
||||
// _card.scss
|
||||
//
|
||||
|
||||
.card {
|
||||
margin-bottom: $grid-gutter-width;
|
||||
box-shadow: $card-box-shadow;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
//Card Header Dropdown
|
||||
.card-header-dropdown {
|
||||
.dropdown-btn {
|
||||
padding: $card-cap-padding-y 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.card-drop {
|
||||
color: $body-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.20);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
141
resources/scss/components/_demos.scss
vendored
Executable file
141
resources/scss/components/_demos.scss
vendored
Executable file
@@ -0,0 +1,141 @@
|
||||
//
|
||||
// _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);
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
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-layout-mode="dark"]{
|
||||
.colorscheme-cardradio{
|
||||
.form-check-label{
|
||||
background-color: var(--#{$prefix}dark);
|
||||
}
|
||||
.bg-light{
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 0.1)!important;
|
||||
}
|
||||
|
||||
.bg-soft-light {
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb),.1)!important;
|
||||
}
|
||||
|
||||
.dark{
|
||||
.bg-dark{
|
||||
background-color: var(--#{$prefix}card-bg-custom)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
138
resources/scss/components/_dropdown.scss
vendored
Executable file
138
resources/scss/components/_dropdown.scss
vendored
Executable file
@@ -0,0 +1,138 @@
|
||||
//
|
||||
// _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: rgba($white, 0.6);
|
||||
&.active {
|
||||
background-color: var(--#{$prefix}dropdown-bg);
|
||||
}
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.dropdownmenu-#{$color} {
|
||||
.dropdown-item{
|
||||
&:focus, &:hover, &.active{
|
||||
background-color: rgba(($value), 0.07);
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
325
resources/scss/components/_form-check.scss
vendored
Executable file
325
resources/scss/components/_form-check.scss
vendored
Executable file
@@ -0,0 +1,325 @@
|
||||
//
|
||||
// _form-check.scss
|
||||
//
|
||||
|
||||
.form-check {
|
||||
position: relative;
|
||||
text-align: left
|
||||
/*rtl: right*/;
|
||||
|
||||
.form-check-input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
label {
|
||||
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}card-bg-custom);
|
||||
border: 1px solid var(--#{$prefix}input-check-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout-mode="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>"));
|
||||
}
|
||||
}
|
||||
}
|
||||
37
resources/scss/components/_form-control.scss
vendored
Executable file
37
resources/scss/components/_form-control.scss
vendored
Executable file
@@ -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-layout-mode="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>"));
|
||||
}
|
||||
}
|
||||
12
resources/scss/components/_forms.scss
vendored
Executable file
12
resources/scss/components/_forms.scss
vendored
Executable file
@@ -0,0 +1,12 @@
|
||||
//
|
||||
// forms.scss
|
||||
//
|
||||
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
&::placeholder {
|
||||
text-align: left /*rtl: right*/;
|
||||
}
|
||||
}
|
||||
344
resources/scss/components/_helper.scss
vendored
Executable file
344
resources/scss/components/_helper.scss
vendored
Executable file
@@ -0,0 +1,344 @@
|
||||
//
|
||||
// _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-color
|
||||
.border-dark {
|
||||
border-color: var(--#{$prefix}dark)!important;
|
||||
}
|
||||
.border-light {
|
||||
border-color: var(--#{$prefix}light)!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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//link
|
||||
[data-layout-mode="dark"]{
|
||||
.link-dark, .link-light{
|
||||
color: var(--#{$prefix}dark) !important;
|
||||
&:focus, &:hover{
|
||||
color: rgba(var(--#{$prefix}dark-rgb), 0.75) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Font Family
|
||||
|
||||
.ff-base {
|
||||
font-family: $font-family-base;
|
||||
}
|
||||
|
||||
.ff-secondary {
|
||||
font-family: $font-family-secondary;
|
||||
}
|
||||
|
||||
// Font weight help class
|
||||
|
||||
.fw-medium {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
// Flex
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Backgroun pattern
|
||||
.bg-pattern {
|
||||
background: url("../images/modal-bg.png") $modal-content-bg;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.layout-rightside {
|
||||
width: 280px;
|
||||
margin-right: -#{$grid-gutter-width};
|
||||
margin-top: calc(1px - #{$grid-gutter-width} * 1.1);
|
||||
height: calc(100% + #{$grid-gutter-width} * 1.1);
|
||||
}
|
||||
|
||||
.layout-rightside-col {
|
||||
|
||||
@media (max-width: 1699.98px) {
|
||||
display: none;
|
||||
position: fixed !important;
|
||||
height: 100vh;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1004;
|
||||
.overlay{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background-color: rgba($dark, 0.2);
|
||||
|
||||
}
|
||||
.layout-rightside {
|
||||
margin-top: 0px;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
}
|
||||
.card-body {
|
||||
overflow-y: auto;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"], [data-layout-style=detached]{
|
||||
@media (min-width: 1700px) {
|
||||
.layout-rightside{
|
||||
margin-top: calc(28px - #{$grid-gutter-width});
|
||||
margin-right: 0;
|
||||
height: calc(100% - calc(#{$grid-gutter-width} / 5));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// object fit cover
|
||||
.object-cover{
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// text-truncate-two-lines
|
||||
.text-truncate-two-lines{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// Favourite button
|
||||
.favourite-btn{
|
||||
border-color: transparent;
|
||||
.ri-star-fill{
|
||||
color: $text-muted;
|
||||
}
|
||||
&.active{
|
||||
border-color: transparent;
|
||||
.ri-star-fill{
|
||||
color: $warning;
|
||||
|
||||
&:before{
|
||||
content: "\f186";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// card
|
||||
.card-logo-light{
|
||||
display: var(--#{$prefix}card-logo-light);
|
||||
}
|
||||
|
||||
.card-logo-dark{
|
||||
display: var(--#{$prefix}card-logo-dark);
|
||||
}
|
||||
|
||||
[data-layout-mode="dark"]{
|
||||
.btn-close{
|
||||
filter: invert(1) grayscale(100%) brightness(200%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#back-to-top {
|
||||
position: fixed;
|
||||
bottom: 100px;
|
||||
right: 28px;
|
||||
transition: all 0.5s ease;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
&:hover {
|
||||
animation: fade-up 1.5s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-up {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
36
resources/scss/components/_list-group.scss
vendored
Executable file
36
resources/scss/components/_list-group.scss
vendored
Executable file
@@ -0,0 +1,36 @@
|
||||
//
|
||||
// _list-group.scss
|
||||
//
|
||||
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.list-group-fill-#{$color} {
|
||||
.list-group-item {
|
||||
&.active {
|
||||
background-color: $value !important;
|
||||
border-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-fill-light {
|
||||
color: $dark !important;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
165
resources/scss/components/_modal.scss
vendored
Executable file
165
resources/scss/components/_modal.scss
vendored
Executable file
@@ -0,0 +1,165 @@
|
||||
//
|
||||
// _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;
|
||||
}
|
||||
580
resources/scss/components/_nav.scss
vendored
Executable file
580
resources/scss/components/_nav.scss
vendored
Executable file
@@ -0,0 +1,580 @@
|
||||
//
|
||||
// _nav.scss
|
||||
//
|
||||
|
||||
.nav-tabs,
|
||||
.nav-pills {
|
||||
>li {
|
||||
>a {
|
||||
color: var(--#{$prefix}gray-700);
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
>a {
|
||||
color: var(--#{$prefix}gray-700);
|
||||
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}gray-300);
|
||||
|
||||
.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 {
|
||||
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: rgba(var(--#{$prefix}dark-rgb), 0.75);
|
||||
|
||||
&.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 {
|
||||
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}dark);
|
||||
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}dark);
|
||||
|
||||
&::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}light-rgb), 0.4);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
color: var(--#{$prefix}dark);
|
||||
|
||||
.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}body-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}body-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
resources/scss/components/_pagination.scss
vendored
Executable file
38
resources/scss/components/_pagination.scss
vendored
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
7
resources/scss/components/_popover.scss
vendored
Executable file
7
resources/scss/components/_popover.scss
vendored
Executable file
@@ -0,0 +1,7 @@
|
||||
//
|
||||
// _popover.scss
|
||||
//
|
||||
|
||||
.popover {
|
||||
box-shadow: $popover-box-shadow;
|
||||
}
|
||||
27
resources/scss/components/_preloader.scss
vendored
Executable file
27
resources/scss/components/_preloader.scss
vendored
Executable file
@@ -0,0 +1,27 @@
|
||||
//
|
||||
// preloader.scss
|
||||
//
|
||||
|
||||
#preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
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;
|
||||
}
|
||||
42
resources/scss/components/_print.scss
vendored
Executable file
42
resources/scss/components/_print.scss
vendored
Executable file
@@ -0,0 +1,42 @@
|
||||
//
|
||||
// print.scss
|
||||
//
|
||||
|
||||
// Used invoice page
|
||||
@media print {
|
||||
.vertical-menu,
|
||||
.right-bar,
|
||||
.page-title-box,
|
||||
.navbar-header,
|
||||
.app-menu,
|
||||
.footer,
|
||||
#back-to-top {
|
||||
display: none !important;
|
||||
}
|
||||
.card-body,
|
||||
.main-content,
|
||||
.right-bar,
|
||||
.page-content,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card{
|
||||
border: 0;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.invoice-details{
|
||||
.d-sm-flex{
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
.address{
|
||||
&.col-sm-6 {
|
||||
flex: 0 0 auto !important;
|
||||
width: 50% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
151
resources/scss/components/_progress.scss
vendored
Executable file
151
resources/scss/components/_progress.scss
vendored
Executable file
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
79
resources/scss/components/_reboot.scss
vendored
Executable file
79
resources/scss/components/_reboot.scss
vendored
Executable file
@@ -0,0 +1,79 @@
|
||||
//
|
||||
// reboot.scss
|
||||
//
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $heading-color;
|
||||
font-family: $heading-font-family;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: $font-weight-medium;
|
||||
margin-bottom: $form-label-margin-bottom;
|
||||
}
|
||||
b,
|
||||
strong {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
// blockquote
|
||||
|
||||
.blockquote {
|
||||
padding: 10px 20px;
|
||||
border-left: 4px solid var(--#{$prefix}gray-300);
|
||||
}
|
||||
|
||||
.blockquote-reverse {
|
||||
border-left: 0;
|
||||
border-right: 4px solid var(--#{$prefix}gray-300);
|
||||
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;
|
||||
}
|
||||
}
|
||||
394
resources/scss/components/_ribbons.scss
vendored
Executable file
394
resources/scss/components/_ribbons.scss
vendored
Executable file
@@ -0,0 +1,394 @@
|
||||
//
|
||||
// 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: 5px;
|
||||
|
||||
&.round-shape {
|
||||
border-radius: 0 30px 30px 0;
|
||||
}
|
||||
|
||||
&.ribbon-shape {
|
||||
display: inline-block;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -17px;
|
||||
top: 0;
|
||||
border: 14px solid transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -17px;
|
||||
bottom: 0;
|
||||
border: 14px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 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,
|
||||
&::after {
|
||||
right: auto;
|
||||
left: -17px;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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);
|
||||
|
||||
&:before {
|
||||
border-color: darken(($value), 10%) transparent transparent;
|
||||
}
|
||||
|
||||
&.ribbon-shape {
|
||||
&::before {
|
||||
border-left-color: ($value);
|
||||
border-top-color: ($value);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-left-color: ($value);
|
||||
border-bottom-color: ($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Icon ribbon
|
||||
|
||||
.icon-ribbon {
|
||||
box-shadow: none;
|
||||
left: 24px;
|
||||
top: -12px;
|
||||
font-size: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Ribbon two */
|
||||
.ribbon-two {
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
top: -5px;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
text-align: right;
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
transform: rotate(-45deg);
|
||||
width: 100px;
|
||||
display: block;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
left: -21px;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
z-index: -1;
|
||||
border-right: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
z-index: -1;
|
||||
border-left: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.ribbon-two-#{$color} {
|
||||
|
||||
span {
|
||||
background: ($value);
|
||||
|
||||
&:before {
|
||||
border-left: 3px solid darken(($value), 15%);
|
||||
border-top: 3px solid darken(($value), 15%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-right: 3px solid darken(($value), 15%);
|
||||
border-top: 3px solid darken(($value), 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.ribbon-box {
|
||||
&.right {
|
||||
.ribbon-three {
|
||||
position: absolute;
|
||||
top: -6.1px;
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ribbon-three {
|
||||
position: absolute;
|
||||
top: -6.1px;
|
||||
left: 10px;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 12px 8px 10px;
|
||||
border-top-right-radius: 8px;
|
||||
width: 90px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::before {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
left: -6px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
left: -8px;
|
||||
top: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 44px solid transparent;
|
||||
border-right: 44px solid transparent;
|
||||
border-top: 10px solid;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.ribbon-three-#{$color} {
|
||||
|
||||
span {
|
||||
background: ($value);
|
||||
|
||||
&:before {
|
||||
background: ($value);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: darken($value, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-top-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
resources/scss/components/_scrollspy.scss
vendored
Executable file
17
resources/scss/components/_scrollspy.scss
vendored
Executable file
@@ -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;
|
||||
}
|
||||
97
resources/scss/components/_table.scss
vendored
Executable file
97
resources/scss/components/_table.scss
vendored
Executable file
@@ -0,0 +1,97 @@
|
||||
//
|
||||
// _table.scss
|
||||
//
|
||||
|
||||
.table {
|
||||
th {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
>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;
|
||||
}
|
||||
}
|
||||
}
|
||||
24
resources/scss/components/_toast.scss
vendored
Executable file
24
resources/scss/components/_toast.scss
vendored
Executable file
@@ -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);
|
||||
}
|
||||
}
|
||||
70
resources/scss/components/_type.scss
vendored
Executable file
70
resources/scss/components/_type.scss
vendored
Executable file
@@ -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}card-bg-custom) !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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
168
resources/scss/components/_waves.scss
vendored
Executable file
168
resources/scss/components/_waves.scss
vendored
Executable file
@@ -0,0 +1,168 @@
|
||||
|
||||
/*!
|
||||
* Waves v0.7.6
|
||||
* http://fian.my.id/Waves
|
||||
*
|
||||
* Copyright 2014-2018 Alfiana E. Sibuea and other contributors
|
||||
* Released under the MIT license
|
||||
* https://github.com/fians/Waves/blob/master/LICENSE */
|
||||
.waves-effect {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.waves-effect .waves-ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: -50px;
|
||||
margin-left: -50px;
|
||||
opacity: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
|
||||
background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
|
||||
background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
|
||||
background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
-moz-transition: all 0.5s ease-out;
|
||||
-o-transition: all 0.5s ease-out;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-transition-property: -webkit-transform, opacity;
|
||||
-moz-transition-property: -moz-transform, opacity;
|
||||
-o-transition-property: -o-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-transform: scale(0) translate(0, 0);
|
||||
-moz-transform: scale(0) translate(0, 0);
|
||||
-ms-transform: scale(0) translate(0, 0);
|
||||
-o-transform: scale(0) translate(0, 0);
|
||||
transform: scale(0) translate(0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
.waves-effect.waves-light .waves-ripple {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
|
||||
background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
|
||||
background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
|
||||
background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
|
||||
}
|
||||
.waves-effect.waves-classic .waves-ripple {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.waves-effect.waves-classic.waves-light .waves-ripple {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.waves-notransition {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.waves-button,
|
||||
.waves-circle {
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
|
||||
}
|
||||
.waves-button,
|
||||
.waves-button:hover,
|
||||
.waves-button:visited,
|
||||
.waves-button-input {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.waves-button {
|
||||
padding: 0.85em 1.1em;
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
.waves-button-input {
|
||||
margin: 0;
|
||||
padding: 0.85em 1.1em;
|
||||
}
|
||||
.waves-input-wrapper {
|
||||
border-radius: 0.2em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.waves-input-wrapper.waves-button {
|
||||
padding: 0;
|
||||
}
|
||||
.waves-input-wrapper .waves-button-input {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.waves-circle {
|
||||
text-align: center;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.waves-float {
|
||||
-webkit-mask-image: none;
|
||||
-webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
|
||||
-webkit-transition: all 300ms;
|
||||
-moz-transition: all 300ms;
|
||||
-o-transition: all 300ms;
|
||||
transition: all 300ms;
|
||||
}
|
||||
.waves-float:active {
|
||||
-webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.waves-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.waves-effect.waves-light {
|
||||
.waves-ripple {
|
||||
background-color: rgba($white, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.waves-effect.waves-primary {
|
||||
.waves-ripple {
|
||||
background-color: rgba($primary, 0.4);
|
||||
}
|
||||
}
|
||||
.waves-effect.waves-success {
|
||||
.waves-ripple {
|
||||
background-color: rgba($success, 0.4);
|
||||
}
|
||||
}
|
||||
.waves-effect.waves-info {
|
||||
.waves-ripple {
|
||||
background-color: rgba($info, 0.4);
|
||||
}
|
||||
}
|
||||
.waves-effect.waves-warning {
|
||||
.waves-ripple {
|
||||
background-color: rgba($warning, 0.4);
|
||||
}
|
||||
}
|
||||
.waves-effect.waves-danger {
|
||||
.waves-ripple {
|
||||
background-color: rgba($danger, 0.4);
|
||||
}
|
||||
}
|
||||
87
resources/scss/components/_widgets.scss
vendored
Executable file
87
resources/scss/components/_widgets.scss
vendored
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
resources/scss/custom.scss
vendored
Executable file
7
resources/scss/custom.scss
vendored
Executable file
@@ -0,0 +1,7 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://themesbrand.com/
|
||||
Contact: support@themesbrand.com
|
||||
File: Custom Css File
|
||||
*/
|
||||
41
resources/scss/fonts/_fonts.scss
vendored
Executable file
41
resources/scss/fonts/_fonts.scss
vendored
Executable file
@@ -0,0 +1,41 @@
|
||||
//
|
||||
// Google font - Poppins
|
||||
//
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
//
|
||||
// Premium Font : HKGrotesk
|
||||
//
|
||||
|
||||
@font-face {
|
||||
font-family: "hkgrotesk";
|
||||
src: url("../fonts/hkgrotesk-light.eot");
|
||||
src: local('hkgrotesk light'), url("../fonts/hkgrotesk-light.woff") format("woff");
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "hkgrotesk";
|
||||
src: url("../fonts/hkgrotesk-regular.eot");
|
||||
src: local('hkgrotesk regular'), url("../fonts/hkgrotesk-regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "hkgrotesk";
|
||||
src: url("../fonts/hkgrotesk-medium.eot");
|
||||
src: local('hkgrotesk medium'), url("../fonts/hkgrotesk-medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "hkgrotesk";
|
||||
src: url("../fonts/hkgrotesk-semibold.eot");
|
||||
src: local('hkgrotesk semibold'), url("../fonts/hkgrotesk-semibold.woff") format("woff");
|
||||
font-weight: 600;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "hkgrotesk";
|
||||
src: url("../fonts/hkgrotesk-bold.eot");
|
||||
src: local('hkgrotesk bold'), url("../fonts/hkgrotesk-bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
}
|
||||
14
resources/scss/icons.scss
vendored
Executable file
14
resources/scss/icons.scss
vendored
Executable file
@@ -0,0 +1,14 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Version: 2.0.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/line-awesome";
|
||||
@import "plugins/icons/remixicon";
|
||||
141
resources/scss/pages/_authentication.scss
vendored
Executable file
141
resources/scss/pages/_authentication.scss
vendored
Executable file
@@ -0,0 +1,141 @@
|
||||
//
|
||||
// _authentication.scss
|
||||
//
|
||||
|
||||
|
||||
.auth-page-wrapper{
|
||||
.auth-page-content{
|
||||
padding-bottom: $footer-height;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
.footer{
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
|
||||
.auth-one-bg-position{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-one-bg{
|
||||
background-image: url("../images/auth-one-bg.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.bg-overlay{
|
||||
background: linear-gradient(to right, darken($primary, 6%), $primary);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.shape{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
>svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
fill: var(--#{$prefix}body-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// auth-pass-inputgroup
|
||||
|
||||
.auth-pass-inputgroup{
|
||||
input[type="text"] + .btn .ri-eye-fill{
|
||||
&:before{
|
||||
content: "\ecb6";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.particles-js-canvas-el{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 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}card-bg-custom);
|
||||
padding: 2px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Auth cover
|
||||
|
||||
.auth-bg-cover{
|
||||
background: $auth-bg-cover;
|
||||
|
||||
> .bg-overlay{
|
||||
background-image: url("../images/cover-pattern.png");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.footer{
|
||||
color: rgba($white, .5);
|
||||
}
|
||||
}
|
||||
|
||||
//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: "✖";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
616
resources/scss/pages/_chat.scss
vendored
Executable file
616
resources/scss/pages/_chat.scss
vendored
Executable file
@@ -0,0 +1,616 @@
|
||||
//
|
||||
// _chat.scss
|
||||
//
|
||||
|
||||
.chat-wrapper{
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// chat left sidebar
|
||||
|
||||
.chat-leftsidebar {
|
||||
height: calc(100vh - 137px);
|
||||
position: relative;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chat-list {
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
&.active {
|
||||
a {
|
||||
background-color: $chat-secondary-bg;
|
||||
color: $chat-secondary-color;
|
||||
|
||||
.badge {
|
||||
background-color: rgba(var(--#{$prefix}success-rgb), 0.15) !important;
|
||||
color: $success !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 7px 24px;
|
||||
color: var(--#{$prefix}body-color);
|
||||
transition: all 0.4s;
|
||||
font-family: $font-family-secondary;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.chat-user-message {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.unread-msg-user {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.unread-message {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
right: 24px/*rtl:auto*/;
|
||||
left: auto/*rtl:0*/;
|
||||
top: 33px;
|
||||
|
||||
.badge {
|
||||
line-height: 16px;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-user-img {
|
||||
position: relative;
|
||||
|
||||
.user-status {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: $gray-500;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--#{$prefix}card-bg-custom);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.online {
|
||||
.user-status {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&.away {
|
||||
.user-status {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-room-list {
|
||||
max-height: calc(100vh - 296px);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 296px);
|
||||
}
|
||||
}
|
||||
|
||||
// contact list
|
||||
|
||||
.contact-list {
|
||||
li {
|
||||
cursor: pointer;
|
||||
padding: 8px 24px;
|
||||
transition: all 0.4s;
|
||||
color: var(--#{$prefix}body-color);
|
||||
font-family: $font-family-secondary;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-list-title{
|
||||
padding: 6px 24px;
|
||||
color: $primary;
|
||||
font-weight: $font-weight-medium;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
&:after{
|
||||
content: "";
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 50px;
|
||||
right: 0;
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// user chat
|
||||
|
||||
.user-chat {
|
||||
background: url("../images/chat-bg-pattern.png");
|
||||
transition: all 0.4s;
|
||||
position: relative;
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
width: 100%;
|
||||
height: calc(100% - 3px);
|
||||
visibility: hidden;
|
||||
transform: translateX(100%);
|
||||
z-index: 99;
|
||||
padding-top: 70px;
|
||||
|
||||
&.user-chat-show{
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.user-chat-show{
|
||||
.chat-welcome-section{
|
||||
display: none;
|
||||
}
|
||||
.chat-content{
|
||||
@media (min-width: 992px) {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-chat-topbar{
|
||||
border-bottom: 1px solid transparent;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
@media (max-width: 991.98px) {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-chat-nav {
|
||||
.nav-btn {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
color: $gray-800;
|
||||
}
|
||||
@media (max-width:575.98px) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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: 80%;
|
||||
|
||||
@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: $chat-primary-bg;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
box-shadow: $box-shadow-lg;
|
||||
|
||||
.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($dark,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: $chat-secondary-bg;
|
||||
color: $chat-secondary-color;
|
||||
text-align: right;
|
||||
box-shadow: $element-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-section{
|
||||
border-top: 1px solid transparent;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.chat-input-feedback {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 4px;
|
||||
font-size: 12px;
|
||||
color: $danger;
|
||||
}
|
||||
.show{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-links{
|
||||
display: flex;
|
||||
.links-list-item{
|
||||
> .btn{
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
width: 37.5px;
|
||||
height: 37.5px;
|
||||
&.btn-link{
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//Copy Message Alert
|
||||
.copyclipboard-alert{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform:translateX(-50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.replyCard{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
transition: all 0.4s;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
bottom: -12px;
|
||||
}
|
||||
|
||||
&.show{
|
||||
transform: translateY(-88px);
|
||||
opacity: 1;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
transform: translateY(-83px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.replymessage-block{
|
||||
padding: 12px 20px;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(var(--vz-success-rgb), 0.1);
|
||||
border-left: 2px solid rgba(var(--vz-success-rgb), 1);
|
||||
|
||||
.conversation-name{
|
||||
color: rgba(var(--vz-success-rgb), 1);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Chat Small
|
||||
.chat-sm {
|
||||
.ctext-wrap-content {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.message-img {
|
||||
img {
|
||||
max-width: 90px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.message-img-link {
|
||||
bottom: 0 !important;
|
||||
right: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// for horizontal layout
|
||||
[data-layout="horizontal"]{
|
||||
.chat-wrapper{
|
||||
@media (min-width: 1025px) {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-leftsidebar{
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 54px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-room-list{
|
||||
height: calc(100vh - 352px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 265px);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-conversation{
|
||||
height: calc(100vh - 343px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 275px);
|
||||
}
|
||||
}
|
||||
}
|
||||
75
resources/scss/pages/_coming-soon.scss
vendored
Executable file
75
resources/scss/pages/_coming-soon.scss
vendored
Executable file
@@ -0,0 +1,75 @@
|
||||
//
|
||||
// _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-medium;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(var(--#{$prefix}dark-rgb), 0.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.count-num{
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
padding: 16px 8px;
|
||||
position: relative;
|
||||
border-radius: $card-border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
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); }
|
||||
}
|
||||
|
||||
.coming-soon-text{
|
||||
font-weight: $font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
text-shadow: 3px 4px $success;
|
||||
}
|
||||
|
||||
.countdown-input-group{
|
||||
max-width: 400px;
|
||||
}
|
||||
184
resources/scss/pages/_dashboard.scss
vendored
Executable file
184
resources/scss/pages/_dashboard.scss
vendored
Executable file
@@ -0,0 +1,184 @@
|
||||
//
|
||||
// _dashboard.scss
|
||||
//
|
||||
|
||||
.dash-filter-picker {
|
||||
min-width: 210px !important;
|
||||
}
|
||||
|
||||
|
||||
// Flatpickr Calendar
|
||||
|
||||
.upcoming-scheduled{
|
||||
position: relative;
|
||||
.flatpickr-months{
|
||||
position: absolute !important;
|
||||
top: -45px !important;
|
||||
left: auto !important;
|
||||
right: 0px !important;
|
||||
width: 200px;
|
||||
background-color: transparent;
|
||||
|
||||
.flatpickr-month{
|
||||
color: $gray-600 !important;
|
||||
fill: $gray-600 !important;
|
||||
}
|
||||
.flatpickr-prev-month, .flatpickr-next-month{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.flatpickr-calendar{
|
||||
box-shadow: none !important;
|
||||
.flatpickr-current-month {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
.flatpickr-monthDropdown-months {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 4px;
|
||||
height: 26px;
|
||||
}
|
||||
.flatpickr-weekdays{
|
||||
background-color: var(--#{$prefix}light);
|
||||
border: none;
|
||||
span.flatpickr-weekday {
|
||||
color: var(--#{$prefix}dark);
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
.flatpickr-day{
|
||||
&.today{
|
||||
color: $white !important;
|
||||
background-color: $success;
|
||||
border-color: $success !important;
|
||||
&:hover{
|
||||
color: $success !important;
|
||||
background-color: rgba($success, 0.2) !important;
|
||||
}
|
||||
}
|
||||
&.selected{
|
||||
background-color: $success !important;
|
||||
border-color: $success !important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.numInputWrapper {
|
||||
width: 7.5ch;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-days {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.crm-widget {
|
||||
.col {
|
||||
border-right: 1px solid $border-color;
|
||||
&:last-child {
|
||||
border: 0px;
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 1399.98px) {
|
||||
&:nth-child(3) {
|
||||
border-right: 0px;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
border-right: 0px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1400px) and (max-width: 1599.98px) {
|
||||
.project-wrapper {
|
||||
>.col-xxl-8, .col-xxl-4{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.crypto-widget {
|
||||
max-width: 130px !important;
|
||||
}
|
||||
|
||||
//nft dashboard
|
||||
|
||||
.bg-marketplace {
|
||||
background-image: url(../images/nft/marketplace.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.dash-countdown {
|
||||
.countdownlist {
|
||||
.count-num {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
padding: 16px 8px;
|
||||
font-size: 22px;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 16px;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.count-title {
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.marketplace-icon {
|
||||
position: absolute;
|
||||
float: right;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.marketplace-swiper {
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
top: 34px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-color: rgba($primary, 0.1);
|
||||
color: $primary;
|
||||
border-radius: .3rem;
|
||||
right: 16px !important;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
right: 58px !important;
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-collection {
|
||||
.content{
|
||||
background-color: rgba($white, 0.25);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.dash-nft{
|
||||
@media (max-width: 1441.98px) {
|
||||
.col-xxl-9, .col-xxl-3 {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
57
resources/scss/pages/_ecommerce.scss
vendored
Executable file
57
resources/scss/pages/_ecommerce.scss
vendored
Executable file
@@ -0,0 +1,57 @@
|
||||
//
|
||||
// _ecommerce.scss
|
||||
//
|
||||
|
||||
// product list
|
||||
|
||||
#selection-element {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-choices-input{
|
||||
.choices__inner{
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
|
||||
.choices__input{
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
}
|
||||
|
||||
// product detail
|
||||
|
||||
.sticky-side-div{
|
||||
@media (min-width: 992px){
|
||||
position: sticky;
|
||||
top: calc(#{$header-height} + #{$grid-gutter-width});
|
||||
}
|
||||
}
|
||||
|
||||
.product-img-slider{
|
||||
.product-nav-slider{
|
||||
.nav-slide-item{
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.swiper-slide-thumb-active{
|
||||
.nav-slide-item{
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-list{
|
||||
a {
|
||||
&.active {
|
||||
.listname {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
378
resources/scss/pages/_email.scss
vendored
Executable file
378
resources/scss/pages/_email.scss
vendored
Executable file
@@ -0,0 +1,378 @@
|
||||
//
|
||||
// _email.scss
|
||||
//
|
||||
|
||||
.email-wrapper {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// chat left sidebar
|
||||
|
||||
.email-menu-sidebar {
|
||||
height: calc(100vh - 137px);
|
||||
position: relative;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
transition: all 0.2s;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-width: 250px;
|
||||
max-width: 250px;
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 8px);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
max-width: 100%;
|
||||
z-index: 1003;
|
||||
box-shadow: $box-shadow-lg;
|
||||
transform: translateX(-100%);
|
||||
visibility: hidden;
|
||||
height: 100vh;
|
||||
|
||||
&.menubar-show {
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.email-menu-sidebar-scroll {
|
||||
height: calc(100vh - 295px);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mail-list {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $gray-600;
|
||||
padding: 5px 0;
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $success;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
i {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-topbar-link {
|
||||
.btn-ghost-secondary {
|
||||
color: $text-muted;
|
||||
|
||||
&:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-content {
|
||||
width: 100%;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.unreadConversations-alert{
|
||||
position: fixed;
|
||||
bottom: $footer-height;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.email-detail-content {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
left: 68%;
|
||||
width: 32%;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
transform: translateX(200%);
|
||||
transition: all 0.2s;
|
||||
visibility: hidden;
|
||||
border-left: 2px solid var(--#{$prefix}body-bg);
|
||||
}
|
||||
|
||||
.email-detail-show {
|
||||
.email-detail-content {
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
margin-right: 32%;
|
||||
|
||||
@media (max-width: 1349.98px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-detail-content-scroll {
|
||||
height: calc(100vh - 390px);
|
||||
|
||||
@media (max-width: 1349.98px) {
|
||||
height: calc(100vh - 252px);
|
||||
}
|
||||
}
|
||||
|
||||
.message-list-content {
|
||||
height: calc(100vh - 242px);
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
height: calc(100vh - 230px);
|
||||
}
|
||||
}
|
||||
|
||||
.message-list {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
cursor: default;
|
||||
transition-duration: .3s;
|
||||
clear: both;
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}gray-700);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--#{$prefix}light);
|
||||
transition-duration: .05s;
|
||||
}
|
||||
|
||||
.col-mail {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.col-mail-1 {
|
||||
width: 280px;
|
||||
|
||||
.star-toggle,
|
||||
.checkbox-wrapper-mail,
|
||||
.dot {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dot {
|
||||
border: 4px solid transparent;
|
||||
border-radius: 100px;
|
||||
margin: 22px 26px 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.checkbox-wrapper-mail {
|
||||
margin: 15px 0 0 20px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.star-toggle {
|
||||
margin-top: 18px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 95px;
|
||||
right: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
left: 95px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-mail-2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 280px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.subject,
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.subject {
|
||||
left: 0;
|
||||
right: 110px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.teaser{
|
||||
color: var(--#{$prefix}gray-600);
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
right: 0;
|
||||
width: 100px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.active:hover {
|
||||
box-shadow: inset 3px 0 0 $primary;
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
|
||||
&.unread {
|
||||
color: var(--#{$prefix}gray-800);
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}gray-800);
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#unreadConversations, #email-topbar-actions{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#elmLoader{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.email-compose-input {
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: 1349.98px) {
|
||||
.email-detail-content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
z-index: 1003;
|
||||
box-shadow: $box-shadow-lg;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.email-detail-show {
|
||||
.email-detail-content {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.message-list li .col-mail-1 {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-editor {
|
||||
.ck-editor__editable_inline {
|
||||
min-height: 200px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.email-chat-detail{
|
||||
width: 350px;
|
||||
position: fixed;
|
||||
max-width: 100%;
|
||||
bottom: $footer-height;
|
||||
right: $footer-height;
|
||||
z-index: 9;
|
||||
display: none;
|
||||
.card{
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
@media (max-width: 515.98px) {
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// for horizontal layout
|
||||
[data-layout="horizontal"]{
|
||||
.email-wrapper{
|
||||
@media (min-width: 1025px) {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.email-menu-sidebar{
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 54px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: 100vh
|
||||
}
|
||||
.email-menu-sidebar-scroll{
|
||||
height: calc(100vh - 330px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 150px)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-list-content {
|
||||
height: calc(100vh - 289px);
|
||||
|
||||
}
|
||||
|
||||
.email-detail-content-scroll{
|
||||
height: calc(100vh - 435px);
|
||||
@media (max-width: 1349.98px){
|
||||
height: calc(100vh - 252px);
|
||||
}
|
||||
}
|
||||
}
|
||||
79
resources/scss/pages/_errors.scss
vendored
Executable file
79
resources/scss/pages/_errors.scss
vendored
Executable file
@@ -0,0 +1,79 @@
|
||||
//
|
||||
// _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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes errorAnimation {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
15% {
|
||||
transform: translateX(-25%) rotate(-5deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateX(20%) rotate(3deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translateX(-15%) rotate(-3deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(10%) rotate(2deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(-5%) rotate(-1deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.error-img {
|
||||
animation: errorAnimation 20s infinite;
|
||||
}
|
||||
150
resources/scss/pages/_file-manager.scss
vendored
Executable file
150
resources/scss/pages/_file-manager.scss
vendored
Executable file
@@ -0,0 +1,150 @@
|
||||
//
|
||||
// _file-manager.scss
|
||||
//
|
||||
|
||||
.file-manager-menu {
|
||||
max-height: calc(100vh - 296px);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 296px);
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 5px 0px;
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}dark);
|
||||
font-weight: $font-weight-medium;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&.active,
|
||||
&:hover,
|
||||
&[aria-expanded="true"]{
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
li {
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "\f0374";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
font-family: Material Design Icons;
|
||||
color: rgba(var(--#{$prefix}dark-rgb), 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-manager-sidebar {
|
||||
position: relative;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-width: 300px;
|
||||
max-width: 700px;
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 8px);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
max-width: 100%;
|
||||
z-index: 1003;
|
||||
box-shadow: $box-shadow-lg;
|
||||
transform: translateX(-100%);
|
||||
visibility: hidden;
|
||||
height: 100vh;
|
||||
|
||||
&.menubar-show {
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-menu-sidebar-scroll{
|
||||
height: calc(100vh - 375px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 120px);
|
||||
}
|
||||
}
|
||||
|
||||
.file-manager-content {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
|
||||
.file-manager-content-scroll{
|
||||
height: calc(100vh - 185px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 144px);
|
||||
}
|
||||
|
||||
.simplebar-content{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-detail-content-scroll{
|
||||
height: calc(100vh - 180px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.simplebar-content{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-manager-detail-content {
|
||||
width: 32%;
|
||||
max-width: 100%;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-detail-show{
|
||||
.file-manager-detail-content{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#file-overview{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1399.98px) {
|
||||
.file-manager-detail-content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
z-index: 1003;
|
||||
box-shadow: $box-shadow-lg;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.file-detail-show {
|
||||
.file-manager-detail-content {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-details-box {
|
||||
height: 195px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
169
resources/scss/pages/_galaxy.scss
vendored
Executable file
169
resources/scss/pages/_galaxy.scss
vendored
Executable file
@@ -0,0 +1,169 @@
|
||||
//
|
||||
// _galaxy.scss
|
||||
//
|
||||
|
||||
.card {
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
position: absolute;
|
||||
border: 3px solid;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-color: $border-color $border-color transparent transparent;
|
||||
right: -3px;
|
||||
top: -3px;
|
||||
border-radius: 0 3px 0 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: transparent transparent $border-color $border-color;
|
||||
left: -3px;
|
||||
bottom: -3px;
|
||||
border-radius: 0 0 0 3px;
|
||||
}
|
||||
|
||||
&.card-border-effect-none {
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background-image: var(--#{$prefix}body-bg-image);
|
||||
background-attachment: fixed;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background-color: rgba($white, 0.30);
|
||||
}
|
||||
}
|
||||
|
||||
#page-topbar {
|
||||
&.topbar-shadow {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item:hover>.menu-dropdown {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.layout-rightside-col {
|
||||
@media (max-width: 1699.98px) {
|
||||
.card {
|
||||
background-color: var(--#{$prefix}gray-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apex-charts {
|
||||
.apexcharts-pie-series {
|
||||
path {
|
||||
stroke: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-tooltip,
|
||||
.swal2-popup {
|
||||
background-color: var(--#{$prefix}card-bg-fill) !important;
|
||||
}
|
||||
|
||||
.shepherd-content,
|
||||
.card-bg-fill,
|
||||
.navbar-landing.is-sticky,
|
||||
#preloader,
|
||||
.timeline-item .icon,
|
||||
.department ul li a {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
|
||||
// profile Page
|
||||
.profile-wid-bg::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1349.98px) {
|
||||
|
||||
.email-detail-content,
|
||||
.file-manager-detail-content {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
|
||||
[for="body-img-three"],
|
||||
[for="body-img-two"],
|
||||
[for="body-img-one"] {
|
||||
background-image: var(--#{$prefix}body-bg-image);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
[data-sidebar="light"][data-layout="vertical"][data-sidebar-size="sm-hover"] {
|
||||
.navbar-menu:hover {
|
||||
background-color: var(--#{$prefix}white);
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout-mode="dark"] {
|
||||
body {
|
||||
background-size: cover;
|
||||
|
||||
&::before {
|
||||
background-color: rgba(4, 19, 36, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="vertical"][data-sidebar="dark"][data-sidebar-size="sm-hover"] {
|
||||
.navbar-menu:hover {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="vertical"][data-sidebar="dark"][data-sidebar-size="sm"] {
|
||||
.navbar-menu .navbar-nav .nav-item:hover>.menu-dropdown {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="vertical"][data-sidebar-size="sm"] {
|
||||
.navbar-menu .navbar-nav .nav-item:hover>a.menu-link {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"] .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse]:after {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.email-menu-sidebar.menubar-show {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
[data-topbar="light"] {
|
||||
.app-menu {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
[data-layout-mode="dark"] {
|
||||
.vertical-sidebar-enable .app-menu {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
121
resources/scss/pages/_gallery.scss
vendored
Executable file
121
resources/scss/pages/_gallery.scss
vendored
Executable file
@@ -0,0 +1,121 @@
|
||||
//
|
||||
// _gallery.scss
|
||||
//
|
||||
|
||||
.categories-filter {
|
||||
.list-inline-item {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: var(--#{$prefix}body-color);
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: 8px 15px;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
padding: 8px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.gallery-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gallery-overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
opacity: 0;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .5) 100%);
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease-in-out 0s;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
padding: 16px;
|
||||
|
||||
.overlay-caption {
|
||||
color: $white;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-img {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin: 0;
|
||||
transition: all 0.2s;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
bottom: 0;
|
||||
|
||||
.post {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-overlay {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-light {
|
||||
.gallery-box {
|
||||
&::before {
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
}
|
||||
31
resources/scss/pages/_invoice.scss
vendored
Executable file
31
resources/scss/pages/_invoice.scss
vendored
Executable file
@@ -0,0 +1,31 @@
|
||||
//
|
||||
// _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;
|
||||
}
|
||||
}
|
||||
}
|
||||
94
resources/scss/pages/_kanban.scss
vendored
Executable file
94
resources/scss/pages/_kanban.scss
vendored
Executable file
@@ -0,0 +1,94 @@
|
||||
//
|
||||
// _kanban.scss
|
||||
//
|
||||
|
||||
.tasks-board {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
align-items: stretch;
|
||||
|
||||
.tasks-list {
|
||||
min-width: 300px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), .075);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.tasks-box {
|
||||
.progress {
|
||||
border-radius: 0px 0px $card-border-radius $card-border-radius;
|
||||
}
|
||||
|
||||
.tasks-img {
|
||||
height: 135px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
margin: 12px 0px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.tasks-wrapper {
|
||||
max-height: calc(100vh - 418px);
|
||||
}
|
||||
|
||||
|
||||
.tasks {
|
||||
min-height: 180px;
|
||||
position: relative;
|
||||
|
||||
&.noTask{
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 180px;
|
||||
width: 270px;
|
||||
margin: 0 auto;
|
||||
background-image: url('../images/file.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tasksList {
|
||||
tr {
|
||||
.tasks-list-menu {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.tasks-list-menu {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
261
resources/scss/pages/_landing.scss
vendored
Executable file
261
resources/scss/pages/_landing.scss
vendored
Executable file
@@ -0,0 +1,261 @@
|
||||
//
|
||||
// _landing.scss
|
||||
//
|
||||
|
||||
.layout-wrapper {
|
||||
&.landing {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// helper
|
||||
|
||||
.section {
|
||||
padding: 90px 0;
|
||||
position: relative;
|
||||
|
||||
@media (max-width:767.98px) {
|
||||
padding: 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-effect {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: rgba($success, 0.2);
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// navbar
|
||||
|
||||
.navbar-landing {
|
||||
padding: 10px 0px;
|
||||
transition: all 0.5s ease;
|
||||
@media (max-width: 991.98px) {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
box-shadow: 0 1px 16px -2px rgba(56, 65, 74, 0.15);
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-medium;
|
||||
transition: all 0.4s;
|
||||
font-family: $font-family-secondary;
|
||||
color: var(--#{$prefix}dark);
|
||||
padding: 14px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding: 8px 0px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&:focus {
|
||||
color: $success !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-sticky {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
box-shadow: 0 1px 16px -2px rgba(56, 65, 74, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
//navbar-light
|
||||
.navbar-light{
|
||||
.navbar-brand {
|
||||
.card-logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-logo-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: rgba(var(--#{$prefix}white-rgb), 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-sticky {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: var(--#{$prefix}dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-brand {
|
||||
.card-logo-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-logo-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hero section
|
||||
|
||||
.hero-section {
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 0.5);
|
||||
|
||||
.hero-shape-svg {
|
||||
svg {
|
||||
path {
|
||||
fill: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-overlay-pattern {
|
||||
background-image: url("../images/landing/bg-pattern.png");
|
||||
background-color: transparent;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.demo-carousel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.carousel-item {
|
||||
.demo-item {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
padding: 8px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-img-patten-top {
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
top: -16px;
|
||||
max-width: 230px;
|
||||
}
|
||||
|
||||
.demo-img-patten-bottom {
|
||||
position: absolute;
|
||||
left: -70px;
|
||||
bottom: -50px;
|
||||
max-width: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
// client images
|
||||
.client-images img {
|
||||
max-height: 45px;
|
||||
width: auto;
|
||||
margin: 12px auto;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
// plan
|
||||
|
||||
.plan-box {
|
||||
max-width: 356px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// work process
|
||||
.process-card {
|
||||
position: relative;
|
||||
|
||||
.process-arrow-img {
|
||||
position: absolute;
|
||||
left: 75%;
|
||||
top: 7%;
|
||||
width: 50%;
|
||||
opacity: .1;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-footer {
|
||||
color: #9ba7b3;
|
||||
}
|
||||
|
||||
.footer-list {
|
||||
li {
|
||||
a {
|
||||
color: #9ba7b3;
|
||||
padding: 7px 0;
|
||||
display: block;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social-link {
|
||||
.avatar-title {
|
||||
color: #778089;
|
||||
background-color: rgba($white, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
&.landing-back-top {
|
||||
bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
// dark
|
||||
|
||||
[data-layout-mode="dark"] {
|
||||
.layout-wrapper.landing {
|
||||
|
||||
.demo-img-patten-top,
|
||||
.demo-img-patten-bottom {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
footer.bg-dark {
|
||||
background-color: var(--#{$prefix}card-bg-custom) !important;
|
||||
}
|
||||
}
|
||||
|
||||
//navbar-light
|
||||
.navbar-light{
|
||||
&.is-sticky {
|
||||
.navbar-brand {
|
||||
.card-logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-logo-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
101
resources/scss/pages/_nft-landing.scss
vendored
Executable file
101
resources/scss/pages/_nft-landing.scss
vendored
Executable file
@@ -0,0 +1,101 @@
|
||||
//
|
||||
// _nft-landing.scss
|
||||
//
|
||||
|
||||
.bookmark-icon {
|
||||
.btn {
|
||||
color: $text-muted;
|
||||
background-color: var(--#{$prefix}light);
|
||||
box-shadow: $box-shadow;
|
||||
font-size: $font-size-base;
|
||||
&:hover,
|
||||
&.active {
|
||||
border-color: transparent;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explore-box {
|
||||
border-radius: 9px;
|
||||
overflow: hidden;
|
||||
.explore-img {
|
||||
height: 280px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.explore-place-bid-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
.bg-overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba($dark, 0.4);
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.place-bid-btn {
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.btn {
|
||||
opacity: 0;
|
||||
bottom: -25px;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.explore-place-bid-img {
|
||||
.place-bid-btn {
|
||||
.btn {
|
||||
opacity: 1;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.discount-time {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
background-color: rgba($white, 0.4);
|
||||
backdrop-filter: blur(5px);
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
.nft-hero {
|
||||
background-image: url('../images/nft/bg-home.jpg');
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
padding: 222px 0 150px 0;
|
||||
.bg-overlay {
|
||||
background-color: #05175f;
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
#explorecard-list {
|
||||
.list-element {
|
||||
display: none;
|
||||
|
||||
&:nth-child(-n+10) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
187
resources/scss/pages/_profile.scss
vendored
Executable file
187
resources/scss/pages/_profile.scss
vendored
Executable file
@@ -0,0 +1,187 @@
|
||||
//
|
||||
// _profile.scss
|
||||
//
|
||||
|
||||
.error-text {
|
||||
text-shadow: 4px 4px rgba($success, 0.4);
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
font-size: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// profile
|
||||
|
||||
.profile-wid-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 320px;
|
||||
@media (max-width: 575.98px) {
|
||||
height: 445px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
opacity: 0.9;
|
||||
background: $primary;
|
||||
background: linear-gradient(to top, darken($primary, 25%), $primary);
|
||||
|
||||
}
|
||||
|
||||
.profile-wid-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-nav {
|
||||
&.nav-pills {
|
||||
.nav-link {
|
||||
color: rgba($white, 0.8);
|
||||
|
||||
&::before {
|
||||
background-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-project-card {
|
||||
border: 1px solid $border-color;
|
||||
border-left: 3px solid $border-color;
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.profile-project-card {
|
||||
&.profile-project-#{$color} {
|
||||
border-left-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile-img {
|
||||
position: relative;
|
||||
|
||||
.profile-img {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
|
||||
@media (max-width:991px) {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-foreground-img-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-photo-edit {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-user {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.profile-photo-edit {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-profile-image {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-img-file-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-timeline {
|
||||
.accordion-item {
|
||||
position: relative;
|
||||
|
||||
.accordion-button {
|
||||
background-color: transparent;
|
||||
|
||||
&::after {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
border-left: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 23px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&::before {
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::before {
|
||||
height: 20px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-setting-img {
|
||||
position: relative;
|
||||
height: 260px;
|
||||
|
||||
.overlay-content {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.profile-img {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
|
||||
@media (max-width:991.98px) {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-foreground-img-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-photo-edit {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:575.98px) {
|
||||
|
||||
[data-layout="horizontal"]{
|
||||
.profile-foreground{
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
103
resources/scss/pages/_search-results.scss
vendored
Executable file
103
resources/scss/pages/_search-results.scss
vendored
Executable file
@@ -0,0 +1,103 @@
|
||||
//
|
||||
// _search-results.scss
|
||||
//
|
||||
|
||||
.search-more-results {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.nav-icon {
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
font-size: 14px;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-list {
|
||||
.list-element {
|
||||
display: none;
|
||||
&:nth-child(1) {
|
||||
display: block;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
display: block;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-voice {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
line-height: 120px;
|
||||
margin: 0px auto;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
line-height: 56px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.voice-wave {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
z-index: -1;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: 0px auto;
|
||||
opacity: 0;
|
||||
border-radius: 100px;
|
||||
animation: voice-wave 1.8s infinite;
|
||||
background-color: var(--#{$prefix}light);
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes voice-wave {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.images-menu {
|
||||
.swiper-slide {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
482
resources/scss/pages/_sitemap.scss
vendored
Executable file
482
resources/scss/pages/_sitemap.scss
vendored
Executable file
@@ -0,0 +1,482 @@
|
||||
//
|
||||
// _sitemap.scss
|
||||
//
|
||||
|
||||
.sitemap-content {
|
||||
width: 100%;
|
||||
max-width: 1142px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
|
||||
* {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.sitemap-horizontal {
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
background: var(--#{$prefix}light);
|
||||
border: 2px solid var(--#{$prefix}card-bg-custom);
|
||||
box-shadow: $box-shadow;
|
||||
font-size: $font-size-base;
|
||||
height: 60px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.administration {
|
||||
.director {
|
||||
>li {
|
||||
>a {
|
||||
width: 50%;
|
||||
margin: 0 auto 0px auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subdirector {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 130px;
|
||||
border-left: 2px dashed $border-color;
|
||||
left: 45.45%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
>li {
|
||||
&:first-child {
|
||||
width: 18.59%;
|
||||
height: 64px;
|
||||
margin: 0 auto 92px auto;
|
||||
padding-top: 25px;
|
||||
border-bottom: 2px dashed $border-color;
|
||||
z-index: 1;
|
||||
float: right;
|
||||
right: 27.2%;
|
||||
border-left: 2px dashed $border-color;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.subdirector {
|
||||
>li {
|
||||
&:first-child {
|
||||
width: 40%;
|
||||
right: 10%;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 49.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.departments {
|
||||
width: 100%;
|
||||
|
||||
>li {
|
||||
&:first-child {
|
||||
width: 18.59%;
|
||||
height: 64px;
|
||||
margin: 0 auto 92px auto;
|
||||
padding-top: 25px;
|
||||
border-bottom: 2px dashed $border-color;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
left: 27%;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 0;
|
||||
clear: left;
|
||||
|
||||
&.department {
|
||||
&:before {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 81.1%;
|
||||
height: 22px;
|
||||
border-top: 2px dashed $border-color;
|
||||
border-right: 2px dashed $border-color;
|
||||
border-left: 2px dashed $border-color;
|
||||
margin: 0 auto;
|
||||
top: 130px;
|
||||
left: 9.1%
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
>li {
|
||||
&:first-child {
|
||||
width: 40%;
|
||||
left: 10%;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-right: none;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.department {
|
||||
border-left: 2px dashed $border-color;
|
||||
float: left;
|
||||
margin-left: 1.75%;
|
||||
margin-bottom: 60px;
|
||||
width: 18.25%;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 22px;
|
||||
border-left: 2px dashed $border-color;
|
||||
z-index: 1;
|
||||
top: -22px;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
>a {
|
||||
margin: 0 0 -26px -4px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
|
||||
li {
|
||||
padding-left: 25px;
|
||||
border-bottom: 2px dashed $border-color;
|
||||
height: 80px;
|
||||
|
||||
a {
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
margin-top: 48px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 90%;
|
||||
height: 60px;
|
||||
vertical-align: middle;
|
||||
right: -1px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
&:last-child:before {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 60px;
|
||||
border-left: 2px dashed $white;
|
||||
z-index: 1;
|
||||
top: -60px;
|
||||
left: 0%;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// sitemap
|
||||
|
||||
.hori-sitemap {
|
||||
ul {
|
||||
padding: 0;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
li {
|
||||
position: relative;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
text-align: left;
|
||||
.parent-title {
|
||||
a {
|
||||
padding-left: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
>ul {
|
||||
position: relative;
|
||||
li {
|
||||
padding-top: 10px;
|
||||
.second-list,
|
||||
.sub-list {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
height: calc(100% - 14px);
|
||||
border-right: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.sub-list {
|
||||
&:before {
|
||||
height: 38%;
|
||||
}
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
padding: 4px 16px 4px 36px;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 24px;
|
||||
border-top: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
ul {
|
||||
padding-top: 20px;
|
||||
li {
|
||||
padding-top: 30px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
height: 24px;
|
||||
width: 0;
|
||||
border-right: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-top: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.parent-title {
|
||||
&::before {
|
||||
content: "";
|
||||
height: 23px;
|
||||
border-right: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 0;
|
||||
}
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
height: 21px;
|
||||
border-right: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 49%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}body-color);
|
||||
padding: 4px 0px;
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// vertical sitemap
|
||||
.verti-sitemap {
|
||||
a {
|
||||
color: var(--#{$prefix}body-color);
|
||||
display: block;
|
||||
}
|
||||
.parent-title {
|
||||
a {
|
||||
padding-left: 0;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.first-list {
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
&:before {
|
||||
content: "";
|
||||
border-left: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.list-wrap, li {
|
||||
a {
|
||||
position: relative;
|
||||
padding: 10px 16px 4px 36px;
|
||||
&::before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
border-top: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.second-list, .third-list {
|
||||
margin-left: 42px;
|
||||
|
||||
}
|
||||
|
||||
.third-list, .second-list {
|
||||
position: relative;
|
||||
li {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
border-left: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0px auto;
|
||||
}
|
||||
&:last-child {
|
||||
&::before {
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::before {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
213
resources/scss/pages/_team.scss
vendored
Executable file
213
resources/scss/pages/_team.scss
vendored
Executable file
@@ -0,0 +1,213 @@
|
||||
//
|
||||
// _team.scss
|
||||
//
|
||||
|
||||
.team-box .team-cover, .profile-offcanvas .team-cover, .modal-team-cover{
|
||||
display: none;
|
||||
position: relative;
|
||||
margin-bottom: -140px;
|
||||
|
||||
img {
|
||||
height: 140px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to top, darken($primary, 25%), $primary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.team-list {
|
||||
&.grid-view-filter {
|
||||
flex-flow: row wrap;
|
||||
|
||||
.col {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.team-box {
|
||||
overflow: hidden;
|
||||
|
||||
.team-row {
|
||||
align-items: start;
|
||||
|
||||
.col {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.team-cover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.team-settings {
|
||||
.col {
|
||||
width: 50% !important;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.btn-star {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
>a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.team-profile-img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
margin-top: 36px;
|
||||
|
||||
.avatar-lg {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.team-content {
|
||||
margin-left: 0px;
|
||||
margin-top: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1399.98px) {
|
||||
.col {
|
||||
flex: 0 0 auto;
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
.col {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.col {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.list-view-filter {
|
||||
flex-direction: column;
|
||||
|
||||
.team-box {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.team-row {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.team-profile-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar-lg {
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.team-content {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.team-settings {
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
-webkit-box-ordinal-group: 7;
|
||||
order: 6;
|
||||
}
|
||||
|
||||
.btn-star {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
flex-direction: row;
|
||||
.col {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.team-box {
|
||||
|
||||
.team-settings {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
order: -1;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.col {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.team-profile-img {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-team-cover{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list-grid-nav {
|
||||
.nav-link {
|
||||
&.active {
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-offcanvas {
|
||||
.team-cover {
|
||||
margin-bottom: -132px;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
}
|
||||
.btn-star {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
>a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
438
resources/scss/pages/_timeline.scss
vendored
Executable file
438
resources/scss/pages/_timeline.scss
vendored
Executable file
@@ -0,0 +1,438 @@
|
||||
//
|
||||
// _timeline.scss
|
||||
//
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background: $timeline-color;
|
||||
top: 57px;
|
||||
bottom: 166px;
|
||||
left: 50%;
|
||||
margin-left: -1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
padding: 30px 60px;
|
||||
position: relative;
|
||||
background: inherit;
|
||||
width: 50%;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
top: 30px;
|
||||
right: -30px;
|
||||
padding: 9px 0;
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 50px;
|
||||
color: $success;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: calc(100% - 48px);
|
||||
top: 50px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
position: relative;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow-sm;
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
|
||||
.date {
|
||||
left: calc(100% + 48px);
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: 50%;
|
||||
|
||||
.icon {
|
||||
left: -30px;
|
||||
}
|
||||
|
||||
.date {
|
||||
right: calc(100% + 48px);
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 28px;
|
||||
border-color: transparent transparent transparent $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.timeline {
|
||||
&::after {
|
||||
left: 112px;
|
||||
bottom: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
width: 100%;
|
||||
padding-left: 165px;
|
||||
padding-right: 0px;
|
||||
|
||||
&.right, &.left {
|
||||
left: 0%;
|
||||
|
||||
.icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
top: 37.5px;
|
||||
font-size: 18px;
|
||||
left: 90px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 110px;
|
||||
border-color: transparent transparent transparent $border-color;
|
||||
}
|
||||
|
||||
.date {
|
||||
right: auto;
|
||||
left: 0px;
|
||||
width: 79px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-2 {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 83%;
|
||||
top: 50px;
|
||||
left: 40px;
|
||||
margin-left: -1px;
|
||||
background: $timeline-color;
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
z-index: 1;
|
||||
|
||||
p {
|
||||
display: inline-flex;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0;
|
||||
padding: 23px 10px;
|
||||
background: $timeline-color;
|
||||
border-radius: 50px;
|
||||
text-transform: uppercase;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
span {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-medium;
|
||||
margin: 24px 0 0 0;
|
||||
margin-left: 55px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
top: 26px;
|
||||
left: 45px;
|
||||
align-items: left;
|
||||
background: $success;
|
||||
border: 3px solid $timeline-color;
|
||||
border-radius: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 23px 62px;
|
||||
padding: 20px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 6px;
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
max-width: 695px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
top: 26px;
|
||||
right: 100%;
|
||||
border-color: transparent var(--#{$prefix}card-bg-custom) transparent transparent;
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
right: 100%;
|
||||
top: 24px;
|
||||
border-color: transparent $border-color transparent transparent;
|
||||
border-width: 12px;
|
||||
}
|
||||
|
||||
.timeline-text {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-launch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 6px;
|
||||
background: $white;
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
|
||||
.timeline-box {
|
||||
margin-left: 0;
|
||||
|
||||
&::after {
|
||||
left: 30px;
|
||||
margin-left: 0px;
|
||||
top: -20px;
|
||||
border-color: transparent transparent $border-color transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 30px;
|
||||
margin-left: 0px;
|
||||
top: -19px;
|
||||
border-color: transparent transparent var(--#{$prefix}card-bg-custom) transparent;
|
||||
border-width: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal Timeline
|
||||
.horizontal-timeline {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 174px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background-color: $timeline-color;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
.item-box {
|
||||
margin: 227px 0px 0px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: 0px auto;
|
||||
background: $primary;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
top: -59px;
|
||||
border-radius: 50px;
|
||||
border: 3px solid $timeline-color;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
min-height: 110px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-color: $timeline-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
left: 0px;
|
||||
top: -23px;
|
||||
border-color: transparent transparent $timeline-color transparent;
|
||||
border-width: 12px;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
top: -86px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-top: 5px;
|
||||
transform: rotate(-180deg);
|
||||
|
||||
.timeline-content {
|
||||
transform: rotate(180deg);
|
||||
|
||||
&::before {
|
||||
bottom: -23px;
|
||||
top: auto;
|
||||
border-color: $timeline-color transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: lighten($primary, 2.5%);
|
||||
|
||||
&::after {
|
||||
font-size: 24px;
|
||||
color: $white;
|
||||
}
|
||||
&.swiper-button-disabled {
|
||||
background-color: rgba($primary, 0.5);
|
||||
opacity: 1;
|
||||
cursor: auto;
|
||||
backdrop-filter: blur(25px);
|
||||
pointer-events: none
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 0;
|
||||
|
||||
&::after {
|
||||
content: "\EA6E";
|
||||
font-family: remixicon;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 0;
|
||||
|
||||
&::after {
|
||||
content: "\EA64";
|
||||
font-family: remixicon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//activity-timeline
|
||||
|
||||
.acitivity-timeline {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.acitivity-item {
|
||||
position: relative;
|
||||
|
||||
.flex-shrink-0 {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.acitivity-avatar {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
border: 3px solid var(--#{$prefix}card-bg-custom);
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 1px dashed $border-color;
|
||||
left: 16px;
|
||||
height: 100%;
|
||||
top: 5px;
|
||||
z-index: 0;
|
||||
}
|
||||
&:last-child {
|
||||
&::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
resources/scss/pages/_to-do.scss
vendored
Executable file
66
resources/scss/pages/_to-do.scss
vendored
Executable file
@@ -0,0 +1,66 @@
|
||||
//
|
||||
// _to-do.scss
|
||||
//
|
||||
|
||||
.to-do-menu {
|
||||
li {
|
||||
.nav-link {
|
||||
color: var(--#{$prefix}body-color);
|
||||
padding-left: 0;
|
||||
font-weight: $font-weight-medium;
|
||||
background-color: var(--#{$prefix}light);
|
||||
padding: 10px 12px;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
&:hover, &.active {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.todo-content {
|
||||
height: calc(100vh - 362px);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.todo-task {
|
||||
table{
|
||||
.form-check{
|
||||
.form-check-input {
|
||||
&:checked+.form-check-label {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-handle{
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#task-error-msg{
|
||||
display: none;
|
||||
}
|
||||
190
resources/scss/plugins/_apexcharts.scss
vendored
Executable file
190
resources/scss/plugins/_apexcharts.scss
vendored
Executable file
@@ -0,0 +1,190 @@
|
||||
//
|
||||
// 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 {
|
||||
font-family: $font-family-base !important;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip{
|
||||
border: 1px solid $border-color !important;
|
||||
background-color: var(--#{$prefix}card-bg-custom) !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 $border-color !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-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}card-bg-custom);
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
#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: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-pie{
|
||||
circle ,line{
|
||||
stroke: $border-color;
|
||||
}
|
||||
text{
|
||||
fill: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
|
||||
.apex-charts {
|
||||
|
||||
.apexcharts-xaxis,
|
||||
.apexcharts-yaxis {
|
||||
line {
|
||||
stroke: var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxis-tick {
|
||||
stroke: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.apexcharts-pie-series,
|
||||
.apexcharts-bar-series {
|
||||
path {
|
||||
stroke: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-radialbar-track {
|
||||
path {
|
||||
stroke: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-marker {
|
||||
stroke: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
|
||||
.apexcharts-boxPlot-series {
|
||||
path {
|
||||
stroke: var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-treemap,
|
||||
.apexcharts-heatmap-series {
|
||||
rect {
|
||||
stroke: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
}
|
||||
}
|
||||
80
resources/scss/plugins/_autocomplete.scss
vendored
Executable file
80
resources/scss/plugins/_autocomplete.scss
vendored
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
9
resources/scss/plugins/_chartjs.scss
vendored
Executable file
9
resources/scss/plugins/_chartjs.scss
vendored
Executable file
@@ -0,0 +1,9 @@
|
||||
|
||||
//
|
||||
// _chartjs.scss
|
||||
//
|
||||
|
||||
.chartjs-chart{
|
||||
max-height: 320px;
|
||||
}
|
||||
|
||||
406
resources/scss/plugins/_choices.scss
vendored
Executable file
406
resources/scss/plugins/_choices.scss
vendored
Executable file
@@ -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: 37.5px;
|
||||
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: $primary;
|
||||
border: 1px solid $primary;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
color: $white;
|
||||
box-shadow: $element-shadow;
|
||||
&[data-deletable] {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
&.is-highlighted {
|
||||
background-color: $primary;
|
||||
border: 1px solid $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: var(--#{$prefix}choices-bg);
|
||||
border: 1px solid var(--#{$prefix}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: var(--#{$prefix}choices-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 $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-layout-mode="dark"]{
|
||||
.choices[data-type*=select-one]{
|
||||
.choices__button{
|
||||
filter: $btn-close-white-filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
200
resources/scss/plugins/_ckeditor.scss
vendored
Executable file
200
resources/scss/plugins/_ckeditor.scss
vendored
Executable file
@@ -0,0 +1,200 @@
|
||||
//
|
||||
// _ckeditor.scss
|
||||
//
|
||||
|
||||
.ck {
|
||||
font-family: $font-family-base !important;
|
||||
|
||||
&.ck-reset_all, &.ck-reset_all *{
|
||||
color: var(--#{$prefix}body-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}card-bg-custom) !important;
|
||||
border-color: $input-border-color !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&.ck-dropdown__panel{
|
||||
background: var(--#{$prefix}choices-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}choices-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;
|
||||
}
|
||||
}
|
||||
74
resources/scss/plugins/_colorpicker.scss
vendored
Executable file
74
resources/scss/plugins/_colorpicker.scss
vendored
Executable file
@@ -0,0 +1,74 @@
|
||||
//
|
||||
// _colorpicker.scss
|
||||
//
|
||||
|
||||
.pcr-app{
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
box-shadow: $box-shadow-lg;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.pickr{
|
||||
.pcr-button{
|
||||
border: 4px solid var(--#{$prefix}card-bg-custom);
|
||||
box-shadow: 0px 0px 0 2px $border-color;
|
||||
border-radius: 50%;
|
||||
box-shadow: $element-shadow;
|
||||
&::after, &::before{
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
227
resources/scss/plugins/_custom-scrollbar.scss
vendored
Executable file
227
resources/scss/plugins/_custom-scrollbar.scss
vendored
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
188
resources/scss/plugins/_datatables.scss
vendored
Executable file
188
resources/scss/plugins/_datatables.scss
vendored
Executable file
@@ -0,0 +1,188 @@
|
||||
//
|
||||
// _datatables.scss
|
||||
//
|
||||
|
||||
table.dataTable td.dataTables_empty,
|
||||
table.dataTable th.dataTables_empty {
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
font-weight: $font-weight-semibold;
|
||||
--vz-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: $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: $border-color;
|
||||
background: var(--#{$prefix}light);
|
||||
color: var(--#{$prefix}gray-800);
|
||||
}
|
||||
}
|
||||
17
resources/scss/plugins/_dropzone.scss
vendored
Executable file
17
resources/scss/plugins/_dropzone.scss
vendored
Executable file
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
11
resources/scss/plugins/_echarts.scss
vendored
Executable file
11
resources/scss/plugins/_echarts.scss
vendored
Executable file
@@ -0,0 +1,11 @@
|
||||
//
|
||||
// echarts.scss
|
||||
//
|
||||
|
||||
.e-charts{
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.e-charts-height{
|
||||
height: 300px;
|
||||
}
|
||||
64
resources/scss/plugins/_emoji-picker.scss
vendored
Executable file
64
resources/scss/plugins/_emoji-picker.scss
vendored
Executable file
@@ -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;
|
||||
}
|
||||
33
resources/scss/plugins/_filepond.scss
vendored
Executable file
33
resources/scss/plugins/_filepond.scss
vendored
Executable file
@@ -0,0 +1,33 @@
|
||||
//
|
||||
// filepond
|
||||
//
|
||||
|
||||
.filepond--root{
|
||||
margin-bottom: 0;
|
||||
|
||||
&[data-style-panel-layout~=circle]{
|
||||
.filepond--drop-label label{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filepond--panel-root{
|
||||
border: 2px dashed var(--#{$prefix}border-color);
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
|
||||
.filepond--drop-label {
|
||||
color: var(--#{$prefix}body-color);
|
||||
label{
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.filepond--credits {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filepond--item-panel {
|
||||
background-color: $primary !important;
|
||||
}
|
||||
67
resources/scss/plugins/_flag-input.scss
vendored
Executable file
67
resources/scss/plugins/_flag-input.scss
vendored
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
848
resources/scss/plugins/_flatpicker.scss
vendored
Executable file
848
resources/scss/plugins/_flatpicker.scss
vendored
Executable file
@@ -0,0 +1,848 @@
|
||||
//
|
||||
// _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: var(--#{$prefix}choices-bg);
|
||||
box-shadow: 1px 0 0 $border-color, -1px 0 0 $border-color, 0 1px 0 $border-color, 0 -1px 0 $border-color, 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 $border-color;
|
||||
}
|
||||
|
||||
&.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: $primary;
|
||||
}
|
||||
&.arrowTop::after {
|
||||
border-bottom-color: $primary;
|
||||
}
|
||||
|
||||
&.arrowBottom::before,
|
||||
&.arrowBottom::after {
|
||||
top: 100%;
|
||||
}
|
||||
&.arrowBottom::before {
|
||||
border-top-color: $primary;
|
||||
}
|
||||
&.arrowBottom::after {
|
||||
border-top-color: $primary;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flatpickr-months {
|
||||
display: flex;
|
||||
background-color: $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: 0;
|
||||
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: 7.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: $primary;
|
||||
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: $primary;
|
||||
color: $white;
|
||||
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}body-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: var(--#{$prefix}light);
|
||||
border-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
&.today {
|
||||
border-color: $primary;
|
||||
background-color: rgba($primary, 0.1);
|
||||
box-shadow: $element-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $primary;
|
||||
background-color: rgba($primary, 0.15);
|
||||
color: var(--#{$prefix}dark);
|
||||
}
|
||||
}
|
||||
|
||||
&.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: $primary;
|
||||
box-shadow: $element-shadow;
|
||||
color: $white;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.startRange,
|
||||
&.endRange{
|
||||
&.startRange {
|
||||
border-radius: 50px 0 0 50px;
|
||||
+ .endRange:not(:nth-child(7n+1)) {
|
||||
box-shadow: -10px 0 0 $primary;
|
||||
}
|
||||
|
||||
.endRange{
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.startRange,
|
||||
&.endRange{
|
||||
&.endRange {
|
||||
border-radius: 0 50px 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.inRange {
|
||||
border-radius: 0;
|
||||
box-shadow: -5px 0 0 var(--#{$prefix}light), 5px 0 0 var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
&.flatpickr-disabled,
|
||||
&.flatpickr-disabled:hover,
|
||||
&.prevMonthDay,
|
||||
&.nextMonthDay,
|
||||
&.notAllowed,
|
||||
&.notAllowed.prevMonthDay,
|
||||
&.notAllowed.nextMonthDay {
|
||||
color: rgba(var(--#{$prefix}body-color-rgb),0.3);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.flatpickr-disabled,
|
||||
&.flatpickr-disabled:hover {
|
||||
cursor: not-allowed;
|
||||
color: rgba(var(--#{$prefix}body-color-rgb),0.3);
|
||||
}
|
||||
|
||||
&.week.selected {
|
||||
border-radius: 0;
|
||||
box-shadow: -5px 0 0 $primary, 5px 0 0 $primary;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.rangeMode .flatpickr-day {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.flatpickr-weekwrapper {
|
||||
float: left;
|
||||
.flatpickr-weeks {
|
||||
padding: 0 12px;
|
||||
box-shadow: 1px 0 0 #e6e6e6;
|
||||
}
|
||||
|
||||
.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}dark-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: 40px;
|
||||
max-height: 40px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.numInputWrapper {
|
||||
flex: 1;
|
||||
width: 40%;
|
||||
height: 40px;
|
||||
float: left;
|
||||
span{
|
||||
&.arrowUp, &.arrowDown{
|
||||
&:after {
|
||||
border-bottom-color: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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}body-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}body-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($primary, 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;
|
||||
}
|
||||
88
resources/scss/plugins/_form-input-spin.scss
vendored
Executable file
88
resources/scss/plugins/_form-input-spin.scss
vendored
Executable file
@@ -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}body-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
400
resources/scss/plugins/_fullcalendar.scss
vendored
Executable file
400
resources/scss/plugins/_fullcalendar.scss
vendored
Executable file
@@ -0,0 +1,400 @@
|
||||
//
|
||||
// _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-daygrid-day {
|
||||
&.fc-day-today {
|
||||
background-color: rgba($primary, 0.1);
|
||||
|
||||
.fc-daygrid-day-number {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-day {
|
||||
&.fc-day-today {
|
||||
background-color: rgba($primary, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timegrid-col {
|
||||
&.fc-day-today {
|
||||
background-color: rgba($primary, 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: $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: $primary;
|
||||
}
|
||||
|
||||
.fc-daygrid-dot-event.fc-event-mirror,
|
||||
.fc-daygrid-dot-event:hover {
|
||||
background-color: $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: $border-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-list-table {
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.fc-daygrid-event-harness {
|
||||
.fc-daygrid-event {
|
||||
&.bg-soft-#{$color} {
|
||||
|
||||
.fc-event-title,
|
||||
.fc-event-main {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timegrid-event-harness {
|
||||
.fc-timegrid-event {
|
||||
&.bg-soft-#{$color} {
|
||||
.fc-event-title {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-list-table {
|
||||
.fc-list-event {
|
||||
&.bg-soft-#{$color} {
|
||||
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-soft-dark{
|
||||
.fc-event-main, .fc-event-title {
|
||||
color: var(--#{$prefix}dark) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-direction-ltr{
|
||||
direction: ltr;
|
||||
.fc-toolbar>*>:not(:first-child){
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
42
resources/scss/plugins/_google-map.scss
vendored
Executable file
42
resources/scss/plugins/_google-map.scss
vendored
Executable file
@@ -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: $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 $primary;
|
||||
}
|
||||
&.below {
|
||||
top: -15px;
|
||||
border-left: 16px solid transparent;
|
||||
border-right: 16px solid transparent;
|
||||
border-bottom: 16px solid $primary;
|
||||
}
|
||||
|
||||
}
|
||||
271
resources/scss/plugins/_gridjs.scss
vendored
Executable file
271
resources/scss/plugins/_gridjs.scss
vendored
Executable file
@@ -0,0 +1,271 @@
|
||||
//
|
||||
// _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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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-layout-mode="dark"]{
|
||||
button{
|
||||
&.gridjs-sort-neutral, &.gridjs-sort-asc, &.gridjs-sort-desc{
|
||||
filter: $btn-close-white-filter;
|
||||
}
|
||||
}
|
||||
}
|
||||
11
resources/scss/plugins/_leaflet-maps.scss
vendored
Executable file
11
resources/scss/plugins/_leaflet-maps.scss
vendored
Executable file
@@ -0,0 +1,11 @@
|
||||
//
|
||||
// _leaflet-maps.scss
|
||||
//
|
||||
|
||||
.leaflet-map {
|
||||
height: 300px;
|
||||
&.leaflet-container{
|
||||
z-index: 0;
|
||||
font-family: $font-family-primary;
|
||||
}
|
||||
}
|
||||
59
resources/scss/plugins/_listjs.scss
vendored
Executable file
59
resources/scss/plugins/_listjs.scss
vendored
Executable file
@@ -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: $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
98
resources/scss/plugins/_multijs.scss
vendored
Executable file
98
resources/scss/plugins/_multijs.scss
vendored
Executable file
@@ -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}light);
|
||||
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($primary, 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}gray-600);
|
||||
}
|
||||
}
|
||||
232
resources/scss/plugins/_prismjs.scss
vendored
Executable file
232
resources/scss/plugins/_prismjs.scss
vendored
Executable file
@@ -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}light) !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: #dd4a68;
|
||||
}
|
||||
|
||||
.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 {
|
||||
&::-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($primary, 0.35) !important;
|
||||
background-color: transparent;
|
||||
color: $primary !important;
|
||||
box-shadow: none !important;
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $primary !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
97
resources/scss/plugins/_quilljs.scss
vendored
Executable file
97
resources/scss/plugins/_quilljs.scss
vendored
Executable file
@@ -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: $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;
|
||||
}
|
||||
}
|
||||
282
resources/scss/plugins/_range-slider.scss
vendored
Executable file
282
resources/scss/plugins/_range-slider.scss
vendored
Executable file
@@ -0,0 +1,282 @@
|
||||
|
||||
//
|
||||
// _range-slider.scss
|
||||
//
|
||||
|
||||
.noUi-connect{
|
||||
background: $success;
|
||||
}
|
||||
|
||||
.noUi-handle{
|
||||
background: $success;
|
||||
border: 2px solid var(--#{$prefix}card-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: $border-color;
|
||||
border-radius: $tooltip-border-radius;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
color: var(--#{$prefix}body-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 $border-color;
|
||||
}
|
||||
|
||||
#result {
|
||||
margin: 60px 26px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 1px solid $border-color;
|
||||
box-shadow: 0 0 3px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
#red {
|
||||
.noUi-connect {
|
||||
background: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
#green {
|
||||
.noUi-connect {
|
||||
background: $success;
|
||||
}
|
||||
}
|
||||
|
||||
#blue {
|
||||
.noUi-connect {
|
||||
background: $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: $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;
|
||||
}
|
||||
}
|
||||
|
||||
152
resources/scss/plugins/_select2.scss
vendored
Executable file
152
resources/scss/plugins/_select2.scss
vendored
Executable file
@@ -0,0 +1,152 @@
|
||||
//
|
||||
// Select 2
|
||||
//
|
||||
|
||||
.select2.select2-container{
|
||||
width: 100% !important;
|
||||
}
|
||||
.select2-container {
|
||||
.select2-selection--single {
|
||||
border: $input-border-width solid $input-border-color;
|
||||
height: $input-height;
|
||||
background-color: $input-bg;
|
||||
outline: none;
|
||||
.select2-selection__rendered {
|
||||
line-height: 36px;
|
||||
padding-left: 12px;
|
||||
color: $input-color;
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
/*rtl:ignore*/
|
||||
right: 3px;
|
||||
b {
|
||||
border-color: $input-border-color transparent transparent transparent;
|
||||
border-width: 6px 6px 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--open {
|
||||
.select2-selection--single {
|
||||
.select2-selection__arrow {
|
||||
b {
|
||||
border-color: transparent transparent $input-border-color transparent !important;
|
||||
border-width: 0 6px 6px 6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
box-shadow: $box-shadow;
|
||||
background-color: var(--#{$prefix}choices-bg);
|
||||
z-index: $zindex-modal + 1;
|
||||
}
|
||||
|
||||
.select2-container--default {
|
||||
.select2-results__option--selected {
|
||||
background-color: $input-disabled-bg;
|
||||
}
|
||||
.select2-search--dropdown {
|
||||
padding: 10px;
|
||||
background-color: var(--#{$prefix}choices-bg);
|
||||
.select2-search__field {
|
||||
outline: none;
|
||||
border: 1px solid $input-border-color;
|
||||
background-color: $input-bg;
|
||||
color: $input-color;
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
}
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: $primary;
|
||||
}
|
||||
.select2-results__option[aria-selected=true] {
|
||||
background-color: var(--#{$prefix}choices-bg);
|
||||
color: var(--#{$prefix}choices-link-active-color);
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.select2-selection--multiple {
|
||||
.select2-selection__choice__display {
|
||||
padding-left: 36px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
.select2-selection--single {
|
||||
.select2-selection__arrow {
|
||||
/*rtl:ignore*/
|
||||
right: 1px;
|
||||
/*rtl:ignore*/
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
.select2-selection--multiple {
|
||||
min-height: $input-height;
|
||||
border: $input-border-width solid $input-border-color !important;
|
||||
background-color: $input-bg;
|
||||
|
||||
.select2-selection__rendered {
|
||||
padding: 1px 4px;
|
||||
}
|
||||
.select2-search__field {
|
||||
border: 0;
|
||||
color: $input-color;
|
||||
}
|
||||
.select2-selection__choice {
|
||||
background-color: $primary;
|
||||
border: none;
|
||||
color: $white;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.select2-selection__choice__remove {
|
||||
color: $white;
|
||||
margin-right: 7px;
|
||||
border-color: tint-color($primary, 10%);
|
||||
padding: 0 8px;
|
||||
top: 3px;
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select2-search--inline {
|
||||
.select2-search__field {
|
||||
margin-top: 7px;
|
||||
font-family: $font-family-base;
|
||||
}
|
||||
}
|
||||
.select2-search {
|
||||
textarea {
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default{
|
||||
&.select2-container--disabled {
|
||||
.select2-selection--single, .select2-selection--multiple {
|
||||
background-color: $input-disabled-bg;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
resources/scss/plugins/_sortablejs.scss
vendored
Executable file
33
resources/scss/plugins/_sortablejs.scss
vendored
Executable file
@@ -0,0 +1,33 @@
|
||||
//
|
||||
// _sortablejs.scss
|
||||
//
|
||||
|
||||
|
||||
.nested-list{
|
||||
.list-group-item{
|
||||
background-color: rgba($primary, 0.05);
|
||||
border-color: rgba($primary, 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;
|
||||
}
|
||||
}
|
||||
131
resources/scss/plugins/_sweetalert2.scss
vendored
Executable file
131
resources/scss/plugins/_sweetalert2.scss
vendored
Executable file
@@ -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}card-bg-custom);
|
||||
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: $primary transparent $primary transparent;
|
||||
}
|
||||
|
||||
.swal2-timer-progress-bar{
|
||||
background-color: rgba($success, 0.4);
|
||||
}
|
||||
|
||||
.swal2-progress-steps {
|
||||
.swal2-progress-step{
|
||||
background: $primary;
|
||||
&.swal2-active-progress-step{
|
||||
background: $primary;
|
||||
&~.swal2-progress-step, &~.swal2-progress-step-line{
|
||||
background: rgba($primary, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.swal2-progress-step-line{
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-actions.swal2-loading{
|
||||
.swal2-styled.swal2-confirm{
|
||||
border-left-color: $primary !important;
|
||||
border-right-color: $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: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-validation-message{
|
||||
background-color: transparent;
|
||||
}
|
||||
118
resources/scss/plugins/_swiper.scss
vendored
Executable file
118
resources/scss/plugins/_swiper.scss
vendored
Executable file
@@ -0,0 +1,118 @@
|
||||
//
|
||||
// _swiper.scss
|
||||
//
|
||||
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
background-color: rgba($primary, 0.2);
|
||||
backdrop-filter: blur(2px);
|
||||
border-radius: 8px;
|
||||
&::after {
|
||||
font-family: remixicon;
|
||||
font-size: 28px;
|
||||
color: rgba($primary, 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);
|
||||
}
|
||||
}
|
||||
85
resources/scss/plugins/_toastify.scss
vendored
Executable file
85
resources/scss/plugins/_toastify.scss
vendored
Executable file
@@ -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;
|
||||
}
|
||||
}
|
||||
79
resources/scss/plugins/_tour.scss
vendored
Executable file
79
resources/scss/plugins/_tour.scss
vendored
Executable file
@@ -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: $primary;
|
||||
}
|
||||
|
||||
.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{
|
||||
top: -18px;
|
||||
}
|
||||
|
||||
.shepherd-button{
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
23
resources/scss/plugins/_vector-maps.scss
vendored
Executable file
23
resources/scss/plugins/_vector-maps.scss
vendored
Executable file
@@ -0,0 +1,23 @@
|
||||
//
|
||||
// vector-maps.scss
|
||||
//
|
||||
|
||||
.jvm-tooltip {
|
||||
border-radius: 3px;
|
||||
background-color: $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: $primary;
|
||||
}
|
||||
5260
resources/scss/plugins/icons/_boxicons.scss
vendored
Executable file
5260
resources/scss/plugins/icons/_boxicons.scss
vendored
Executable file
File diff suppressed because it is too large
Load Diff
6582
resources/scss/plugins/icons/_line-awesome.scss
vendored
Executable file
6582
resources/scss/plugins/icons/_line-awesome.scss
vendored
Executable file
File diff suppressed because it is too large
Load Diff
26654
resources/scss/plugins/icons/_materialdesignicons.scss
vendored
Executable file
26654
resources/scss/plugins/icons/_materialdesignicons.scss
vendored
Executable file
File diff suppressed because it is too large
Load Diff
2333
resources/scss/plugins/icons/_remixicon.scss
vendored
Executable file
2333
resources/scss/plugins/icons/_remixicon.scss
vendored
Executable file
File diff suppressed because it is too large
Load Diff
66
resources/scss/structure/_footer.scss
vendored
Executable file
66
resources/scss/structure/_footer.scss
vendored
Executable file
@@ -0,0 +1,66 @@
|
||||
//
|
||||
// _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;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"] {
|
||||
|
||||
&[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});
|
||||
}
|
||||
}
|
||||
}
|
||||
0
resources/scss/structure/_general.scss
vendored
Executable file
0
resources/scss/structure/_general.scss
vendored
Executable file
302
resources/scss/structure/_horizontal.scss
vendored
Executable file
302
resources/scss/structure/_horizontal.scss
vendored
Executable file
@@ -0,0 +1,302 @@
|
||||
//
|
||||
// _horizontal.scss
|
||||
//
|
||||
|
||||
[data-layout="horizontal"] {
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024.1px) {
|
||||
|
||||
.layout-width,
|
||||
.container-fluid {
|
||||
max-width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.topnav-hamburger {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-logo {
|
||||
padding-left: calc(#{$grid-gutter-width} / 2);
|
||||
|
||||
@media (max-width: 1024.98px) {
|
||||
padding-left: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
background: $topnav-bg;
|
||||
border-right-color: transparent;
|
||||
padding: 0 calc(#{$grid-gutter-width} / 2);
|
||||
box-shadow: $horizontal-menu-box-shadow;
|
||||
margin-top: $header-height;
|
||||
position: fixed;
|
||||
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;
|
||||
}
|
||||
.icon-dual {
|
||||
color: $topnav-item-color-active;
|
||||
fill: rgba($primary, 0.10);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-bs-toggle=collapse][aria-expanded=true] {
|
||||
color: $topnav-item-color-active;
|
||||
|
||||
.icon-dual {
|
||||
color: $topnav-item-color-active;
|
||||
fill: rgba($primary, 0.10);
|
||||
}
|
||||
|
||||
&:after {
|
||||
color: $topnav-item-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon-dual {
|
||||
color: $topnav-item-color-active;
|
||||
fill: rgba($primary, 0.10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.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;
|
||||
|
||||
.icon-dual {
|
||||
color: $topnav-item-color-active;
|
||||
fill: rgba($primary, 0.10);
|
||||
}
|
||||
|
||||
&: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: var(--#{$prefix}choices-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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// theme dark
|
||||
[data-layout-mode="dark"] {
|
||||
&[data-topbar="light"] {
|
||||
.navbar-header {
|
||||
.horizontal-logo {
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
164
resources/scss/structure/_layouts.scss
vendored
Executable file
164
resources/scss/structure/_layouts.scss
vendored
Executable file
@@ -0,0 +1,164 @@
|
||||
//
|
||||
// _layouts.scss
|
||||
//
|
||||
|
||||
[data-layout-width="boxed"] {
|
||||
body {
|
||||
background-color: $boxed-body-bg;
|
||||
}
|
||||
|
||||
#layout-wrapper {
|
||||
max-width: $boxed-layout-width;
|
||||
margin: 0 auto;
|
||||
box-shadow: $box-shadow;
|
||||
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;
|
||||
}
|
||||
|
||||
&[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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[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;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.layout-width {
|
||||
max-width: 1300px;
|
||||
}
|
||||
}
|
||||
|
||||
&[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} / 2) 0 0;
|
||||
}
|
||||
|
||||
&[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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
55
resources/scss/structure/_page-head.scss
vendored
Executable file
55
resources/scss/structure/_page-head.scss
vendored
Executable file
@@ -0,0 +1,55 @@
|
||||
//
|
||||
// _page-head.scss
|
||||
//
|
||||
|
||||
.page-title-box {
|
||||
padding: 10px $grid-gutter-width;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
box-shadow: $page-title-box-shadow;
|
||||
border-bottom: 1px solid $page-title-border;
|
||||
border-top: 1px solid $page-title-border;
|
||||
margin: -23px (-$grid-gutter-width * 1) $grid-gutter-width (-$grid-gutter-width * 1);
|
||||
|
||||
.breadcrumb {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 700;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
395
resources/scss/structure/_topbar.scss
vendored
Executable file
395
resources/scss/structure/_topbar.scss
vendored
Executable file
@@ -0,0 +1,395 @@
|
||||
//
|
||||
// _topbar.scss
|
||||
//
|
||||
|
||||
#page-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1002;
|
||||
background-color: $header-bg;
|
||||
transition: all 0.1s ease-out;
|
||||
|
||||
&.topbar-shadow {
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
@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 $grid-gutter-width 0 calc(#{$grid-gutter-width} / 2)
|
||||
/*rtl: 0 0 0 calc(#{$grid-gutter-width} / 2) */
|
||||
;
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
padding: 0 calc(#{$grid-gutter-width} / 2) 0 calc(#{$grid-gutter-width} / 2);
|
||||
}
|
||||
|
||||
.topbar-head-dropdown {
|
||||
.dropdown-menu.show {
|
||||
top: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-topbar {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
|
||||
@media (max-width: 360px) {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name-text {
|
||||
color: var(--#{$prefix}gray-700);
|
||||
}
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
.app-search {
|
||||
padding: calc(#{$header-height - 38px} / 2) 0;
|
||||
|
||||
.form-control {
|
||||
border: none;
|
||||
height: 38px;
|
||||
padding-left: 40px;
|
||||
padding-right: 30px;
|
||||
background-color: $topbar-search-bg;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
span.search-widget-icon {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
left: 13px;
|
||||
top: 0;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.search-widget-icon-close {
|
||||
right: 7px;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1023.99px) {
|
||||
padding-left: calc(#{$grid-gutter-width} / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.topbar-user {
|
||||
@media (min-width: 768px) {
|
||||
background-color: $topbar-user-bg;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
top: 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
padding: 0.75rem 1rem;
|
||||
white-space: inherit;
|
||||
position: relative;
|
||||
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown with Icons
|
||||
.dropdown-icon-item {
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
padding: 15px 0 9px;
|
||||
border: 1px solid transparent;
|
||||
color: var(--#{$prefix}dropdown-link-color);
|
||||
|
||||
img {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
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-layout-mode="dark"] {
|
||||
.light-dark-mode {
|
||||
.bx-moon::before {
|
||||
content: "\ec34";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-topbar="dark"] {
|
||||
#page-topbar {
|
||||
background-color: $header-bg-dark;
|
||||
border-color: $header-bg-dark;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
.btn-topbar {
|
||||
color: $header-item-color-dark;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba($white, 0.07);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-user {
|
||||
@media (min-width: 767.99px) {
|
||||
background-color: $topbar-user-bg-dark;
|
||||
}
|
||||
|
||||
.user-name-text {
|
||||
color: rgba($white, 0.85) !important;
|
||||
}
|
||||
|
||||
.user-name-sub-text {
|
||||
color: $header-item-color-dark !important;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.app-search {
|
||||
.form-control {
|
||||
background-color: rgba($white, 0.05);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
span.search-widget-icon,
|
||||
input.form-control::-webkit-input-placeholder {
|
||||
color: rgba($white, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-icon {
|
||||
span {
|
||||
background-color: $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.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"] {
|
||||
.horizontal-logo {
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"] {
|
||||
#page-topbar {
|
||||
left: 0;
|
||||
border-bottom: 1px solid var(--#{$prefix}gray-300);
|
||||
|
||||
@media (min-width: 1024.1px) {
|
||||
&.topbar-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
@media (min-width: 1024.1px) {
|
||||
margin-top: $header-height;
|
||||
}
|
||||
|
||||
padding: calc(45px + #{$grid-gutter-width}) calc(#{$grid-gutter-width} / 2) $footer-height calc(#{$grid-gutter-width} / 2);
|
||||
}
|
||||
|
||||
&[data-layout-width="boxed"] {
|
||||
.page-content {
|
||||
@media (min-width: 1024.1px) {
|
||||
min-height: calc(100vh - #{$footer-height + $header-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"] {
|
||||
|
||||
&[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;
|
||||
}
|
||||
}
|
||||
378
resources/scss/structure/_two-column.scss
vendored
Executable file
378
resources/scss/structure/_two-column.scss
vendored
Executable file
@@ -0,0 +1,378 @@
|
||||
//
|
||||
// _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-color: $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: 22px;
|
||||
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: rgba($primary, 0.15);
|
||||
color: $primary;
|
||||
|
||||
.icon-dual {
|
||||
color: $primary;
|
||||
fill: rgba($primary, 0.10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.logo {
|
||||
|
||||
span.logo-lg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span.logo-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar="light"] {
|
||||
.app-menu {
|
||||
.navbar-brand-box {
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar="dark"] {
|
||||
.twocolumn-iconview {
|
||||
background-color: $twocolumn-menu-iconview-bg-dark;
|
||||
|
||||
.nav-icon {
|
||||
color: $twocolumn-menu-item-color-dark;
|
||||
|
||||
&.active {
|
||||
color: $twocolumn-menu-item-active-color-dark;
|
||||
background-color: $twocolumn-menu-item-active-bg-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-menu {
|
||||
background-color: $twocolumn-menu-bg-dark;
|
||||
border-right-color: $twocolumn-menu-border-dark;
|
||||
|
||||
.navbar-brand-box {
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-sm {
|
||||
.nav-link {
|
||||
color: $twocolumn-menu-item-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
.navbar-nav {
|
||||
.nav-sm {
|
||||
.nav-link {
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $twocolumn-menu-item-active-color-dark;
|
||||
|
||||
&::before {
|
||||
background-color: $twocolumn-menu-item-active-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
&[data-bs-toggle=collapse][aria-expanded=true] {
|
||||
color: $twocolumn-menu-item-active-color-dark;
|
||||
|
||||
&:before {
|
||||
background-color: $twocolumn-menu-item-active-color-dark;
|
||||
}
|
||||
|
||||
&::after {
|
||||
color: $twocolumn-menu-item-active-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-sidebar="gradient"], &[data-sidebar="gradient-2"], &[data-sidebar="gradient-3"], &[data-sidebar="gradient-4"] {
|
||||
.twocolumn-iconview {
|
||||
background-color: $twocolumn-menu-iconview-bg-dark;
|
||||
|
||||
.nav-icon {
|
||||
color: $twocolumn-menu-item-color-gradient;
|
||||
|
||||
&.active {
|
||||
color: $twocolumn-menu-item-active-color-dark;
|
||||
background-color: $twocolumn-menu-item-active-bg-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-menu {
|
||||
background-color: $twocolumn-menu-bg-dark;
|
||||
border-right-color: $twocolumn-menu-border-dark;
|
||||
|
||||
.navbar-brand-box {
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-sm {
|
||||
.nav-link {
|
||||
color: $twocolumn-menu-item-color-gradient;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
.navbar-nav {
|
||||
.nav-sm {
|
||||
.nav-link {
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $twocolumn-menu-item-active-color-dark;
|
||||
|
||||
&::before {
|
||||
background-color: $twocolumn-menu-item-active-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
&[data-bs-toggle=collapse][aria-expanded=true] {
|
||||
color: $twocolumn-menu-item-active-color-dark;
|
||||
|
||||
&:before {
|
||||
background-color: $twocolumn-menu-item-active-color-dark;
|
||||
}
|
||||
|
||||
&::after {
|
||||
color: $twocolumn-menu-item-active-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout-mode="dark"] {
|
||||
.app-menu {
|
||||
border-right-color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user