Add live chat UI.
This commit is contained in:
Haiping Chen
parent
2dc6376a89
commit
d2cb9a5ebd
13
src/web-live-chat/.eslintignore
Normal file
13
src/web-live-chat/.eslintignore
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
14
src/web-live-chat/.eslintrc.cjs
Normal file
14
src/web-live-chat/.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020,
|
||||
extraFileExtensions: ['.svelte']
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
}
|
||||
};
|
||||
10
src/web-live-chat/.gitignore
vendored
Normal file
10
src/web-live-chat/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
1
src/web-live-chat/.npmrc
Normal file
1
src/web-live-chat/.npmrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
engine-strict=true
|
||||
13
src/web-live-chat/.prettierignore
Normal file
13
src/web-live-chat/.prettierignore
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
8
src/web-live-chat/.prettierrc
Normal file
8
src/web-live-chat/.prettierrc
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
38
src/web-live-chat/README.md
Normal file
38
src/web-live-chat/README.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
# create-svelte
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
|
||||
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm create svelte@latest
|
||||
|
||||
# create a new project in my-app
|
||||
npm create svelte@latest my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
18
src/web-live-chat/jsconfig.json
Normal file
18
src/web-live-chat/jsconfig.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
3100
src/web-live-chat/package-lock.json
generated
Normal file
3100
src/web-live-chat/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
38
src/web-live-chat/package.json
Normal file
38
src/web-live-chat/package.json
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"name": "web-live-chat",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
|
||||
"lint": "prettier --check . && eslint .",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/kit": "^1.27.6",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-svelte": "^2.30.0",
|
||||
"prettier": "^3.0.0",
|
||||
"prettier-plugin-svelte": "^3.0.0",
|
||||
"sass": "^1.69.5",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.6.0",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^4.4.2"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@microsoft/signalr": "^8.0.0",
|
||||
"@sveltejs/adapter-static": "^2.0.3",
|
||||
"axios": "^1.6.2",
|
||||
"bootstrap": "^5.3.2",
|
||||
"overlayscrollbars": "^2.4.4",
|
||||
"svelte-link": "^1.4.0",
|
||||
"sveltestrap": "^5.11.2"
|
||||
}
|
||||
}
|
||||
12
src/web-live-chat/src/app.d.ts
vendored
Normal file
12
src/web-live-chat/src/app.d.ts
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
12
src/web-live-chat/src/app.html
Normal file
12
src/web-live-chat/src/app.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" style="overflow: hidden;">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
7
src/web-live-chat/src/lib/common/HeadTitle.svelte
Normal file
7
src/web-live-chat/src/lib/common/HeadTitle.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
export let title = 'Home';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{title} | Skote - Admin & Dashboard Template</title>
|
||||
</svelte:head>
|
||||
10
src/web-live-chat/src/lib/helpers/http.js
Normal file
10
src/web-live-chat/src/lib/helpers/http.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import axios from 'axios';
|
||||
|
||||
/**
|
||||
* Set axios http headers globally
|
||||
* @param {string} token
|
||||
*/
|
||||
export function setAuthorization(token) {
|
||||
let headers = axios.defaults.headers;
|
||||
headers.common['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
27
src/web-live-chat/src/lib/helpers/store.js
Normal file
27
src/web-live-chat/src/lib/helpers/store.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { writable } from 'svelte/store';
|
||||
|
||||
function isBrowser() {
|
||||
return typeof window !== 'undefined';
|
||||
}
|
||||
|
||||
const initValue = { init: true, loggedIn: false, token: '' };
|
||||
export const userStore = writable(initValue);
|
||||
|
||||
export function getUserStore () {
|
||||
if (isBrowser()) {
|
||||
// Access localStorage only if in the browser context
|
||||
let json = localStorage.getItem('user');
|
||||
return JSON.parse(json) || initValue;
|
||||
} else {
|
||||
// Return a default value for SSR
|
||||
return initValue;
|
||||
}
|
||||
};
|
||||
|
||||
userStore.subscribe(value => {
|
||||
if (isBrowser()) {
|
||||
if(!value.init) {
|
||||
localStorage.setItem('user', JSON.stringify(value));
|
||||
}
|
||||
}
|
||||
});
|
||||
41
src/web-live-chat/src/lib/helpers/typedefs.js
Normal file
41
src/web-live-chat/src/lib/helpers/typedefs.js
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
/**
|
||||
* @typedef {Object} UserModel
|
||||
* @property {string} id - The user id.
|
||||
* @property {string} first_name - The user first name.
|
||||
* @property {string} last_name - The user last name.
|
||||
* @property {string} full_name - The user full name.
|
||||
* @property {string} email - The user email.
|
||||
* @property {string} role - The user role.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} PluginDefModel
|
||||
* @property {string} id - The plugin full name.
|
||||
* @property {string} name - The plugin name.
|
||||
* @property {string} description - The plugin description.
|
||||
* @property {string} assembly - The plugin assembly.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} ConversationModel
|
||||
* @property {string} id - The conversation id.
|
||||
* @property {string} title - The conversation title.
|
||||
* @property {UserModel} user - The conversation initializer.
|
||||
* @property {string} agent_id - The conversation agent id.
|
||||
* @property {number} unread_msg_count - The unread message count.
|
||||
* @property {Date} updated_time - The conversation updated time.
|
||||
* @property {Date} created_time - The conversation created time.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} ChatResponseModel
|
||||
* @property {string} conversation_id - The conversation id.
|
||||
* @property {UserModel} sender - The message sender.
|
||||
* @property {string} message_id - The message id.
|
||||
* @property {string} text - The message content.
|
||||
* @property {Date} created_at - The message sent time.
|
||||
*/
|
||||
|
||||
// having to export an empty object here is annoying,
|
||||
// but required for vscode to pass on your types.
|
||||
export default {};
|
||||
1
src/web-live-chat/src/lib/index.js
Normal file
1
src/web-live-chat/src/lib/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
// place files you want to import through the `$lib` alias in this folder.
|
||||
111
src/web-live-chat/src/lib/scss/_variables-dark.scss
Normal file
111
src/web-live-chat/src/lib/scss/_variables-dark.scss
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
// Dark color mode variables
|
||||
//
|
||||
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
|
||||
|
||||
//
|
||||
// Global colors
|
||||
//
|
||||
|
||||
// scss-docs-start sass-dark-mode-vars
|
||||
// scss-docs-start theme-text-dark-variables
|
||||
$primary-text-emphasis-dark: tint-color($primary, 40%);
|
||||
$secondary-text-emphasis-dark: tint-color($secondary, 40%);
|
||||
$success-text-emphasis-dark: tint-color($success, 40%);
|
||||
$info-text-emphasis-dark: tint-color($info, 40%);
|
||||
$warning-text-emphasis-dark: tint-color($warning, 40%);
|
||||
$danger-text-emphasis-dark: tint-color($danger, 40%);
|
||||
$light-text-emphasis-dark: $gray-100;
|
||||
$dark-text-emphasis-dark: $gray-300;
|
||||
// scss-docs-end theme-text-dark-variables
|
||||
|
||||
// scss-docs-start theme-bg-subtle-dark-variables
|
||||
$primary-bg-subtle-dark: rgba($primary, 0.25);
|
||||
$secondary-bg-subtle-dark: rgba($secondary, 0.25);
|
||||
$success-bg-subtle-dark: rgba($success, 0.25);
|
||||
$info-bg-subtle-dark: rgba($info, 0.25);
|
||||
$warning-bg-subtle-dark: rgba($warning, 0.25);
|
||||
$danger-bg-subtle-dark: rgba($danger, 0.25);
|
||||
$light-bg-subtle-dark: $gray-800;
|
||||
$dark-bg-subtle-dark: rgba($dark, 0.25);
|
||||
// scss-docs-end theme-bg-subtle-dark-variables
|
||||
|
||||
// scss-docs-start theme-border-subtle-dark-variables
|
||||
$primary-border-subtle-dark: shade-color($primary, 40%);
|
||||
$secondary-border-subtle-dark: shade-color($secondary, 40%);
|
||||
$success-border-subtle-dark: shade-color($success, 40%);
|
||||
$info-border-subtle-dark: shade-color($info, 40%);
|
||||
$warning-border-subtle-dark: shade-color($warning, 40%);
|
||||
$danger-border-subtle-dark: shade-color($danger, 40%);
|
||||
$light-border-subtle-dark: $gray-700;
|
||||
$dark-border-subtle-dark: $gray-800;
|
||||
// scss-docs-end theme-border-subtle-dark-variables
|
||||
|
||||
$body-color-dark: #a6b0cf;
|
||||
$body-bg-dark: #222736;
|
||||
$body-secondary-color-dark: #c3cbe4;
|
||||
$body-secondary-bg-dark: #2a3042;
|
||||
$body-tertiary-color-dark: #f6f6f6;
|
||||
$body-tertiary-bg-dark: #32394e;
|
||||
$body-emphasis-color-dark: $white;
|
||||
$border-color-dark: #32394e;
|
||||
$border-color-translucent-dark: #353d55;
|
||||
$headings-color-dark: #f6f6f6;
|
||||
$link-color-dark: $primary;
|
||||
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage);
|
||||
$code-color-dark: $code-color;
|
||||
|
||||
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
$form-select-indicator-color-dark: $body-color-dark;
|
||||
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
|
||||
|
||||
$form-switch-color-dark: rgba($white, .25);
|
||||
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");
|
||||
|
||||
// scss-docs-start form-validation-colors-dark
|
||||
$form-valid-color-dark: $green-300;
|
||||
$form-valid-border-color-dark: $green-300;
|
||||
$form-invalid-color-dark: $red-300;
|
||||
$form-invalid-border-color-dark: $red-300;
|
||||
// scss-docs-end form-validation-colors-dark
|
||||
|
||||
|
||||
//
|
||||
// Accordion
|
||||
//
|
||||
|
||||
$accordion-icon-color-dark: $primary-text-emphasis-dark;
|
||||
$accordion-icon-active-color-dark: $primary-text-emphasis-dark;
|
||||
|
||||
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
|
||||
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
|
||||
// scss-docs-end sass-dark-mode-vars
|
||||
|
||||
/* =============================Custom Variables========================== */
|
||||
|
||||
$header-bg-dark: #262b3c;
|
||||
$header-item-color-dark: #a6b0cf;
|
||||
|
||||
//topbra dark
|
||||
$header-dark-bg-dark: $primary;
|
||||
$header-dark-item-color-dark: #e9ecef;
|
||||
$topbar-search-bg-dark: #2a3042;
|
||||
|
||||
// Footer
|
||||
$footer-bg-dark: #262b3c;
|
||||
$footer-color-dark: #a6b0cf;
|
||||
|
||||
// Horizontal nav
|
||||
$topnav-bg-dark: #282e3f;
|
||||
$menu-item-color-dark: #a6b0cf;
|
||||
$menu-item-active-color-dark: #556ee6;
|
||||
|
||||
$boxed-body-bg-dark: #32394f;
|
||||
|
||||
|
||||
// Display
|
||||
$display-none-dark: block;
|
||||
$display-block-dark: none;
|
||||
1809
src/web-live-chat/src/lib/scss/_variables.scss
Normal file
1809
src/web-live-chat/src/lib/scss/_variables.scss
Normal file
File diff suppressed because it is too large
Load diff
228
src/web-live-chat/src/lib/scss/app.scss
Normal file
228
src/web-live-chat/src/lib/scss/app.scss
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
/*
|
||||
Template Name: Skote - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Version: 4.1.0.
|
||||
Website: https://themesbrand.com/
|
||||
Contact: themesbrand@gmail.com
|
||||
File: Main Css File
|
||||
*/
|
||||
|
||||
//Fonts
|
||||
@import "custom/fonts/fonts";
|
||||
|
||||
//Core files
|
||||
@import "./node_modules/bootstrap/scss/functions";
|
||||
@import "./node_modules/bootstrap/scss/variables";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "./node_modules/bootstrap/scss/mixins";
|
||||
|
||||
// Structure
|
||||
@import "custom/structure/general";
|
||||
@import "custom/structure/topbar";
|
||||
@import "custom/structure/page-head";
|
||||
@import "custom/structure/footer";
|
||||
@import "custom/structure/right-sidebar";
|
||||
@import "custom/structure/vertical";
|
||||
@import "custom/structure/horizontal-nav";
|
||||
@import "custom/structure/layouts";
|
||||
|
||||
// Components
|
||||
@import "custom/components/waves";
|
||||
@import "custom/components/avatar";
|
||||
@import "custom/components/accordion";
|
||||
@import "custom/components/helper";
|
||||
@import "custom/components/preloader";
|
||||
@import "custom/components/forms";
|
||||
@import "custom/components/widgets";
|
||||
@import "custom/components/demos";
|
||||
@import "custom/components/print";
|
||||
|
||||
// Plugins
|
||||
@import "custom/plugins/custom-scrollbar";
|
||||
@import "custom/plugins/calendar";
|
||||
@import "custom/plugins/calendar-full";
|
||||
@import "custom/plugins/dragula";
|
||||
@import "custom/plugins/session-timeout";
|
||||
@import "custom/plugins/range-slider";
|
||||
@import "custom/plugins/sweatalert2";
|
||||
@import "custom/plugins/rating";
|
||||
@import "custom/plugins/toastr";
|
||||
@import "custom/plugins/parsley";
|
||||
@import "custom/plugins/select2";
|
||||
|
||||
@import "custom/plugins/switch";
|
||||
@import "custom/plugins/colorpicker";
|
||||
@import "custom/plugins/timepicker";
|
||||
@import "custom/plugins/datepicker";
|
||||
@import "custom/plugins/bootstrap-touchspin";
|
||||
@import "custom/plugins/form-editors";
|
||||
@import "custom/plugins/form-upload";
|
||||
@import "custom/plugins/form-wizard";
|
||||
@import "custom/plugins/datatable";
|
||||
@import "custom/plugins/responsive-table";
|
||||
@import "custom/plugins/table-editable";
|
||||
@import "custom/plugins/apexcharts";
|
||||
@import "custom/plugins/echarts";
|
||||
@import "custom/plugins/flot";
|
||||
@import "custom/plugins/sparkline-chart";
|
||||
@import "custom/plugins/google-map";
|
||||
@import "custom/plugins/vector-maps";
|
||||
@import "custom/plugins/leaflet-maps";
|
||||
|
||||
// Pages
|
||||
@import "custom/pages/authentication";
|
||||
@import "custom/pages/chat";
|
||||
@import "custom/pages/contacts";
|
||||
|
||||
//RTL
|
||||
// @import "custom/rtl/bootstrap-rtl";
|
||||
// @import "custom/rtl/components-rtl";
|
||||
// @import "custom/rtl/float-rtl";
|
||||
// @import "custom/rtl/general-rtl";
|
||||
// @import "custom/rtl/pages-rtl";
|
||||
// @import "custom/rtl/plugins-rtl";
|
||||
// @import "custom/rtl/spacing-rtl";
|
||||
// @import "custom/rtl/structure-rtl";
|
||||
// @import "custom/rtl/text-rtl";
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// custom css
|
||||
.tab-content .nav-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// dropzone
|
||||
.dropzone .dz-message {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
.right-bar .right-bar-toggle {
|
||||
color: #575d64;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.svelte-select {
|
||||
max-height: 20px !important;
|
||||
min-height: 37px !important;
|
||||
background-color: var(--bs-secondary-bg) !important;
|
||||
border-color: var(--bs-border-color-translucent) !important;
|
||||
padding-right: 5px !important;
|
||||
|
||||
.value-container {
|
||||
padding: 0 !important;
|
||||
|
||||
.selected-item {
|
||||
color: #dedddd !important;
|
||||
font-size: .8125rem !important;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: var(--bs-secondary-bg) !important;
|
||||
font-size: .8125rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.indicators {
|
||||
font-size: .8125rem !important;
|
||||
|
||||
.clear-select {
|
||||
height: 18px !important;
|
||||
width: 18px !important;
|
||||
// font-size: .8125rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svelte-select-list {
|
||||
background-color: #282b2e !important;
|
||||
}
|
||||
|
||||
// Modal
|
||||
.modal {
|
||||
.modal-content{
|
||||
background-color: var(--bs-modal-bg);
|
||||
border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// select elements
|
||||
.svelte-select {
|
||||
max-height: 20px !important;
|
||||
min-height: 37px !important;
|
||||
// background-color: #f3f6f9 !important;
|
||||
border-color: #f3f6f9 !important;
|
||||
padding-right: 5px !important;
|
||||
|
||||
.value-container {
|
||||
padding: 0 !important;
|
||||
|
||||
.selected-item {
|
||||
color: #000 !important;
|
||||
font-size: .8125rem !important;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
input {
|
||||
// background-color: #f3f6f9 !important;
|
||||
font-size: .8125rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.indicators {
|
||||
font-size: .8125rem !important;
|
||||
|
||||
.clear-select {
|
||||
height: 18px !important;
|
||||
width: 18px !important;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jvm-zoom-btn {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
background: #424242;
|
||||
padding: 2px;
|
||||
color: white;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
left: 28px;
|
||||
border-radius: 3px;
|
||||
|
||||
&.jvm-zoom-btn {
|
||||
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
&.jvm-zoomout {
|
||||
top: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
// data tables
|
||||
|
||||
.sort {
|
||||
&.asc::after {
|
||||
content: "▲"/"";
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.desc::after{
|
||||
content: "▼"/"";
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
28
src/web-live-chat/src/lib/scss/bootstrap.scss
vendored
Normal file
28
src/web-live-chat/src/lib/scss/bootstrap.scss
vendored
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/*
|
||||
Template Name: Skote - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Version: 4.1.0.
|
||||
Website: https://themesbrand.com/
|
||||
Contact: themesbrand@gmail.com
|
||||
File: Custom Bootstrap Css File
|
||||
*/
|
||||
|
||||
|
||||
//Core files
|
||||
@import "./node_modules/bootstrap/scss/functions";
|
||||
@import "./node_modules/bootstrap/scss/variables";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
@import "custom/components/root";
|
||||
@import "custom/components/reboot";
|
||||
@import "custom/components/badge";
|
||||
@import "custom/components/buttons";
|
||||
@import "custom/components/breadcrumb";
|
||||
@import "custom/components/card";
|
||||
@import "custom/components/dropdown";
|
||||
@import "custom/components/nav";
|
||||
@import "custom/components/table";
|
||||
@import "custom/components/pagination";
|
||||
@import "custom/components/progress";
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
//
|
||||
// accordion.scss
|
||||
//
|
||||
|
||||
.custom-accordion {
|
||||
.accordion-list {
|
||||
display: flex;
|
||||
border-radius: 7px;
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
padding: 12px 20px;
|
||||
color: var(--#{$prefix}body-color);
|
||||
font-weight: $font-weight-semibold;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&.collapsed {
|
||||
i.accor-plus-icon {
|
||||
&:before {
|
||||
content: "\F0415";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accor-plus-icon{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
line-height: 22px;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
|
||||
&.collapsed {
|
||||
i.accor-down-icon {
|
||||
&:before {
|
||||
content: "\F0140";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card-body {
|
||||
color: var(--#{prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
//
|
||||
// avatar.scss
|
||||
//
|
||||
|
||||
.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}secondary-bg);
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
&:hover{
|
||||
position: relative;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
70
src/web-live-chat/src/lib/scss/custom/components/_badge.scss
Normal file
70
src/web-live-chat/src/lib/scss/custom/components/_badge.scss
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
//
|
||||
// _badge.scss
|
||||
//
|
||||
|
||||
|
||||
.badge {
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Soft badge
|
||||
@mixin badge-variant-soft($bg) {
|
||||
color: $bg;
|
||||
background-color: rgba($bg, 0.18);
|
||||
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $bg;
|
||||
text-decoration: none;
|
||||
background-color: rgba($bg, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge {
|
||||
&.bg-#{$color} {
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($value, 4%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge{
|
||||
&.bg-light{
|
||||
color: var(--#{$prefix}body-color);
|
||||
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-soft-#{$color} {
|
||||
@include badge-variant-soft($value);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rounded-pill{
|
||||
padding-right: .6em;
|
||||
padding-left: .6em;
|
||||
}
|
||||
|
||||
// Dark badge
|
||||
|
||||
.badge.bg-dark{
|
||||
color: var(--#{$prefix}light);
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
//
|
||||
// breadcrumb.scss
|
||||
//
|
||||
|
||||
|
||||
// Breadcrumb item arrow
|
||||
.breadcrumb-item {
|
||||
> a {
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
}
|
||||
+.breadcrumb-item {
|
||||
&::before {
|
||||
font-family: "Material Design Icons";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
120
src/web-live-chat/src/lib/scss/custom/components/_buttons.scss
Normal file
120
src/web-live-chat/src/lib/scss/custom/components/_buttons.scss
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
//
|
||||
// _buttons.scss
|
||||
//
|
||||
|
||||
button,
|
||||
a {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
// Rounded Buttons
|
||||
.btn-rounded {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
&:focus {
|
||||
box-shadow: $btn-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// example 1
|
||||
|
||||
.btn-group-example {
|
||||
.btn {
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "OR";
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--#{$prefix}secondary-color);
|
||||
color: var(--#{$prefix}secondary-bg);
|
||||
border: 1px solid var(--#{$prefix}secondary-bg);
|
||||
left: -12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Example 2
|
||||
|
||||
.btn-label {
|
||||
position: relative;
|
||||
padding-left: 44px;
|
||||
.label-icon {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba($white, 0.1);
|
||||
border-right: 1px solid rgba($white, 0.1);
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&.btn-light {
|
||||
.label-icon {
|
||||
background-color: rgba($dark, 0.1);
|
||||
border-right: 1px solid rgba($dark, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-group-vertical{
|
||||
label {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Soft Buttons
|
||||
//
|
||||
|
||||
@mixin button-variant-soft($bg) {
|
||||
color: $bg;
|
||||
background-color: rgba($bg, 0.1);
|
||||
border-color: transparent;
|
||||
transition: all 0.5s ease;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
background-color: $bg;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.btn-soft-#{$color} {
|
||||
@include button-variant-soft($value);
|
||||
}
|
||||
}
|
||||
|
||||
.like-btn {
|
||||
&.active {
|
||||
.bx-heart {
|
||||
color: $danger;
|
||||
&:before {
|
||||
content: "\ec8f";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/web-live-chat/src/lib/scss/custom/components/_card.scss
Normal file
24
src/web-live-chat/src/lib/scss/custom/components/_card.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
//
|
||||
// _card.scss
|
||||
//
|
||||
|
||||
.card {
|
||||
margin-bottom: $grid-gutter-width;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.card-drop {
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 15px;
|
||||
margin: 0 0 7px 0;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
}
|
||||
|
||||
.card-title-desc {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
115
src/web-live-chat/src/lib/scss/custom/components/_demos.scss
Normal file
115
src/web-live-chat/src/lib/scss/custom/components/_demos.scss
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
//
|
||||
// _demos.scss
|
||||
//
|
||||
|
||||
// Lightbox
|
||||
|
||||
.mfp-popup-form {
|
||||
max-width: 1140px;
|
||||
}
|
||||
.mfp-close{
|
||||
color: var(--#{$prefix}body-color) !important;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
text-align: center;
|
||||
color: $gray-500;
|
||||
|
||||
i{
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
margin-bottom: 16px;
|
||||
color: var(--#{prefix}secondary-color);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.col-lg-4 {
|
||||
margin-top: 24px;
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
color: $primary;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Grid
|
||||
|
||||
.grid-structure {
|
||||
.grid-container {
|
||||
background-color: var(--#{$prefix}gray-100);
|
||||
margin-top: 10px;
|
||||
font-size: .8rem;
|
||||
font-weight: $font-weight-medium;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// card radio
|
||||
|
||||
.card-radio{
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
border: 2px solid var(--#{$prefix}border-color);
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.card-radio-label{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.card-radio-input{
|
||||
display: none;
|
||||
&:checked + .card-radio {
|
||||
border-color: $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navs-carousel{
|
||||
.owl-nav{
|
||||
margin-top: 16px;
|
||||
button{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 28px !important;
|
||||
font-size: 20px !important;
|
||||
border-radius: 50% !important;
|
||||
background-color: rgba($primary, 0.25) !important;
|
||||
color: $primary !important;
|
||||
margin: 4px 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
//
|
||||
// _dropdown.scss
|
||||
//
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $box-shadow-lg;
|
||||
animation-name: DropDownSlide;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
|
||||
&.show {
|
||||
top: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dropdown-menu-end[style] {
|
||||
left: auto !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-menu[data-popper-placement^="right"],
|
||||
.dropdown-menu[data-popper-placement^="top"],
|
||||
.dropdown-menu[data-popper-placement^="left"] {
|
||||
top: auto !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
@keyframes DropDownSlide {
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
0% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.dropdown-menu-lg {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.dropdown-menu-md {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown Mega Menu
|
||||
|
||||
.dropdown-mega {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.dropdown-megamenu[style] {
|
||||
padding: 20px;
|
||||
left: 20px !important;
|
||||
right: 20px !important;
|
||||
}
|
||||
|
||||
// Dropdown size
|
||||
|
||||
.dropdown-mega-menu-xl {
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.dropdown-mega-menu-lg {
|
||||
width: 26rem;
|
||||
}
|
||||
181
src/web-live-chat/src/lib/scss/custom/components/_forms.scss
Normal file
181
src/web-live-chat/src/lib/scss/custom/components/_forms.scss
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
//
|
||||
// Forms.scss
|
||||
//
|
||||
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
&::placeholder {
|
||||
text-align: left
|
||||
/*rtl: right*/
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check {
|
||||
position: relative;
|
||||
text-align: left
|
||||
/*rtl: right*/
|
||||
;
|
||||
}
|
||||
|
||||
|
||||
// checkbox input right
|
||||
|
||||
.form-check-right {
|
||||
padding-left: 0;
|
||||
display: inline-block;
|
||||
padding-right: $form-check-padding-start;
|
||||
|
||||
.form-check-input {
|
||||
float: right;
|
||||
margin-left: 0;
|
||||
margin-right: $form-check-padding-start * -1;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// checkbox
|
||||
|
||||
.form-checkbox-outline {
|
||||
|
||||
.form-check-input {
|
||||
border-width: 2px;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
|
||||
&:active {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: var(--#{$prefix}secondary-bg) !important;
|
||||
|
||||
&[type=checkbox] {
|
||||
background-image: none;
|
||||
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '\F012C';
|
||||
font-family: "Material Design Icons";
|
||||
top: -4px !important;
|
||||
left: 1px;
|
||||
/*rtl: -4px */
|
||||
font-size: 16px;
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// radio
|
||||
|
||||
.form-radio-outline {
|
||||
.form-check-input {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
position: relative;
|
||||
|
||||
&:active {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: var(--#{$prefix}secondary-bg) !important;
|
||||
|
||||
&[type=checkbox] {
|
||||
background-image: none;
|
||||
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 3px !important;
|
||||
left: 3px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 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,
|
||||
.form-check-input,
|
||||
.form-check-label {
|
||||
cursor: pointer;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Switch sizes
|
||||
|
||||
.form-switch-md {
|
||||
padding-left: 2.5rem;
|
||||
min-height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
.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;
|
||||
}
|
||||
104
src/web-live-chat/src/lib/scss/custom/components/_helper.scss
Normal file
104
src/web-live-chat/src/lib/scss/custom/components/_helper.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
//
|
||||
// _helper.scss
|
||||
//
|
||||
|
||||
.font-size-10 {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.font-size-11 {
|
||||
font-size: 11px !important;
|
||||
}
|
||||
|
||||
.font-size-12 {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.font-size-13 {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.font-size-14 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.font-size-15 {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.font-size-16 {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.font-size-17 {
|
||||
font-size: 17px !important;
|
||||
}
|
||||
|
||||
.font-size-18 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.font-size-20 {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.font-size-22 {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
.font-size-24 {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
// 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: var(--#{$prefix}secondary-color);
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
// alert
|
||||
|
||||
.alert-dismissible {
|
||||
.btn-close {
|
||||
font-size: 10px;
|
||||
padding: $alert-padding-y * 1.4 $alert-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.chartjs-chart {
|
||||
max-height: 300px;
|
||||
}
|
||||
68
src/web-live-chat/src/lib/scss/custom/components/_nav.scss
Normal file
68
src/web-live-chat/src/lib/scss/custom/components/_nav.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
//
|
||||
// _nav.scss
|
||||
//
|
||||
|
||||
.nav-tabs,.nav-pills {
|
||||
> li {
|
||||
> a {
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
> a {
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-tabs-custom {
|
||||
border-bottom: 2px solid var(--#{$prefix}border-color);
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
color: var(--#{$prefix}body-color);
|
||||
.nav-link {
|
||||
border: none;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: $primary;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
transition: all 250ms ease 0s;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&.active{
|
||||
color: $primary;
|
||||
&:after{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// vertical nav
|
||||
|
||||
.vertical-nav{
|
||||
.nav{
|
||||
.nav-link{
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
.nav-icon{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
//
|
||||
// _pagination.scss
|
||||
//
|
||||
|
||||
// Pagination rounded (Custom)
|
||||
.pagination-rounded {
|
||||
.page-link {
|
||||
border-radius: 30px !important;
|
||||
margin: 0 3px !important;
|
||||
border: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
106
src/web-live-chat/src/lib/scss/custom/components/_preloader.scss
Normal file
106
src/web-live-chat/src/lib/scss/custom/components/_preloader.scss
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
//
|
||||
// preloader.scss
|
||||
//
|
||||
|
||||
#preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#status {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -20px 0 0 -20px;
|
||||
}
|
||||
|
||||
.spinner-chase {
|
||||
margin: 0 auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
animation: spinner-chase 2.5s infinite linear both;
|
||||
}
|
||||
|
||||
.chase-dot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
animation: chase-dot 2.0s infinite ease-in-out both;
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
background-color: $primary;
|
||||
border-radius: 100%;
|
||||
animation: chase-dot-before 2.0s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: -1.1s;
|
||||
&:before{
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: -1.0s;
|
||||
&:before{
|
||||
animation-delay: -1.0s;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: -0.9s;
|
||||
&:before{
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: -0.8s;
|
||||
&:before{
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
animation-delay: -0.7s;
|
||||
&:before{
|
||||
animation-delay: -0.7s;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
animation-delay: -0.6s;
|
||||
&:before{
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinner-chase {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes chase-dot {
|
||||
80%, 100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes chase-dot-before {
|
||||
50% {
|
||||
transform: scale(0.4);
|
||||
}
|
||||
100%, 0% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
26
src/web-live-chat/src/lib/scss/custom/components/_print.scss
Normal file
26
src/web-live-chat/src/lib/scss/custom/components/_print.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
//
|
||||
// print.scss
|
||||
//
|
||||
|
||||
// Used invoice page
|
||||
@media print {
|
||||
.vertical-menu,
|
||||
.right-bar,
|
||||
.page-title-box,
|
||||
.navbar-header,
|
||||
.footer {
|
||||
display: none !important;
|
||||
}
|
||||
.card-body,
|
||||
.main-content,
|
||||
.right-bar,
|
||||
.page-content,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card{
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
//
|
||||
// _progress.scss
|
||||
//
|
||||
|
||||
// Progress height small
|
||||
.progress-sm {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
|
||||
// Progress height medium
|
||||
.progress-md {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
|
||||
// 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}secondary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// animated-progess
|
||||
|
||||
.animated-progess{
|
||||
position: relative;
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
animation: animate-positive 2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate-positive {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
/* =============
|
||||
General
|
||||
============= */
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
// .h1,.h2,.h3,.h4,.h5,.h6,
|
||||
// h1,h2,h3,h4,h5,h6 {
|
||||
// color: $gray-700;
|
||||
// }
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
margin-bottom: $form-label-margin-bottom;
|
||||
}
|
||||
|
||||
// blockquote
|
||||
|
||||
.blockquote {
|
||||
padding: 10px 20px;
|
||||
border-left: 4px solid var(--#{$variable-prefix}border-color);
|
||||
}
|
||||
|
||||
.blockquote-reverse {
|
||||
border-left: 0;
|
||||
border-right: 4px solid var(--#{$variable-prefix}border-color);
|
||||
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;
|
||||
}
|
||||
}
|
||||
116
src/web-live-chat/src/lib/scss/custom/components/_root.scss
Normal file
116
src/web-live-chat/src/lib/scss/custom/components/_root.scss
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
//
|
||||
// root.scss
|
||||
//
|
||||
|
||||
//theme-light
|
||||
:root {
|
||||
// Topbar - Default Light
|
||||
--#{$prefix}header-bg: #{$header-bg};
|
||||
--#{$prefix}header-item-color: #{$header-item-color};
|
||||
|
||||
// Topbar - Dark
|
||||
--#{$prefix}header-dark-bg: #{$header-dark-bg};
|
||||
--#{$prefix}header-dark-item-color: #{$header-dark-item-color};
|
||||
|
||||
--#{$prefix}topbar-search-bg: #{$topbar-search-bg};
|
||||
|
||||
// Footer
|
||||
--#{$prefix}footer-bg: #{$footer-bg};
|
||||
--#{$prefix}footer-color: #{$footer-color};
|
||||
|
||||
// Horizontal nav
|
||||
--#{$prefix}topnav-bg: #{$topnav-bg};
|
||||
--#{$prefix}menu-item-color: #{$menu-item-color};
|
||||
--#{$prefix}menu-item-active-color: #{$menu-item-active-color};
|
||||
|
||||
// Boxed layout width
|
||||
--#{$prefix}boxed-body-bg: #{$boxed-body-bg};
|
||||
|
||||
--#{$prefix}display-none: #{$display-none};
|
||||
--#{$prefix}display-block: #{$display-block};
|
||||
}
|
||||
|
||||
//theme dark
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark, true) {
|
||||
// Topbar - Default Light
|
||||
--#{$prefix}header-bg: #{$header-bg-dark};
|
||||
--#{$prefix}header-item-color: #{$header-item-color-dark};
|
||||
|
||||
// Topbar - Dark
|
||||
--#{$prefix}header-dark-bg: #{$header-dark-bg-dark};
|
||||
--#{$prefix}header-dark-item-color: #{$header-dark-item-color-dark};
|
||||
--#{$prefix}topbar-search-bg: #{$topbar-search-bg-dark};
|
||||
|
||||
// Footer
|
||||
--#{$prefix}footer-bg: #{$footer-bg-dark};
|
||||
--#{$prefix}footer-color: #{$footer-color-dark};
|
||||
|
||||
// Horizontal nav
|
||||
--#{$prefix}topnav-bg: #{$topnav-bg-dark};
|
||||
--#{$prefix}menu-item-color: #{$menu-item-color-dark};
|
||||
--#{$prefix}menu-item-active-color: #{$menu-item-active-color-dark};
|
||||
|
||||
// Boxed layout width
|
||||
--#{$prefix}boxed-body-bg: #{$boxed-body-bg-dark};
|
||||
|
||||
// component variable
|
||||
--#{$prefix}light: #{$body-tertiary-bg-dark};
|
||||
--#{$prefix}light-rgb: #{to-rgb($body-tertiary-bg-dark)};
|
||||
--#{$prefix}dark: #{$body-tertiary-color-dark};
|
||||
--#{$prefix}dark-rgb: #{to-rgb($body-tertiary-color-dark)};
|
||||
|
||||
--#{$prefix}display-none: #{$display-none-dark};
|
||||
--#{$prefix}display-block: #{$display-block-dark};
|
||||
|
||||
.btn-light {
|
||||
--#{$prefix}btn-color: #{$body-secondary-color-dark};
|
||||
--#{$prefix}btn-bg: #{$body-tertiary-bg-dark};
|
||||
--#{$prefix}btn-border-color: #{$body-tertiary-bg-dark};
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--#{$prefix}btn-color: #{$body-secondary-color-dark};
|
||||
--#{$prefix}btn-border-color: #{$body-tertiary-bg-dark};
|
||||
}
|
||||
|
||||
.btn-light,
|
||||
.btn-outline-light {
|
||||
--#{$prefix}btn-hover-color: #{$body-secondary-color-dark};
|
||||
--#{$prefix}btn-hover-bg: #{$body-tertiary-bg-dark};
|
||||
--#{$prefix}btn-hover-border-color: #{$body-tertiary-bg-dark};
|
||||
--#{$prefix}btn-active-color: #{$body-secondary-color-dark};
|
||||
--#{$prefix}btn-active-bg: #{$body-tertiary-bg-dark};
|
||||
--#{$prefix}btn-active-border-color: #{$body-tertiary-bg-dark};
|
||||
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($body-tertiary-bg-dark)};
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--#{$prefix}btn-bg: #{$body-color-dark};
|
||||
--#{$prefix}btn-border-color: #{$body-color-dark};
|
||||
--#{$prefix}btn-hover-bg: #{$body-color-dark};
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--#{$prefix}btn-color: #{$body-color-dark};
|
||||
--#{$prefix}btn-border-color: #{$body-color-dark};
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--#{$prefix}dropdown-border-width: 1px;
|
||||
}
|
||||
|
||||
.table-light {
|
||||
--bs-table-color: #a6b0cf;
|
||||
--bs-table-bg: #32394e;
|
||||
--bs-table-border-color: #32394e;
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
--bs-table-color: #a6b0cf;
|
||||
--bs-table-bg: #32394e;
|
||||
--bs-table-border-color: #3a425a;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
28
src/web-live-chat/src/lib/scss/custom/components/_table.scss
Normal file
28
src/web-live-chat/src/lib/scss/custom/components/_table.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
//
|
||||
// _table.scss
|
||||
//
|
||||
|
||||
.table {
|
||||
th {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark>:not(:last-child)>:last-child>*{
|
||||
border-bottom-color: $table-dark-border-color;
|
||||
}
|
||||
|
||||
|
||||
.table-bordered {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
.table-nowrap {
|
||||
th, td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.table>:not(:first-child) {
|
||||
border-top: 0;
|
||||
}
|
||||
168
src/web-live-chat/src/lib/scss/custom/components/_waves.scss
Normal file
168
src/web-live-chat/src/lib/scss/custom/components/_waves.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
//
|
||||
// Widgets.scss
|
||||
//
|
||||
|
||||
.mini-stats-wid{
|
||||
.mini-stat-icon{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
&:before, &:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 54px;
|
||||
background-color: rgba($white,.1);
|
||||
left: 16px;
|
||||
transform: rotate(32deg);
|
||||
top: -5px;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
&::after{
|
||||
left: -12px;
|
||||
width: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
.mini-stat-icon{
|
||||
&::after{
|
||||
left: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
5
src/web-live-chat/src/lib/scss/custom/fonts/_fonts.scss
Normal file
5
src/web-live-chat/src/lib/scss/custom/fonts/_fonts.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
//
|
||||
// Google font - Poppins
|
||||
//
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
//
|
||||
// authentication.scss
|
||||
//
|
||||
|
||||
|
||||
// authentication home icon
|
||||
.home-btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
// auth 2
|
||||
|
||||
.auth-logo{
|
||||
.auth-logo-dark{
|
||||
display: var(--#{$prefix}display-block);
|
||||
}
|
||||
.auth-logo-light{
|
||||
display: var(--#{$prefix}display-none);
|
||||
}
|
||||
}
|
||||
|
||||
.auth-body-bg{
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
|
||||
// auth-pass-inputgroup
|
||||
|
||||
.auth-pass-inputgroup{
|
||||
input[type="input"] + .btn .mdi-eye-outline{
|
||||
&:before{
|
||||
content: "\F06D1";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// authentication full page
|
||||
|
||||
.auth-full-bg{
|
||||
background-color: rgba($primary, 0.25);
|
||||
display: flex;
|
||||
|
||||
@media (min-width: 1200px){
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
&::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bg-overlay{
|
||||
background: url("/images/bg-auth-overlay.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-full-page-content{
|
||||
display: flex;
|
||||
|
||||
@media (min-width: 1200px){
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-review-carousel{
|
||||
&.owl-theme {
|
||||
.owl-dots {
|
||||
.owl-dot{
|
||||
span{
|
||||
background-color: rgba($primary, 0.25);
|
||||
}
|
||||
&.active, &:hover{
|
||||
span{
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
242
src/web-live-chat/src/lib/scss/custom/pages/_chat.scss
Normal file
242
src/web-live-chat/src/lib/scss/custom/pages/_chat.scss
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
//
|
||||
// Chat.scss
|
||||
//
|
||||
|
||||
.chat-leftsidebar {
|
||||
@media (min-width: 992px) {
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
min-width: 380px;
|
||||
}
|
||||
|
||||
.chat-leftsidebar-nav {
|
||||
.nav {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
min-height: 488px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-noti-dropdown {
|
||||
&.active {
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: $danger;
|
||||
border-radius: 50%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 6px;
|
||||
box-shadow: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-search-box {
|
||||
.form-control {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-list {
|
||||
margin: 0;
|
||||
li {
|
||||
&.active {
|
||||
a {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
border-color: transparent;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: 14px 16px;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
transition: all 0.4s;
|
||||
border-top: 1px solid var(--#{$prefix}border-color);
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
border-color: transparent;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-chat-nav {
|
||||
.dropdown {
|
||||
.nav-btn {
|
||||
color: var(--#{$prefix}body-color);
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 42px;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
background-color: var(--#{$prefix}light);
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $box-shadow;
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-conversation {
|
||||
li {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.chat-day-title {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.title {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 6px 24px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--#{$prefix}border-color);
|
||||
top: 10px;
|
||||
}
|
||||
.badge {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.conversation-list {
|
||||
margin-bottom: 24px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.ctext-wrap {
|
||||
padding: 12px 24px;
|
||||
background-color: rgba($primary, 0.1);
|
||||
border-radius: 8px 8px 8px 0px;
|
||||
overflow: hidden;
|
||||
|
||||
.conversation-name {
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $primary;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
float: right;
|
||||
.dropdown-toggle {
|
||||
font-size: 18px;
|
||||
padding: 4px;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
@media (max-width: 575.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $box-shadow;
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.conversation-list {
|
||||
float: right;
|
||||
.ctext-wrap {
|
||||
background-color: var(--#{$prefix}light);
|
||||
text-align: right;
|
||||
border-radius: 8px 8px 0px 8px;
|
||||
}
|
||||
.dropdown {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.last-chat {
|
||||
.conversation-list {
|
||||
&:before {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.last-chat {
|
||||
.conversation-list {
|
||||
&:before {
|
||||
content: "\F0009";
|
||||
font-family: "Material Design Icons";
|
||||
position: absolute;
|
||||
color: $primary;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 16px;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-section {
|
||||
border-top: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
border-radius: 30px;
|
||||
background-color: var(--#{$prefix}light) !important;
|
||||
border-color: var(--#{$prefix}light) !important;
|
||||
padding-right: 120px;
|
||||
}
|
||||
|
||||
.chat-input-links {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
li {
|
||||
a {
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
padding: 0px 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-send {
|
||||
@media (max-width: 575.98px) {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
15
src/web-live-chat/src/lib/scss/custom/pages/_contacts.scss
Normal file
15
src/web-live-chat/src/lib/scss/custom/pages/_contacts.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
//
|
||||
// Contacts.scss
|
||||
//
|
||||
|
||||
.contact-links{
|
||||
a{
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
|
||||
// profile
|
||||
|
||||
.profile-user-wid{
|
||||
margin-top: -26px;
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
//
|
||||
// apexcharts.scss
|
||||
//
|
||||
.apex-charts {
|
||||
min-height: 10px !important;
|
||||
|
||||
text {
|
||||
font-family: $font-family-base !important;
|
||||
fill: var(--#{$prefix}gray-500);
|
||||
}
|
||||
|
||||
.apexcharts-canvas {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-title,
|
||||
.apexcharts-tooltip-text {
|
||||
font-family: $font-family-base !important;
|
||||
}
|
||||
|
||||
.apexcharts-legend-series {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.apexcharts-gridline {
|
||||
pointer-events: none;
|
||||
stroke: $apex-grid-color;
|
||||
}
|
||||
|
||||
.apexcharts-legend-text {
|
||||
color: #74788d !important;
|
||||
font-family: $font-family-base !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.apexcharts-pie-label {
|
||||
fill: $white !important;
|
||||
}
|
||||
|
||||
.apexcharts-yaxis,
|
||||
.apexcharts-xaxis {
|
||||
text {
|
||||
font-family: $font-family-base !important;
|
||||
fill: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-gridline {
|
||||
stroke: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.apexcharts-radialbar-track.apexcharts-track {
|
||||
path {
|
||||
stroke: var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-tooltip {
|
||||
background-color: var(--#{$prefix}secondary-bg) !important;
|
||||
border: 1px solid var(--#{$prefix}border-color) !important;
|
||||
|
||||
.apexcharts-tooltip-title {
|
||||
background-color: var(--#{$prefix}border-color) !important;
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-pie-area {
|
||||
stroke: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
.apexcharts-grid-borders {
|
||||
line {
|
||||
stroke: var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-pie-label {
|
||||
fill: var(--#{$prefix}white) !important;
|
||||
}
|
||||
|
||||
.apexcharts-xaxis-tick {
|
||||
stroke: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
//
|
||||
// Bootstrap touchspin
|
||||
//
|
||||
|
||||
.bootstrap-touchspin {
|
||||
&.input-group {
|
||||
&>.input-group-prepend {
|
||||
|
||||
&>.btn,
|
||||
&>.input-group-text {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.input-group {
|
||||
&>.input-group-append {
|
||||
|
||||
&>.btn,
|
||||
&>.input-group-text {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
/* ==============
|
||||
Calendar
|
||||
===================*/
|
||||
|
||||
|
||||
.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-cushion {
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.fc-daygrid-day-number {
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-event-dot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc-prev-button,
|
||||
.fc-next-button {
|
||||
position: relative;
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
|
||||
|
||||
.fc-toolbar-chunk {
|
||||
.fc-button-group {
|
||||
.fc-button {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
border-color: var(--#{$prefix}primary);
|
||||
;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $white;
|
||||
background-color: var(--#{$prefix}primary);
|
||||
border-color: var(--#{$prefix}primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-today-button {
|
||||
background-color: var(--#{$prefix}primary) !important;
|
||||
border-color: var(--#{$prefix}primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc {
|
||||
|
||||
.fc-button-primary:not(:disabled).fc-button-active,
|
||||
.fc-button-primary:not(:disabled):active {
|
||||
background-color: var(--#{$prefix}primary) !important;
|
||||
border-color: var(--#{$prefix}primary) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
@media (max-width: 575.98px) {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.fc {
|
||||
th.fc-widget-header {
|
||||
background: $gray-300;
|
||||
color: $gray-700;
|
||||
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}secondary-bg);
|
||||
border-color: var(--#{$prefix}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;
|
||||
color: $white;
|
||||
|
||||
&.bg-dark {
|
||||
.fc-event-time {
|
||||
color: var(--#{$prefix}secondary-bg) !important;
|
||||
}
|
||||
background-color: var(--#{$prefix}secondary-color) !important;
|
||||
.fc-event-title {
|
||||
color: var(--#{$prefix}secondary-bg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event,
|
||||
.fc-event-dot {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.fc-event .fc-content {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
#external-events {
|
||||
.external-event {
|
||||
text-align: left;
|
||||
padding: 8px 16px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.bg-dark {
|
||||
.fc-content {
|
||||
color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// RTL
|
||||
[dir="rtl"] {
|
||||
.fc-header-toolbar {
|
||||
direction: ltr !important;
|
||||
}
|
||||
|
||||
.fc-toolbar>*>:not(:first-child) {
|
||||
margin-left: .75em;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-theme-standard .fc-scrollgrid {
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-week-number {
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-more-link {
|
||||
padding: 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fc .fc-daygrid-more-link:hover {
|
||||
background-color: rgba(var(--#{$prefix}primary-rgb), 0.1);
|
||||
}
|
||||
|
||||
.fc .fc-popover-header {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.fc-theme-standard .fc-popover-header {
|
||||
background: var(--#{$prefix}body-bg);
|
||||
}
|
||||
|
||||
.fc-theme-standard .fc-popover {
|
||||
background: var(--#{$prefix}secondary-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
164
src/web-live-chat/src/lib/scss/custom/plugins/_calendar.scss
Normal file
164
src/web-live-chat/src/lib/scss/custom/plugins/_calendar.scss
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
/* ==============
|
||||
Calendar
|
||||
===================*/
|
||||
|
||||
.lnb-calendars-item {
|
||||
display: inline-block;
|
||||
margin-right: 7px
|
||||
/*rtl: margin-left: 7px*/
|
||||
;
|
||||
}
|
||||
|
||||
input[type="checkbox"].tui-full-calendar-checkbox-round+span {
|
||||
margin-right: 4px
|
||||
/*rtl: 0*/
|
||||
;
|
||||
margin-left: 0
|
||||
/*rtl: 4px*/
|
||||
;
|
||||
}
|
||||
|
||||
.tui-full-calendar-layout,
|
||||
.tui-full-calendar-timegrid-timezone {
|
||||
background-color: var(--#{$prefix}secondary-bg) !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-dayname-container,
|
||||
.tui-full-calendar-left,
|
||||
.tui-full-calendar-splitter,
|
||||
.tui-full-calendar-time-date,
|
||||
.tui-full-calendar-weekday-grid-line,
|
||||
.tui-full-calendar-timegrid-timezone,
|
||||
.tui-full-calendar-timegrid-gridline {
|
||||
border-color: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-weekday-exceed-in-week {
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--#{$prefix}custom-white);
|
||||
color: var(--#{$prefix}body-color);
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.tui-full-calendar-timegrid-hour {
|
||||
color: var(--#{$prefix}body-color) !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-weekday-schedule-title {
|
||||
color: var(--#{$prefix}emphasis-color) !important;
|
||||
|
||||
.tui-full-calendar-time-schedule {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.tui-full-calendar-popup-container {
|
||||
background-color: var(--#{$prefix}custom-white) !important;
|
||||
border-color: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-dropdown {
|
||||
&:hover {
|
||||
.tui-full-calendar-dropdown-button {
|
||||
border-color: var(--#{$prefix}border-color)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tui-full-calendar-popup-section-item {
|
||||
&:hover, &:focus {
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-fill {
|
||||
border-top-color: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-fill {
|
||||
border-bottom-color: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-borde {
|
||||
border-bottom-color: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-button {
|
||||
color: $input-color;
|
||||
background-color: $input-bg !important;
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.tui-full-calendar-popup-section-item {
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.tui-full-calendar-month-dayname,
|
||||
.tui-full-calendar-weekday-border {
|
||||
border-top-color: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-border {
|
||||
border-bottom-color: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-dropdown-menu {
|
||||
border-color: var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-dropdown-menu-item,
|
||||
.tui-full-calendar-dropdown-menu {
|
||||
background-color: $input-bg !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-border {
|
||||
border-top-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.tui-full-calendar-content {
|
||||
background-color: $input-bg !important;
|
||||
color: $input-color !important;
|
||||
}
|
||||
|
||||
.tui-full-calendar-confirm {
|
||||
background-color: $danger !important;
|
||||
color: $white !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $red-600 !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tui-full-calendar-month-dayname-item {
|
||||
span {
|
||||
color: var(--#{$prefix}emphasis-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tui-full-calendar-weekday-grid-line {
|
||||
&.tui-full-calendar-near-month-day {
|
||||
&.tui-full-calendar-extra-date {
|
||||
.tui-full-calendar-weekday-grid-header {
|
||||
.tui-full-calendar-weekday-grid-date {
|
||||
color: var(--#{$prefix}secondary-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tui-full-calendar-weekday-grid-line {
|
||||
&.tui-full-calendar-near-month-day {
|
||||
.tui-full-calendar-weekday-grid-header {
|
||||
.tui-full-calendar-weekday-grid-date {
|
||||
color: var(--#{$prefix}emphasis-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
|
||||
//
|
||||
// colorpicker.scss
|
||||
//
|
||||
|
||||
.sp-container{
|
||||
background-color: $dropdown-bg;
|
||||
button{
|
||||
padding: .25rem .5rem;
|
||||
font-size: .71094rem;
|
||||
border-radius: .2rem;
|
||||
font-weight: 400;
|
||||
color: $dark;
|
||||
|
||||
&.sp-palette-toggle{
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
&.sp-choose{
|
||||
background-color: $success;
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sp-palette-container{
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.sp-input{
|
||||
background-color: $input-bg;
|
||||
border-color: $input-border-color !important;
|
||||
color: $input-color;
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[dir="rtl"]{
|
||||
|
||||
.sp-alpha{
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.sp-original-input-container {
|
||||
.sp-add-on{
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
border-top-left-radius: 4px!important;
|
||||
border-bottom-left-radius: 4px!important
|
||||
}
|
||||
}
|
||||
|
||||
input.spectrum.with-add-on{
|
||||
border: 1px solid $input-border-color;
|
||||
border-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: $input-border-radius;
|
||||
border-bottom-right-radius: $input-border-radius;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
[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: 4px;
|
||||
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%;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/*
|
||||
Datatable
|
||||
*/
|
||||
|
||||
// datatable
|
||||
|
||||
div.dataTables_wrapper {
|
||||
div.dataTables_filter {
|
||||
text-align: right;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table,
|
||||
table {
|
||||
&.dataTable {
|
||||
border-collapse: collapse !important;
|
||||
&.dtr-inline.collapsed>tbody>tr>td {
|
||||
position: relative;
|
||||
|
||||
&.dtr-control {
|
||||
padding-left: 30px;
|
||||
|
||||
&:before {
|
||||
top: 50%;
|
||||
left: 5px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin-top: -9px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: $white;
|
||||
border: 2px solid $white;
|
||||
border-radius: 14px;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
text-indent: 0 !important;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
121
src/web-live-chat/src/lib/scss/custom/plugins/_datepicker.scss
Normal file
121
src/web-live-chat/src/lib/scss/custom/plugins/_datepicker.scss
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
|
||||
//
|
||||
// Datepicker
|
||||
//
|
||||
|
||||
.datepicker {
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
padding: 8px;
|
||||
z-index: 999 !important;
|
||||
|
||||
|
||||
table{
|
||||
tr{
|
||||
th{
|
||||
font-weight: 500;
|
||||
}
|
||||
td{
|
||||
&.active, &.active:hover, .active.disabled, &.active.disabled:hover,
|
||||
&.today, &.today:hover, &.today.disabled, &.today.disabled:hover,
|
||||
&.selected, &.selected:hover, &.selected.disabled, &.selected.disabled:hover,
|
||||
span.active.active, span.active:hover.active{
|
||||
background-color: $primary !important;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
&.day.focused,
|
||||
&.day:hover,
|
||||
span.focused,
|
||||
span:hover {
|
||||
background: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
&.new,
|
||||
&.old,
|
||||
span.new,
|
||||
span.old {
|
||||
color: var(--#{$prefix}gray-500);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.range, &.range.disabled, &.range.disabled:hover, &.range:hover{
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-condensed{
|
||||
>thead>tr>th, >tbody>tr>td {
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-datepicker-inline{
|
||||
.datepicker-inline{
|
||||
width: auto !important;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// DATEPICKER
|
||||
|
||||
.datepicker-container{
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
box-shadow: none;
|
||||
background-color: $dropdown-bg;
|
||||
|
||||
&.datepicker-inline{
|
||||
width: 212px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker{
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
.datepicker-switch:hover,.next:hover,.prev:hover, tfoot tr th:hover {
|
||||
background: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.datepicker-panel{
|
||||
|
||||
>ul{
|
||||
>li{
|
||||
background-color: $dropdown-bg;
|
||||
border-radius: 4px;
|
||||
|
||||
&.picked, &.picked:hover{
|
||||
background-color: rgba($primary, 0.25);
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&.highlighted, &.highlighted:hover, &:hover{
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
&.muted, &.muted:hover{
|
||||
color: var(--#{$prefix}gray-500);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&[data-view=week]{
|
||||
>li{
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
>li, >li:hover{
|
||||
background-color: $dropdown-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
16
src/web-live-chat/src/lib/scss/custom/plugins/_dragula.scss
Normal file
16
src/web-live-chat/src/lib/scss/custom/plugins/_dragula.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
|
||||
/* ==============
|
||||
Druafula
|
||||
===================*/
|
||||
|
||||
|
||||
.task-box{
|
||||
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.gu-transit {
|
||||
border: 1px dashed var(--#{$prefix}border-color) !important;
|
||||
background-color: var(--#{$prefix}gray-200) !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
//
|
||||
// echarts.scss
|
||||
//
|
||||
|
||||
.e-charts{
|
||||
height: 350px;
|
||||
}
|
||||
19
src/web-live-chat/src/lib/scss/custom/plugins/_flot.scss
Normal file
19
src/web-live-chat/src/lib/scss/custom/plugins/_flot.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
|
||||
|
||||
/* Flot chart */
|
||||
.flot-charts-height {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.flotTip {
|
||||
padding: 8px 12px;
|
||||
background-color: rgba($dark, 0.9);
|
||||
z-index: 100;
|
||||
color: $gray-100;
|
||||
box-shadow: $box-shadow;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.legendLabel{
|
||||
color: $gray-500;
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
//
|
||||
// Form editors.scss
|
||||
//
|
||||
|
||||
// Tinymce
|
||||
|
||||
form {
|
||||
.tox-tinymce {
|
||||
border: 1px solid $border-color-translucent;
|
||||
}
|
||||
|
||||
.tox {
|
||||
|
||||
:not(svg):not(rect) {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&:not(.tox-tinymce-inline) {
|
||||
.tox-editor-header {
|
||||
box-shadow: var(--#{$prefix}box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.tox-mbtn {
|
||||
color: $body-secondary-color;
|
||||
|
||||
&:hover:not(:disabled):not(.tox-mbtn--active) {
|
||||
background-color: $body-tertiary-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-tbtn {
|
||||
|
||||
&:hover {
|
||||
color: $body-tertiary-color;
|
||||
background-color: $body-tertiary-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-tbtn--disabled svg,
|
||||
.tox-tbtn--disabled:hover svg,
|
||||
.tox-tbtn:disabled svg,
|
||||
.tox-tbtn:disabled:hover svg {
|
||||
fill: $body-tertiary-color;
|
||||
}
|
||||
|
||||
.tox-tbtn--bespoke {
|
||||
background-color: $body-tertiary-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
//
|
||||
// Form-Upload
|
||||
//
|
||||
|
||||
/* Dropzone */
|
||||
.dropzone {
|
||||
min-height: 230px;
|
||||
border: 2px dashed var(--#{$prefix}border-color) !important;
|
||||
background: var(--#{$prefix}secondary-bg) !important;
|
||||
border-radius: 6px;
|
||||
|
||||
.dz-message {
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
}
|
||||
171
src/web-live-chat/src/lib/scss/custom/plugins/_form-wizard.scss
Normal file
171
src/web-live-chat/src/lib/scss/custom/plugins/_form-wizard.scss
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
//
|
||||
// Form Wizard
|
||||
//
|
||||
|
||||
|
||||
.form-wizard-wrapper {
|
||||
label {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard{
|
||||
|
||||
// step
|
||||
.steps{
|
||||
>ul{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
> a, > li{
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
>li{
|
||||
width: 100%;
|
||||
|
||||
a{
|
||||
display: block;
|
||||
padding: .5rem 1rem;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
background-color: rgba($primary, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.current-info{
|
||||
position: absolute;
|
||||
left: -999em;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.number {
|
||||
display: inline-block;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
line-height: 34px;
|
||||
border: 2px solid $primary;
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.current {
|
||||
a, a:active, a:hover {
|
||||
background-color: rgba($primary, 0.2);
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
.number {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// content
|
||||
>.content {
|
||||
background-color: transparent;
|
||||
padding: 14px;
|
||||
margin-top: 0;
|
||||
border-radius: 0;
|
||||
min-height: 150px;
|
||||
> .title{
|
||||
position: absolute;
|
||||
left: -999em;
|
||||
}
|
||||
>.body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 14px 0 0;
|
||||
position: static
|
||||
}
|
||||
}
|
||||
|
||||
// actions
|
||||
|
||||
>.actions {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
> ul {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding-left: 0;
|
||||
> li{
|
||||
display: inline-block;
|
||||
margin: 0 0.5em;
|
||||
|
||||
}
|
||||
}
|
||||
a, a:active, a:hover {
|
||||
background-color: $primary;
|
||||
border-radius: 4px;
|
||||
padding: 8px 15px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
a, a:active, a:hover {
|
||||
opacity: .65;
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// verticl wixard
|
||||
&.vertical-wizard{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// step
|
||||
.steps{
|
||||
>ul{
|
||||
flex-direction: column;
|
||||
|
||||
>li{
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.steps, .content, .actions{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.steps{
|
||||
@media (min-width: 1200px) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
padding: 24px;
|
||||
@media (min-width: 1200px) {
|
||||
width: 75%;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
>.body{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
//
|
||||
// Google map
|
||||
//
|
||||
|
||||
.gmaps, .gmaps-panaroma {
|
||||
height: 300px !important;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
//
|
||||
// icons.scss
|
||||
//
|
||||
|
||||
@import "icons/materialdesignicons";
|
||||
@import "icons/boxicons";
|
||||
@import "icons/fontawesome-all";
|
||||
@import "icons/dripicons";
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
//
|
||||
// leaflet-maps.scss
|
||||
//
|
||||
|
||||
.leaflet-map {
|
||||
height: 300px;
|
||||
&.leaflet-container{
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
27
src/web-live-chat/src/lib/scss/custom/plugins/_parsley.scss
Normal file
27
src/web-live-chat/src/lib/scss/custom/plugins/_parsley.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
//
|
||||
// Parsley
|
||||
//
|
||||
|
||||
.error {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
.parsley-error {
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.parsley-errors-list {
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
&.filled {
|
||||
display: block;
|
||||
}
|
||||
> li {
|
||||
font-size: 12px;
|
||||
list-style: none;
|
||||
color: $danger;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
//
|
||||
// Range slider
|
||||
//
|
||||
|
||||
.irs {
|
||||
font-family: $font-family-base;
|
||||
}
|
||||
|
||||
.irs--square {
|
||||
cursor: pointer;
|
||||
|
||||
.irs-bar,
|
||||
.irs-to,
|
||||
.irs-from,
|
||||
.irs-single {
|
||||
background: $primary !important;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.irs-to,
|
||||
.irs-from,
|
||||
.irs-single {
|
||||
&:before {
|
||||
border-top-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.irs-line {
|
||||
background: var(--#{$prefix}tertiary-bg);
|
||||
border-color: var(--#{$prefix}tertiary-bg);
|
||||
}
|
||||
|
||||
.irs-grid-text {
|
||||
font-size: 11px;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
.irs-min,
|
||||
.irs-max {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
background: var(--#{$prefix}tertiary-bg);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.irs-handle {
|
||||
border: 2px solid $primary;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 26px;
|
||||
background-color: var(--#{$prefix}secondary-bg) !important;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.irs-grid-pol {
|
||||
background-color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
31
src/web-live-chat/src/lib/scss/custom/plugins/_rating.scss
Normal file
31
src/web-live-chat/src/lib/scss/custom/plugins/_rating.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
//
|
||||
// Rating
|
||||
//
|
||||
|
||||
.symbol{
|
||||
border-color: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
.rating-symbol-background, .rating-symbol-foreground {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.symbol-empty {
|
||||
background-color: var(--#{$prefix}gray-400);
|
||||
}
|
||||
|
||||
.rating-symbol-foreground {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.rating-star{
|
||||
> span{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&.badge{
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
|
||||
//
|
||||
// Responsive Table
|
||||
//
|
||||
|
||||
.table-rep-plugin {
|
||||
.btn-toolbar {
|
||||
display: block;
|
||||
}
|
||||
.table-responsive {
|
||||
border: none !important;
|
||||
}
|
||||
.btn-group{
|
||||
.btn-default {
|
||||
background-color: $secondary;
|
||||
color: $light;
|
||||
border: 1px solid $secondary;
|
||||
&.btn-primary {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
color: $white;
|
||||
box-shadow: 0 0 0 2px rgba($primary, .5);
|
||||
}
|
||||
}
|
||||
&.pull-right {
|
||||
float: right;
|
||||
.dropdown-menu {
|
||||
right: 0;
|
||||
transform: none !important;
|
||||
top: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
th {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-row {
|
||||
padding-left: 40px;
|
||||
color: $dropdown-color !important;
|
||||
|
||||
&:hover{
|
||||
background-color: lighten($gray-200, 2%) !important;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
position: relative;
|
||||
&::before {
|
||||
-o-transition: 0.3s ease-in-out;
|
||||
-webkit-transition: 0.3s ease-in-out;
|
||||
background-color: $white;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $gray-300;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
position: absolute;
|
||||
transition: 0.3s ease-in-out;
|
||||
width: 17px;
|
||||
outline: none !important;
|
||||
}
|
||||
&::after {
|
||||
color: $gray-200;
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
padding-left: 3px;
|
||||
padding-top: 1px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
outline: none !important;
|
||||
|
||||
&:disabled + label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:focus + label {
|
||||
&::before {
|
||||
outline-offset: -2px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::after {
|
||||
content: "\f00c";
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:disabled + label {
|
||||
&::before {
|
||||
background-color: $gray-100;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::before {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
&::after {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-solution {
|
||||
.sticky-table-header{
|
||||
top: $header-height !important;
|
||||
background-color: $primary;
|
||||
table{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.focus-on tbody tr.focused th,
|
||||
table.focus-on tbody tr.focused td,
|
||||
.sticky-table-header {
|
||||
background: $primary;
|
||||
border-color: $primary;
|
||||
color: $white;
|
||||
|
||||
table {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
table.focus-on tbody tr.unfocused th,
|
||||
table.focus-on tfoot tr.unfocused th,
|
||||
table.focus-on tbody tr.unfocused td,
|
||||
table.focus-on tfoot tr.unfocused td {
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
|
||||
body[data-layout="horizontal"] {
|
||||
@media (min-width: 992px) {
|
||||
.fixed-solution {
|
||||
.sticky-table-header{
|
||||
top: $header-height + 50px !important;;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
227
src/web-live-chat/src/lib/scss/custom/plugins/_select2.scss
Normal file
227
src/web-live-chat/src/lib/scss/custom/plugins/_select2.scss
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
//
|
||||
// Select 2
|
||||
//
|
||||
|
||||
.select2-container {
|
||||
.select2-selection--single {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
border: 1px solid $input-border-color;
|
||||
height: 38px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select2-selection__rendered {
|
||||
line-height: 36px;
|
||||
padding-left: $input-padding-x;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
|
||||
|
||||
.select2-selection__arrow {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
right: 3px;
|
||||
|
||||
b {
|
||||
border-color: var(--#{$prefix}gray-500) transparent transparent transparent;
|
||||
border-width: 6px 6px 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__placeholder {
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
.select2-selection__rendered {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.select2-container--open {
|
||||
.select2-selection--single {
|
||||
.select2-selection__arrow {
|
||||
b {
|
||||
border-color: transparent transparent var(--#{$prefix}gray-500) transparent !important;
|
||||
border-width: 0 6px 6px 6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default {
|
||||
.select2-search--dropdown {
|
||||
padding: 10px;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
|
||||
.select2-search__field {
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.select2-results__option[aria-selected="true"] {
|
||||
background-color: var(--#{$prefix}light);
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
.select2-selection__choice__remove {
|
||||
border-right: none;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__option {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
|
||||
padding-left: $input-padding-x;
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
input {
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
.select2-selection--multiple {
|
||||
min-height: 38px;
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent) !important;
|
||||
padding: 2px $input-padding-x;
|
||||
|
||||
.select2-selection__rendered {
|
||||
padding: 2px $input-padding-x;
|
||||
}
|
||||
|
||||
.select2-search__field {
|
||||
border: 0;
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
margin: 0;
|
||||
margin-top: 7px;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection__choice {
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
border-radius: 1px;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.select2-selection__rendered {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default {
|
||||
&.select2-container--focus {
|
||||
.select2-selection--multiple {
|
||||
border-color: var(--#{$prefix}border-color-translucent);
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__group {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
.select2-selection__choice__display {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ajax select
|
||||
|
||||
.select2-result-repository__avatar {
|
||||
float: left;
|
||||
width: 60px;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-result-repository__statistics {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.select2-result-repository__forks,
|
||||
.select2-result-repository__stargazers,
|
||||
.select2-result-repository__watchers {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
margin-right: 1em;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
|
||||
.fa {
|
||||
margin-right: 4px;
|
||||
|
||||
&.fa-flash {
|
||||
&::before {
|
||||
content: "\f0e7";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__option--highlighted {
|
||||
|
||||
.select2-result-repository__forks,
|
||||
.select2-result-repository__stargazers,
|
||||
.select2-result-repository__watchers {
|
||||
color: rgba($white, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.select2-result-repository__meta {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// templating-select
|
||||
|
||||
.img-flag {
|
||||
margin-right: 7px;
|
||||
height: 15px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
|
||||
.select2-container--default .select2-results__option--selected {
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
//
|
||||
// session-timeout.scss
|
||||
//
|
||||
|
||||
#session-timeout-dialog {
|
||||
.close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.countdown-holder {
|
||||
color: $danger;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background-color: $white;
|
||||
color: $danger;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
//
|
||||
// sparkline.scss
|
||||
//
|
||||
|
||||
.jqstooltip {
|
||||
box-sizing: content-box;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
background-color: $gray-800 !important;
|
||||
box-shadow: $box-shadow-lg;
|
||||
padding: 5px 10px !important;
|
||||
border-radius: 3px;
|
||||
border-color: $gray-900 !important;
|
||||
}
|
||||
|
||||
.jqsfield {
|
||||
color: $gray-200 !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 18px !important;
|
||||
font-family: $font-family-base !important;
|
||||
font-weight: $font-weight-medium !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
//
|
||||
// Sweetalert2
|
||||
//
|
||||
|
||||
.swal2-container {
|
||||
.swal2-title {
|
||||
font-size: 20px;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-modal {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.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-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-loader {
|
||||
border-color: $primary transparent $primary transparent;
|
||||
}
|
||||
.swal2-popup {
|
||||
background: var(--#{$prefix}secondary-bg);
|
||||
}
|
||||
|
||||
.swal2-title, .swal2-html-container{
|
||||
color: var(--#{$prefix}emphasis-color);
|
||||
}
|
||||
|
||||
.swal2-file,
|
||||
.swal2-input,
|
||||
.swal2-textarea {
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
color: var(--#{$prefix}body-color);
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
div:where(.swal2-container) div:where(.swal2-popup) {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
123
src/web-live-chat/src/lib/scss/custom/plugins/_switch.scss
Normal file
123
src/web-live-chat/src/lib/scss/custom/plugins/_switch.scss
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
//
|
||||
// Sweetalert2
|
||||
//
|
||||
|
||||
/* CSS Switch */
|
||||
input[switch] {
|
||||
display: none;
|
||||
+ label {
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
width: 56px;
|
||||
height: 24px;
|
||||
background-color: $gray-400;
|
||||
background-image: none;
|
||||
border-radius: 2rem;
|
||||
padding: 0.16667rem;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-weight: $font-weight-medium;
|
||||
transition: all 0.1s ease-in-out;
|
||||
&:before {
|
||||
color: $dark;
|
||||
content: attr(data-off-label);
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 21px;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
margin: 3px;
|
||||
top: -2px;
|
||||
text-align: center;
|
||||
min-width: 1.66667rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
background-color: $gray-200;
|
||||
box-shadow: none;
|
||||
border-radius: 2rem;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
top: 2px;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
input[switch]:checked + label {
|
||||
background-color: $primary;
|
||||
&:before {
|
||||
color: $white;
|
||||
content: attr(data-on-label);
|
||||
right: auto;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 33px;
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
input[switch="bool"] + label {
|
||||
background-color: $danger;
|
||||
}
|
||||
input[switch="bool"] + label:before,input[switch="bool"]:checked + label:before,
|
||||
input[switch="default"]:checked + label:before{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
input[switch="bool"]:checked + label {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
input[switch="default"]:checked + label {
|
||||
background-color: #a2a2a2;
|
||||
}
|
||||
|
||||
input[switch="primary"]:checked + label {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
input[switch="success"]:checked + label {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
input[switch="info"]:checked + label {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
input[switch="warning"]:checked + label {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
input[switch="danger"]:checked + label {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
input[switch="dark"]:checked + label {
|
||||
background-color: $dark;
|
||||
&:before {
|
||||
color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
.square-switch{
|
||||
margin-right: 7px;
|
||||
input[switch]+label, input[switch]+label:after{
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
|
||||
//
|
||||
// Table editable
|
||||
//
|
||||
|
||||
.table-edits{
|
||||
input, select{
|
||||
height: $input-height-sm;
|
||||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
border: 1px solid $input-border-color;
|
||||
background-color: $input-bg;
|
||||
color: $input-color;
|
||||
border-radius: $input-border-radius;
|
||||
&:focus{
|
||||
outline: none;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
|
||||
|
||||
/* Timepicker */
|
||||
.bootstrap-timepicker-widget {
|
||||
table {
|
||||
td {
|
||||
a {
|
||||
color: $input-color;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
border-radius: 4px;
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
input {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
color: var(--#{$prefix}body-color);
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
background-color: $input-bg;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-menu:after{
|
||||
border-bottom-color: var(--#{$prefix}gray-200);
|
||||
}
|
||||
&.timepicker-orient-bottom:after{
|
||||
border-top-color: var(--#{$prefix}gray-200);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.timepicker-orient-top{
|
||||
top: $input-height !important;
|
||||
}
|
||||
|
||||
.timepicker-orient-bottom{
|
||||
top: auto !important;
|
||||
bottom: $input-height !important;
|
||||
}
|
||||
|
||||
.bootstrap-timepicker-widget{
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
|
||||
.bootstrap-timepicker-widget{
|
||||
&.timepicker-orient-left{
|
||||
&:before{
|
||||
left: 6px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&::after{
|
||||
left: 7px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
50
src/web-live-chat/src/lib/scss/custom/plugins/_toastr.scss
Normal file
50
src/web-live-chat/src/lib/scss/custom/plugins/_toastr.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
//
|
||||
// toastr.scss
|
||||
//
|
||||
|
||||
|
||||
/* =============
|
||||
Notification
|
||||
============= */
|
||||
#toast-container {
|
||||
> div {
|
||||
box-shadow: $box-shadow;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
box-shadow: $box-shadow;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
&.toast-top-full-width, &.toast-bottom-full-width{
|
||||
> div{
|
||||
min-width: 96%;
|
||||
margin: 4px auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.toast-#{$color} {
|
||||
border: 2px solid $value !important;
|
||||
background-color: rgba(($value), 0.8) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// for error
|
||||
|
||||
.toast-error {
|
||||
background-color: rgba($danger,0.8);
|
||||
border: 2px solid $danger;
|
||||
}
|
||||
|
||||
.toastr-options{
|
||||
padding: 24px;
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
margin-bottom: 0;
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
//
|
||||
// vector-maps.scss
|
||||
//
|
||||
|
||||
.jvectormap-label {
|
||||
border: none;
|
||||
background: $gray-800;
|
||||
color: $gray-100;
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
3944
src/web-live-chat/src/lib/scss/custom/plugins/icons/_boxicons.scss
Normal file
3944
src/web-live-chat/src/lib/scss/custom/plugins/icons/_boxicons.scss
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,640 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family: "dripicons-v2";
|
||||
src:url("/fonts/dripicons-v2.eot");
|
||||
src:url("/fonts/dripicons-v2.eot?#iefix") format("embedded-opentype"),
|
||||
url("/fonts/dripicons-v2.woff") format("woff"),
|
||||
url("/fonts/dripicons-v2.ttf") format("truetype"),
|
||||
url("/fonts/dripicons-v2.svg#dripicons-v2") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
[data-icon]:before {
|
||||
font-family: "dripicons-v2" !important;
|
||||
content: attr(data-icon);
|
||||
font-style: normal !important;
|
||||
font-weight: normal !important;
|
||||
font-variant: normal !important;
|
||||
text-transform: none !important;
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
[class^="dripicons-"]:before,
|
||||
[class*=" dripicons-"]:before {
|
||||
font-family: "dripicons-v2" !important;
|
||||
font-style: normal !important;
|
||||
font-weight: normal !important;
|
||||
font-variant: normal !important;
|
||||
text-transform: none !important;
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.dripicons-alarm:before {
|
||||
content: "\61";
|
||||
}
|
||||
.dripicons-align-center:before {
|
||||
content: "\62";
|
||||
}
|
||||
.dripicons-align-justify:before {
|
||||
content: "\63";
|
||||
}
|
||||
.dripicons-align-left:before {
|
||||
content: "\64";
|
||||
}
|
||||
.dripicons-align-right:before {
|
||||
content: "\65";
|
||||
}
|
||||
.dripicons-anchor:before {
|
||||
content: "\66";
|
||||
}
|
||||
.dripicons-archive:before {
|
||||
content: "\67";
|
||||
}
|
||||
.dripicons-arrow-down:before {
|
||||
content: "\68";
|
||||
}
|
||||
.dripicons-arrow-left:before {
|
||||
content: "\69";
|
||||
}
|
||||
.dripicons-arrow-right:before {
|
||||
content: "\6a";
|
||||
}
|
||||
.dripicons-arrow-thin-down:before {
|
||||
content: "\6b";
|
||||
}
|
||||
.dripicons-arrow-thin-left:before {
|
||||
content: "\6c";
|
||||
}
|
||||
.dripicons-arrow-thin-right:before {
|
||||
content: "\6d";
|
||||
}
|
||||
.dripicons-arrow-thin-up:before {
|
||||
content: "\6e";
|
||||
}
|
||||
.dripicons-arrow-up:before {
|
||||
content: "\6f";
|
||||
}
|
||||
.dripicons-article:before {
|
||||
content: "\70";
|
||||
}
|
||||
.dripicons-backspace:before {
|
||||
content: "\71";
|
||||
}
|
||||
.dripicons-basket:before {
|
||||
content: "\72";
|
||||
}
|
||||
.dripicons-basketball:before {
|
||||
content: "\73";
|
||||
}
|
||||
.dripicons-battery-empty:before {
|
||||
content: "\74";
|
||||
}
|
||||
.dripicons-battery-full:before {
|
||||
content: "\75";
|
||||
}
|
||||
.dripicons-battery-low:before {
|
||||
content: "\76";
|
||||
}
|
||||
.dripicons-battery-medium:before {
|
||||
content: "\77";
|
||||
}
|
||||
.dripicons-bell:before {
|
||||
content: "\78";
|
||||
}
|
||||
.dripicons-blog:before {
|
||||
content: "\79";
|
||||
}
|
||||
.dripicons-bluetooth:before {
|
||||
content: "\7a";
|
||||
}
|
||||
.dripicons-bold:before {
|
||||
content: "\41";
|
||||
}
|
||||
.dripicons-bookmark:before {
|
||||
content: "\42";
|
||||
}
|
||||
.dripicons-bookmarks:before {
|
||||
content: "\43";
|
||||
}
|
||||
.dripicons-box:before {
|
||||
content: "\44";
|
||||
}
|
||||
.dripicons-briefcase:before {
|
||||
content: "\45";
|
||||
}
|
||||
.dripicons-brightness-low:before {
|
||||
content: "\46";
|
||||
}
|
||||
.dripicons-brightness-max:before {
|
||||
content: "\47";
|
||||
}
|
||||
.dripicons-brightness-medium:before {
|
||||
content: "\48";
|
||||
}
|
||||
.dripicons-broadcast:before {
|
||||
content: "\49";
|
||||
}
|
||||
.dripicons-browser:before {
|
||||
content: "\4a";
|
||||
}
|
||||
.dripicons-browser-upload:before {
|
||||
content: "\4b";
|
||||
}
|
||||
.dripicons-brush:before {
|
||||
content: "\4c";
|
||||
}
|
||||
.dripicons-calendar:before {
|
||||
content: "\4d";
|
||||
}
|
||||
.dripicons-camcorder:before {
|
||||
content: "\4e";
|
||||
}
|
||||
.dripicons-camera:before {
|
||||
content: "\4f";
|
||||
}
|
||||
.dripicons-card:before {
|
||||
content: "\50";
|
||||
}
|
||||
.dripicons-cart:before {
|
||||
content: "\51";
|
||||
}
|
||||
.dripicons-checklist:before {
|
||||
content: "\52";
|
||||
}
|
||||
.dripicons-checkmark:before {
|
||||
content: "\53";
|
||||
}
|
||||
.dripicons-chevron-down:before {
|
||||
content: "\54";
|
||||
}
|
||||
.dripicons-chevron-left:before {
|
||||
content: "\55";
|
||||
}
|
||||
.dripicons-chevron-right:before {
|
||||
content: "\56";
|
||||
}
|
||||
.dripicons-chevron-up:before {
|
||||
content: "\57";
|
||||
}
|
||||
.dripicons-clipboard:before {
|
||||
content: "\58";
|
||||
}
|
||||
.dripicons-clock:before {
|
||||
content: "\59";
|
||||
}
|
||||
.dripicons-clockwise:before {
|
||||
content: "\5a";
|
||||
}
|
||||
.dripicons-cloud:before {
|
||||
content: "\30";
|
||||
}
|
||||
.dripicons-cloud-download:before {
|
||||
content: "\31";
|
||||
}
|
||||
.dripicons-cloud-upload:before {
|
||||
content: "\32";
|
||||
}
|
||||
.dripicons-code:before {
|
||||
content: "\33";
|
||||
}
|
||||
.dripicons-contract:before {
|
||||
content: "\34";
|
||||
}
|
||||
.dripicons-contract-2:before {
|
||||
content: "\35";
|
||||
}
|
||||
.dripicons-conversation:before {
|
||||
content: "\36";
|
||||
}
|
||||
.dripicons-copy:before {
|
||||
content: "\37";
|
||||
}
|
||||
.dripicons-crop:before {
|
||||
content: "\38";
|
||||
}
|
||||
.dripicons-cross:before {
|
||||
content: "\39";
|
||||
}
|
||||
.dripicons-crosshair:before {
|
||||
content: "\21";
|
||||
}
|
||||
.dripicons-cutlery:before {
|
||||
content: "\22";
|
||||
}
|
||||
.dripicons-device-desktop:before {
|
||||
content: "\23";
|
||||
}
|
||||
.dripicons-device-mobile:before {
|
||||
content: "\24";
|
||||
}
|
||||
.dripicons-device-tablet:before {
|
||||
content: "\25";
|
||||
}
|
||||
.dripicons-direction:before {
|
||||
content: "\26";
|
||||
}
|
||||
.dripicons-disc:before {
|
||||
content: "\27";
|
||||
}
|
||||
.dripicons-document:before {
|
||||
content: "\28";
|
||||
}
|
||||
.dripicons-document-delete:before {
|
||||
content: "\29";
|
||||
}
|
||||
.dripicons-document-edit:before {
|
||||
content: "\2a";
|
||||
}
|
||||
.dripicons-document-new:before {
|
||||
content: "\2b";
|
||||
}
|
||||
.dripicons-document-remove:before {
|
||||
content: "\2c";
|
||||
}
|
||||
.dripicons-dot:before {
|
||||
content: "\2d";
|
||||
}
|
||||
.dripicons-dots-2:before {
|
||||
content: "\2e";
|
||||
}
|
||||
.dripicons-dots-3:before {
|
||||
content: "\2f";
|
||||
}
|
||||
.dripicons-download:before {
|
||||
content: "\3a";
|
||||
}
|
||||
.dripicons-duplicate:before {
|
||||
content: "\3b";
|
||||
}
|
||||
.dripicons-enter:before {
|
||||
content: "\3c";
|
||||
}
|
||||
.dripicons-exit:before {
|
||||
content: "\3d";
|
||||
}
|
||||
.dripicons-expand:before {
|
||||
content: "\3e";
|
||||
}
|
||||
.dripicons-expand-2:before {
|
||||
content: "\3f";
|
||||
}
|
||||
.dripicons-experiment:before {
|
||||
content: "\40";
|
||||
}
|
||||
.dripicons-export:before {
|
||||
content: "\5b";
|
||||
}
|
||||
.dripicons-feed:before {
|
||||
content: "\5d";
|
||||
}
|
||||
.dripicons-flag:before {
|
||||
content: "\5e";
|
||||
}
|
||||
.dripicons-flashlight:before {
|
||||
content: "\5f";
|
||||
}
|
||||
.dripicons-folder:before {
|
||||
content: "\60";
|
||||
}
|
||||
.dripicons-folder-open:before {
|
||||
content: "\7b";
|
||||
}
|
||||
.dripicons-forward:before {
|
||||
content: "\7c";
|
||||
}
|
||||
.dripicons-gaming:before {
|
||||
content: "\7d";
|
||||
}
|
||||
.dripicons-gear:before {
|
||||
content: "\7e";
|
||||
}
|
||||
.dripicons-graduation:before {
|
||||
content: "\5c";
|
||||
}
|
||||
.dripicons-graph-bar:before {
|
||||
content: "\e000";
|
||||
}
|
||||
.dripicons-graph-line:before {
|
||||
content: "\e001";
|
||||
}
|
||||
.dripicons-graph-pie:before {
|
||||
content: "\e002";
|
||||
}
|
||||
.dripicons-headset:before {
|
||||
content: "\e003";
|
||||
}
|
||||
.dripicons-heart:before {
|
||||
content: "\e004";
|
||||
}
|
||||
.dripicons-help:before {
|
||||
content: "\e005";
|
||||
}
|
||||
.dripicons-home:before {
|
||||
content: "\e006";
|
||||
}
|
||||
.dripicons-hourglass:before {
|
||||
content: "\e007";
|
||||
}
|
||||
.dripicons-inbox:before {
|
||||
content: "\e008";
|
||||
}
|
||||
.dripicons-information:before {
|
||||
content: "\e009";
|
||||
}
|
||||
.dripicons-italic:before {
|
||||
content: "\e00a";
|
||||
}
|
||||
.dripicons-jewel:before {
|
||||
content: "\e00b";
|
||||
}
|
||||
.dripicons-lifting:before {
|
||||
content: "\e00c";
|
||||
}
|
||||
.dripicons-lightbulb:before {
|
||||
content: "\e00d";
|
||||
}
|
||||
.dripicons-link:before {
|
||||
content: "\e00e";
|
||||
}
|
||||
.dripicons-link-broken:before {
|
||||
content: "\e00f";
|
||||
}
|
||||
.dripicons-list:before {
|
||||
content: "\e010";
|
||||
}
|
||||
.dripicons-loading:before {
|
||||
content: "\e011";
|
||||
}
|
||||
.dripicons-location:before {
|
||||
content: "\e012";
|
||||
}
|
||||
.dripicons-lock:before {
|
||||
content: "\e013";
|
||||
}
|
||||
.dripicons-lock-open:before {
|
||||
content: "\e014";
|
||||
}
|
||||
.dripicons-mail:before {
|
||||
content: "\e015";
|
||||
}
|
||||
.dripicons-map:before {
|
||||
content: "\e016";
|
||||
}
|
||||
.dripicons-media-loop:before {
|
||||
content: "\e017";
|
||||
}
|
||||
.dripicons-media-next:before {
|
||||
content: "\e018";
|
||||
}
|
||||
.dripicons-media-pause:before {
|
||||
content: "\e019";
|
||||
}
|
||||
.dripicons-media-play:before {
|
||||
content: "\e01a";
|
||||
}
|
||||
.dripicons-media-previous:before {
|
||||
content: "\e01b";
|
||||
}
|
||||
.dripicons-media-record:before {
|
||||
content: "\e01c";
|
||||
}
|
||||
.dripicons-media-shuffle:before {
|
||||
content: "\e01d";
|
||||
}
|
||||
.dripicons-media-stop:before {
|
||||
content: "\e01e";
|
||||
}
|
||||
.dripicons-medical:before {
|
||||
content: "\e01f";
|
||||
}
|
||||
.dripicons-menu:before {
|
||||
content: "\e020";
|
||||
}
|
||||
.dripicons-message:before {
|
||||
content: "\e021";
|
||||
}
|
||||
.dripicons-meter:before {
|
||||
content: "\e022";
|
||||
}
|
||||
.dripicons-microphone:before {
|
||||
content: "\e023";
|
||||
}
|
||||
.dripicons-minus:before {
|
||||
content: "\e024";
|
||||
}
|
||||
.dripicons-monitor:before {
|
||||
content: "\e025";
|
||||
}
|
||||
.dripicons-move:before {
|
||||
content: "\e026";
|
||||
}
|
||||
.dripicons-music:before {
|
||||
content: "\e027";
|
||||
}
|
||||
.dripicons-network-1:before {
|
||||
content: "\e028";
|
||||
}
|
||||
.dripicons-network-2:before {
|
||||
content: "\e029";
|
||||
}
|
||||
.dripicons-network-3:before {
|
||||
content: "\e02a";
|
||||
}
|
||||
.dripicons-network-4:before {
|
||||
content: "\e02b";
|
||||
}
|
||||
.dripicons-network-5:before {
|
||||
content: "\e02c";
|
||||
}
|
||||
.dripicons-pamphlet:before {
|
||||
content: "\e02d";
|
||||
}
|
||||
.dripicons-paperclip:before {
|
||||
content: "\e02e";
|
||||
}
|
||||
.dripicons-pencil:before {
|
||||
content: "\e02f";
|
||||
}
|
||||
.dripicons-phone:before {
|
||||
content: "\e030";
|
||||
}
|
||||
.dripicons-photo:before {
|
||||
content: "\e031";
|
||||
}
|
||||
.dripicons-photo-group:before {
|
||||
content: "\e032";
|
||||
}
|
||||
.dripicons-pill:before {
|
||||
content: "\e033";
|
||||
}
|
||||
.dripicons-pin:before {
|
||||
content: "\e034";
|
||||
}
|
||||
.dripicons-plus:before {
|
||||
content: "\e035";
|
||||
}
|
||||
.dripicons-power:before {
|
||||
content: "\e036";
|
||||
}
|
||||
.dripicons-preview:before {
|
||||
content: "\e037";
|
||||
}
|
||||
.dripicons-print:before {
|
||||
content: "\e038";
|
||||
}
|
||||
.dripicons-pulse:before {
|
||||
content: "\e039";
|
||||
}
|
||||
.dripicons-question:before {
|
||||
content: "\e03a";
|
||||
}
|
||||
.dripicons-reply:before {
|
||||
content: "\e03b";
|
||||
}
|
||||
.dripicons-reply-all:before {
|
||||
content: "\e03c";
|
||||
}
|
||||
.dripicons-return:before {
|
||||
content: "\e03d";
|
||||
}
|
||||
.dripicons-retweet:before {
|
||||
content: "\e03e";
|
||||
}
|
||||
.dripicons-rocket:before {
|
||||
content: "\e03f";
|
||||
}
|
||||
.dripicons-scale:before {
|
||||
content: "\e040";
|
||||
}
|
||||
.dripicons-search:before {
|
||||
content: "\e041";
|
||||
}
|
||||
.dripicons-shopping-bag:before {
|
||||
content: "\e042";
|
||||
}
|
||||
.dripicons-skip:before {
|
||||
content: "\e043";
|
||||
}
|
||||
.dripicons-stack:before {
|
||||
content: "\e044";
|
||||
}
|
||||
.dripicons-star:before {
|
||||
content: "\e045";
|
||||
}
|
||||
.dripicons-stopwatch:before {
|
||||
content: "\e046";
|
||||
}
|
||||
.dripicons-store:before {
|
||||
content: "\e047";
|
||||
}
|
||||
.dripicons-suitcase:before {
|
||||
content: "\e048";
|
||||
}
|
||||
.dripicons-swap:before {
|
||||
content: "\e049";
|
||||
}
|
||||
.dripicons-tag:before {
|
||||
content: "\e04a";
|
||||
}
|
||||
.dripicons-tag-delete:before {
|
||||
content: "\e04b";
|
||||
}
|
||||
.dripicons-tags:before {
|
||||
content: "\e04c";
|
||||
}
|
||||
.dripicons-thumbs-down:before {
|
||||
content: "\e04d";
|
||||
}
|
||||
.dripicons-thumbs-up:before {
|
||||
content: "\e04e";
|
||||
}
|
||||
.dripicons-ticket:before {
|
||||
content: "\e04f";
|
||||
}
|
||||
.dripicons-time-reverse:before {
|
||||
content: "\e050";
|
||||
}
|
||||
.dripicons-to-do:before {
|
||||
content: "\e051";
|
||||
}
|
||||
.dripicons-toggles:before {
|
||||
content: "\e052";
|
||||
}
|
||||
.dripicons-trash:before {
|
||||
content: "\e053";
|
||||
}
|
||||
.dripicons-trophy:before {
|
||||
content: "\e054";
|
||||
}
|
||||
.dripicons-upload:before {
|
||||
content: "\e055";
|
||||
}
|
||||
.dripicons-user:before {
|
||||
content: "\e056";
|
||||
}
|
||||
.dripicons-user-group:before {
|
||||
content: "\e057";
|
||||
}
|
||||
.dripicons-user-id:before {
|
||||
content: "\e058";
|
||||
}
|
||||
.dripicons-vibrate:before {
|
||||
content: "\e059";
|
||||
}
|
||||
.dripicons-view-apps:before {
|
||||
content: "\e05a";
|
||||
}
|
||||
.dripicons-view-list:before {
|
||||
content: "\e05b";
|
||||
}
|
||||
.dripicons-view-list-large:before {
|
||||
content: "\e05c";
|
||||
}
|
||||
.dripicons-view-thumb:before {
|
||||
content: "\e05d";
|
||||
}
|
||||
.dripicons-volume-full:before {
|
||||
content: "\e05e";
|
||||
}
|
||||
.dripicons-volume-low:before {
|
||||
content: "\e05f";
|
||||
}
|
||||
.dripicons-volume-medium:before {
|
||||
content: "\e060";
|
||||
}
|
||||
.dripicons-volume-off:before {
|
||||
content: "\e061";
|
||||
}
|
||||
.dripicons-wallet:before {
|
||||
content: "\e062";
|
||||
}
|
||||
.dripicons-warning:before {
|
||||
content: "\e063";
|
||||
}
|
||||
.dripicons-web:before {
|
||||
content: "\e064";
|
||||
}
|
||||
.dripicons-weight:before {
|
||||
content: "\e065";
|
||||
}
|
||||
.dripicons-wifi:before {
|
||||
content: "\e066";
|
||||
}
|
||||
.dripicons-wrong:before {
|
||||
content: "\e067";
|
||||
}
|
||||
.dripicons-zoom-in:before {
|
||||
content: "\e068";
|
||||
}
|
||||
.dripicons-zoom-out:before {
|
||||
content: "\e069";
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
408
src/web-live-chat/src/lib/scss/custom/rtl/_bootstrap-rtl.scss
Normal file
408
src/web-live-chat/src/lib/scss/custom/rtl/_bootstrap-rtl.scss
Normal file
|
|
@ -0,0 +1,408 @@
|
|||
//
|
||||
// bootstrap-rtl.scss
|
||||
//
|
||||
|
||||
//alert
|
||||
.alert-dismissible{
|
||||
padding-left: $alert-dismissible-padding-r;
|
||||
padding-right: var(--#{$prefix}alert-padding-x);
|
||||
|
||||
.btn-close{
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// accordion
|
||||
.accordion-button::after{
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.breadcrumb-item {
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item {
|
||||
padding-left: 0;
|
||||
padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
|
||||
&::before {
|
||||
float: right; // Suppress inline spacings and underlining of the separator
|
||||
padding-right: 0;
|
||||
padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--#{$prefix}breadcrumb-item-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown
|
||||
|
||||
.dropdown-item{
|
||||
text-align: right;
|
||||
}
|
||||
.dropdown-toggle::after {
|
||||
margin-right: .255em;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
left: auto !important;
|
||||
right: 0 !important;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dropdown-menu-end[style]{
|
||||
right: auto !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-megamenu{
|
||||
&.show{
|
||||
left: 20px!important;
|
||||
}
|
||||
}
|
||||
|
||||
// List
|
||||
|
||||
ul {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list-inline-item:not(:last-child) {
|
||||
margin-left: $list-inline-padding;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
// border
|
||||
|
||||
.border-right {
|
||||
border-left: $border-width solid $border-color !important;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
border-right: $border-width solid $border-color !important;
|
||||
}
|
||||
|
||||
|
||||
//Buttons
|
||||
|
||||
//button with icon
|
||||
.btn-label {
|
||||
position: relative;
|
||||
padding-right: 44px;
|
||||
padding-left: $btn-padding-x;
|
||||
|
||||
.label-icon {
|
||||
left: auto;
|
||||
right: -$btn-border-width;
|
||||
border-right: 0;
|
||||
border-left: 1px solid rgba($white, 0.1);
|
||||
}
|
||||
|
||||
&.btn-light {
|
||||
.label-icon {
|
||||
background-color: rgba($dark, 0.1);
|
||||
border-right: 0;
|
||||
border-left: 1px solid rgba($dark, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group>:not(.btn-check)+.btn {
|
||||
border-radius: 0px;
|
||||
border-top-left-radius: $btn-border-radius;
|
||||
border-bottom-left-radius: $btn-border-radius;
|
||||
}
|
||||
|
||||
|
||||
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
|
||||
border-radius: 0px;
|
||||
border-top-right-radius: $btn-border-radius;
|
||||
border-bottom-right-radius: $btn-border-radius;
|
||||
}
|
||||
.btn-group >{
|
||||
.btn:nth-child(n+3),
|
||||
:not(.btn-check) + .btn,
|
||||
.btn-group:not(:first-child) > .btn {
|
||||
border-radius: 0px;
|
||||
border-top-left-radius: $btn-border-radius;
|
||||
border-bottom-left-radius: $btn-border-radius;
|
||||
}
|
||||
|
||||
:not(.btn-check:first-child) + .btn,
|
||||
.btn-group:not(:first-child) {
|
||||
margin-left: 0;
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
.btn-group-example{
|
||||
.btn:before{
|
||||
left: auto;
|
||||
right: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// list
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 0;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.list-unstyled{
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.list-inline-item {
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
margin-left: $list-inline-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-horizontal-md>.list-group-item:first-child {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.list-group-horizontal-md>.list-group-item:last-child {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.list-group-horizontal-md>.list-group-item+.list-group-item {
|
||||
border-top-width: 1px;
|
||||
border-right-width: 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.list-group-horizontal-md>.list-group-item+.list-group-item.active {
|
||||
margin-right: -1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&:not(:first-child) {
|
||||
.page-link {
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Nav
|
||||
|
||||
.nav{
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// modal
|
||||
.modal-open {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.modal{
|
||||
.btn-close{
|
||||
margin-right: auto !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// select
|
||||
.input-group-lg > .form-select, .input-group-sm > .form-select {
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
.form-select{
|
||||
padding: $form-select-padding-y $form-select-padding-x $form-select-padding-y $form-select-indicator-padding;
|
||||
background-position: left 0.75rem center;
|
||||
}
|
||||
|
||||
|
||||
// form-check
|
||||
.form-check{
|
||||
text-align: right;
|
||||
padding-right: $form-check-padding-start;
|
||||
padding-left: 0;
|
||||
.form-check-input {
|
||||
float: right;
|
||||
margin-left: 0;
|
||||
margin-right: $form-check-padding-start * -1;
|
||||
}
|
||||
|
||||
&.card-radio{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-floating {
|
||||
>label {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
> .form-control:focus,
|
||||
> .form-control:not(:placeholder-shown),
|
||||
> .form-control-plaintext,
|
||||
> .form-select {
|
||||
~ label {
|
||||
transform: scale(.85) translateY(-.5rem) translateX(-.15rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-right{
|
||||
text-align: left;
|
||||
padding-left: $form-check-padding-start;
|
||||
padding-right: 0;
|
||||
|
||||
.form-check-input{
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
margin-left: $form-check-padding-start * -1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-inline {
|
||||
margin-right: 0;
|
||||
margin-left: $form-check-inline-margin-end;
|
||||
}
|
||||
|
||||
.form-checkbox-outline .form-check-input:checked:after{
|
||||
right: -3px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
// form-switch
|
||||
.form-switch {
|
||||
padding-left: 0;
|
||||
padding-right: $form-switch-padding-start;
|
||||
.form-check-input{
|
||||
margin-left: 0;
|
||||
margin-right: $form-switch-padding-start * -1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch-md {
|
||||
padding-left: 0;
|
||||
padding-right: 2.5rem;
|
||||
.form-check-input {
|
||||
left: auto;
|
||||
right: -0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-switch-lg{
|
||||
padding-left: 0;
|
||||
padding-right: 2.75rem;
|
||||
.form-check-input {
|
||||
left: auto;
|
||||
right: -0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// position
|
||||
.start-0, .start-50, .start-100{
|
||||
&.translate-middle{
|
||||
transform: translate(50%, -50%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.start-0{
|
||||
right: 0%;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
.start-50{
|
||||
right: 50%;
|
||||
left: auto !important;
|
||||
&.translate-middle-x{
|
||||
transform: translateX(50%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.start-100{
|
||||
right: 100%;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
.end-50 {
|
||||
right: auto !important;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
// pagination
|
||||
|
||||
.pagination{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-item{
|
||||
&:first-child .page-link {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: var(--#{$prefix}pagination-border-radius);
|
||||
border-bottom-right-radius: var(--#{$prefix}pagination-border-radius);
|
||||
}
|
||||
|
||||
&:last-child .page-link {
|
||||
border-top-left-radius: var(--#{$prefix}pagination-border-radius);
|
||||
border-bottom-left-radius: var(--#{$prefix}pagination-border-radius);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// toast
|
||||
.toast-header {
|
||||
.btn-close {
|
||||
margin-left: calc(-.5 * var(--#{$prefix}toast-padding-x));
|
||||
margin-right: var(--#{$prefix}toast-padding-x);
|
||||
}
|
||||
}
|
||||
// ------------ FORM //
|
||||
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
&::placeholder {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bx-fade-left
|
||||
{
|
||||
animation: fade-right 1.5s infinite linear !important;
|
||||
}
|
||||
.bx-fade-left-hover:hover
|
||||
{
|
||||
animation: fade-right 1.5s infinite linear !important;
|
||||
}
|
||||
.bx-fade-right
|
||||
{
|
||||
animation: fade-left 1.5s infinite linear !important;
|
||||
}
|
||||
.bx-fade-right-hover:hover
|
||||
{
|
||||
animation: fade-left 1.5s infinite linear !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
//
|
||||
// components-rtl.scss
|
||||
//
|
||||
|
||||
|
||||
|
||||
// icons
|
||||
|
||||
.icon-list-demo{
|
||||
i{
|
||||
margin-left: 12px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Invoice
|
||||
|
||||
@media print {
|
||||
.content-page,
|
||||
.content,
|
||||
body {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Demos button
|
||||
.demos-show-btn {
|
||||
left: 0;
|
||||
right: auto;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: $border-radius !important;
|
||||
border-top-right-radius: $border-radius !important;
|
||||
}
|
||||
|
||||
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
|
||||
margin-right: -1px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
|
||||
// search-box
|
||||
|
||||
.search-box{
|
||||
.form-control{
|
||||
padding-right: 40px;
|
||||
padding-left: $input-padding-x;
|
||||
}
|
||||
.search-icon{
|
||||
left: auto;
|
||||
right: 13px;
|
||||
}
|
||||
}
|
||||
11
src/web-live-chat/src/lib/scss/custom/rtl/_float-rtl.scss
Normal file
11
src/web-live-chat/src/lib/scss/custom/rtl/_float-rtl.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.float#{$infix}-start { float: right !important; }
|
||||
.float#{$infix}-end { float: left !important; }
|
||||
.float#{$infix}-none { float: none !important; }
|
||||
}
|
||||
}
|
||||
11
src/web-live-chat/src/lib/scss/custom/rtl/_general-rtl.scss
Normal file
11
src/web-live-chat/src/lib/scss/custom/rtl/_general-rtl.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
//
|
||||
// general-rtl.scss
|
||||
//
|
||||
|
||||
html {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: right;
|
||||
}
|
||||
262
src/web-live-chat/src/lib/scss/custom/rtl/_pages-rtl.scss
Normal file
262
src/web-live-chat/src/lib/scss/custom/rtl/_pages-rtl.scss
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
//
|
||||
// pages-rtl.scss
|
||||
//
|
||||
|
||||
|
||||
// message
|
||||
|
||||
.message-list {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Auth
|
||||
|
||||
.wrapper .otp-input:not(:last-child) {
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// timeline
|
||||
|
||||
.verti-timeline {
|
||||
border-left: 0;
|
||||
border-right: 3px dashed $gray-300;
|
||||
|
||||
.event-list {
|
||||
padding: 0 30px 40px 0;
|
||||
|
||||
.event-timeline-dot {
|
||||
left: auto;
|
||||
right: -9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ecommerce
|
||||
|
||||
.product-ribbon {
|
||||
left: 0px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.visa-card {
|
||||
.visa-pattern {
|
||||
left: 0px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// email
|
||||
|
||||
.email-leftbar {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.email-rightbar {
|
||||
margin-right: 260px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
li {
|
||||
.col-mail {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.col-mail-1 {
|
||||
|
||||
.star-toggle,
|
||||
.checkbox-wrapper-mail,
|
||||
.dot {
|
||||
float: right
|
||||
}
|
||||
|
||||
.checkbox-wrapper-mail {
|
||||
margin: 15px 20px 0 10px;
|
||||
}
|
||||
|
||||
.star-toggle {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
right: 110px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.col-mail-2 {
|
||||
right: 320px;
|
||||
left: 0;
|
||||
|
||||
.subject {
|
||||
right: 0;
|
||||
left: 200px;
|
||||
}
|
||||
|
||||
.date {
|
||||
left: 0;
|
||||
right: auto;
|
||||
padding-right: 80px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-wrapper-mail {
|
||||
label {
|
||||
&:before {
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.email-leftbar {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.email-rightbar {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// authentication
|
||||
|
||||
.home-btn {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
|
||||
// file manager
|
||||
|
||||
.categories-list li ul {
|
||||
padding-right: 16px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Chat
|
||||
|
||||
.chat-conversation {
|
||||
.conversation-list {
|
||||
.dropdown {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ctext-wrap {
|
||||
border-radius: 8px 8px 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
float: left;
|
||||
|
||||
.conversation-list {
|
||||
.ctext-wrap {
|
||||
text-align: left;
|
||||
border-radius: 8px 8px 8px 0;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.last-chat .conversation-list:before {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding-left: 120px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.chat-input-links {
|
||||
right: auto;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.currency-value {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
right: auto;
|
||||
left: -34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// datatable icon
|
||||
.datatables {
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "\F0143";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: auto;
|
||||
top: 7px;
|
||||
font: normal normal normal 24px/1 "Material Design Icons";
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "\F0140";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: auto;
|
||||
top: 14px;
|
||||
opacity: 0.3;
|
||||
font: normal normal normal 24px/1 "Material Design Icons";
|
||||
}
|
||||
}
|
||||
|
||||
.asc {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// apex-cahrts
|
||||
.apexcharts-legend-marker {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
|
||||
.list-inline {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.customer-delete-modal {
|
||||
.modal-body {
|
||||
.btn-close {
|
||||
left: 0;
|
||||
padding: 0px 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
242
src/web-live-chat/src/lib/scss/custom/rtl/_plugins-rtl.scss
Normal file
242
src/web-live-chat/src/lib/scss/custom/rtl/_plugins-rtl.scss
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
//
|
||||
// plugins-rtl.scss
|
||||
//
|
||||
|
||||
// calendar
|
||||
|
||||
.lnb-calendars-item {
|
||||
margin-right: 0;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
input[type=checkbox].tui-full-calendar-checkbox-round+span {
|
||||
margin-right: 0px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.tui-full-calendar-time-schedule-content {
|
||||
padding: 1px 3px 0 0;
|
||||
}
|
||||
|
||||
// FLOT CHART
|
||||
|
||||
.legendLabel {
|
||||
padding-right: 5px !important;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
// Select 2
|
||||
.select2-container {
|
||||
.select2-selection--single {
|
||||
.select2-selection__rendered {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.select2-selection__arrow {
|
||||
left: 3px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
.select2-selection__choice {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-search__field {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.select2-search--inline {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap select
|
||||
|
||||
.bootstrap-select {
|
||||
.dropdown-toggle {
|
||||
&:before {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.filter-option-inner {
|
||||
padding-right: 0;
|
||||
padding-left: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// form validation
|
||||
.was-validated .form-control:invalid, .form-control.is-invalid,
|
||||
.was-validated .form-control:valid, .form-control.is-valid{
|
||||
padding-left: calc(1.5em + 0.94rem);
|
||||
padding-right: $input-padding-x;
|
||||
background-position: left calc(0.375em + 0.235rem) center;
|
||||
}
|
||||
|
||||
// datatable
|
||||
|
||||
.dataTables_wrapper {
|
||||
.dataTables_filter {
|
||||
text-align: left !important;
|
||||
|
||||
input {
|
||||
margin-left: 0px !important;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Foo table
|
||||
|
||||
.footable.breakpoint>tbody>tr>td>span.footable-toggle {
|
||||
padding-left: 5px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// tablesaw
|
||||
.tablesaw-columntoggle-popup {
|
||||
.tablesaw-btn-group {
|
||||
>label {
|
||||
input {
|
||||
margin-right: 0;
|
||||
margin-left: .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tablesaw-bar {
|
||||
.tablesaw-bar-section {
|
||||
.tablesaw-btn {
|
||||
margin-left: 0;
|
||||
margin-right: .4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Table
|
||||
|
||||
.table-rep-plugin {
|
||||
.btn-group.pull-right {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.checkbox-row {
|
||||
label {
|
||||
&:after {
|
||||
margin-left: -22px;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Parsley
|
||||
.parsley-errors-list {
|
||||
>li {
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* =============
|
||||
Form wizard
|
||||
============= */
|
||||
|
||||
.twitter-bs-wizard {
|
||||
.twitter-bs-wizard-nav {
|
||||
@media (min-width: 992px) {
|
||||
.nav-link {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.twitter-bs-wizard-pager-link {
|
||||
li.next {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aw-wizard-navigation-bar.horizontal.large-empty-symbols ul.steps-indicator li:not(:last-child):after{
|
||||
left: auto;
|
||||
right: calc(50% + 25px);
|
||||
}
|
||||
|
||||
|
||||
// X-ediatable
|
||||
|
||||
.editable-buttons {
|
||||
margin-left: 0;
|
||||
margin-right: 7px;
|
||||
|
||||
.editable-cancel {
|
||||
margin-left: 0;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// Floating
|
||||
|
||||
.form-floating {
|
||||
>label {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// editor
|
||||
|
||||
.ck.ck-toolbar>.ck-toolbar__items {
|
||||
flex-direction: row-reverse !important;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable_inline {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_ne,
|
||||
.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se {
|
||||
right: 0;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
/* =============
|
||||
Form wizard
|
||||
============= */
|
||||
|
||||
.wizard {
|
||||
> .steps {
|
||||
.number {
|
||||
margin-left: 10px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aw-wizard-navigation-bar.horizontal.large-empty-symbols ul.steps-indicator li:not(:last-child):before {
|
||||
left: -68px;
|
||||
}
|
||||
|
||||
.kycwizard {
|
||||
aw-wizard-navigation-bar.horizontal.large-empty-symbols ul.steps-indicator li:not(:last-child):before {
|
||||
left: -102px;
|
||||
}
|
||||
}
|
||||
|
||||
78
src/web-live-chat/src/lib/scss/custom/rtl/_spacing-rtl.scss
Normal file
78
src/web-live-chat/src/lib/scss/custom/rtl/_spacing-rtl.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Margin and Padding
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $length in $spacers {
|
||||
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
|
||||
.#{$abbrev}t#{$infix}-#{$size},
|
||||
.#{$abbrev}y#{$infix}-#{$size} {
|
||||
#{$prop}-top: $length !important;
|
||||
}
|
||||
.#{$abbrev}e#{$infix}-#{$size} {
|
||||
#{$prop}-left: $length !important;
|
||||
#{$prop}-right: 0 !important;
|
||||
}
|
||||
.#{$abbrev}b#{$infix}-#{$size},
|
||||
.#{$abbrev}y#{$infix}-#{$size} {
|
||||
#{$prop}-bottom: $length !important;
|
||||
}
|
||||
.#{$abbrev}s#{$infix}-#{$size} {
|
||||
#{$prop}-right: $length !important;
|
||||
#{$prop}-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
|
||||
@each $size, $length in $spacers {
|
||||
@if $size != 0 {
|
||||
.m#{$infix}-n#{$size} { margin: -$length !important; }
|
||||
.mt#{$infix}-n#{$size},
|
||||
.my#{$infix}-n#{$size} {
|
||||
margin-top: -$length !important;
|
||||
}
|
||||
.me#{$infix}-n#{$size},
|
||||
.mx#{$infix}-n#{$size} {
|
||||
margin-right: -$length !important;
|
||||
}
|
||||
.mb#{$infix}-n#{$size},
|
||||
.my#{$infix}-n#{$size} {
|
||||
margin-bottom: -$length !important;
|
||||
}
|
||||
.ms#{$infix}-n#{$size},
|
||||
.mx#{$infix}-n#{$size} {
|
||||
margin-left: -$length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Some special margin utils
|
||||
.m#{$infix}-auto { margin: auto !important; }
|
||||
.mt#{$infix}-auto,
|
||||
.my#{$infix}-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
.me#{$infix}-auto,
|
||||
.mx#{$infix}-auto {
|
||||
margin-left: auto !important;
|
||||
margin-right: inherit !important;
|
||||
}
|
||||
.mb#{$infix}-auto,
|
||||
.my#{$infix}-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.mx#{$infix}-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.ms#{$infix}-auto{
|
||||
margin-right: auto !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
284
src/web-live-chat/src/lib/scss/custom/rtl/_structure-rtl.scss
Normal file
284
src/web-live-chat/src/lib/scss/custom/rtl/_structure-rtl.scss
Normal file
|
|
@ -0,0 +1,284 @@
|
|||
//
|
||||
// structure-rtl.scss
|
||||
//
|
||||
|
||||
// topbar.scss
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 0 0 calc(#{$grid-gutter-width} / 2);
|
||||
}
|
||||
|
||||
.app-search{
|
||||
.form-control{
|
||||
padding-right: 40px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
span {
|
||||
left: auto;
|
||||
right: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.noti-icon {
|
||||
.badge {
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0px;
|
||||
margin-right: $sidebar-width;
|
||||
}
|
||||
|
||||
.footer {
|
||||
left: 0px;
|
||||
right: $sidebar-width;
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
|
||||
#sidebar-menu {
|
||||
.has-arrow {
|
||||
&:after {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
ul.sub-menu {
|
||||
li {
|
||||
a {
|
||||
padding: .4rem 3.5rem .4rem 1.5rem;
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
|
||||
li {
|
||||
a {
|
||||
padding: .4rem 4.5rem .4rem 1.5rem;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-collpsed {
|
||||
.main-content {
|
||||
margin-left: 0px;
|
||||
margin-right: $sidebar-collapsed-width;
|
||||
}
|
||||
|
||||
.footer {
|
||||
left: 0px;
|
||||
right: $sidebar-collapsed-width;
|
||||
}
|
||||
|
||||
.vertical-menu {
|
||||
#sidebar-menu {
|
||||
>ul {
|
||||
>li {
|
||||
>a {
|
||||
i {
|
||||
margin-left: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-right: 25px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
>ul {
|
||||
left: 0;
|
||||
right: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li:hover>ul {
|
||||
left: auto;
|
||||
right: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.main-content {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// right-sidebar.scss
|
||||
//
|
||||
|
||||
.right-bar {
|
||||
float: left !important;
|
||||
left: -($rightbar-width + 10px);
|
||||
right: auto;
|
||||
|
||||
.user-box {
|
||||
.user-img {
|
||||
.user-edit {
|
||||
right: 0;
|
||||
left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-bar-enabled {
|
||||
.right-bar {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Compact sidebar
|
||||
|
||||
body[data-sidebar-size=small] {
|
||||
#sidebar-menu {
|
||||
ul {
|
||||
li {
|
||||
ul.sub-menu {
|
||||
li {
|
||||
a {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
|
||||
li {
|
||||
a {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-collpsed {
|
||||
.vertical-menu {
|
||||
#sidebar-menu {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
margin-right: $sidebar-collapsed-width;
|
||||
}
|
||||
|
||||
body[data-sidebar-size=small].vertical-collpsed .footer {
|
||||
left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-right: $sidebar-width-sm;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal layout
|
||||
|
||||
body[data-layout=horizontal] {
|
||||
.main-content {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.topnav {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
&:first-of-type {
|
||||
.nav-link {
|
||||
padding-left: 1.3rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
right: 0px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
&:after {
|
||||
margin-left: 0px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.dropdown-menu {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.topnav {
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
.arrow-down::after {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
transform: rotate(45deg) translateY(-50%);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
right: 100% !important;
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.topnav {
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
padding-left: 0px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topnav-menu{
|
||||
.navbar-nav{
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
18
src/web-live-chat/src/lib/scss/custom/rtl/_text-rtl.scss
Normal file
18
src/web-live-chat/src/lib/scss/custom/rtl/_text-rtl.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
//
|
||||
// Text
|
||||
//
|
||||
|
||||
|
||||
// Responsive alignment
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.text#{$infix}-start { text-align: right !important; }
|
||||
.text#{$infix}-end { text-align: left !important; }
|
||||
.text#{$infix}-center { text-align: center !important; }
|
||||
}
|
||||
}
|
||||
35
src/web-live-chat/src/lib/scss/custom/structure/_footer.scss
Normal file
35
src/web-live-chat/src/lib/scss/custom/structure/_footer.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
//
|
||||
// _footer.scss
|
||||
//
|
||||
|
||||
.footer {
|
||||
bottom: 0;
|
||||
padding: 20px calc(#{$grid-gutter-width} * 0.75);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: var(--#{$prefix}footer-color);
|
||||
left: 250px;
|
||||
height: $footer-height;
|
||||
background-color: var(--#{$prefix}footer-bg);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Enlarge menu
|
||||
.vertical-collpsed {
|
||||
.footer {
|
||||
left: $sidebar-collapsed-width;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[data-layout="horizontal"] {
|
||||
.footer {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,347 @@
|
|||
//
|
||||
// _horizontal.scss
|
||||
//
|
||||
|
||||
.topnav {
|
||||
background: var(--#{$prefix}topnav-bg);
|
||||
padding: 0 calc(#{$grid-gutter-width} * 0.5);
|
||||
box-shadow: $box-shadow;
|
||||
margin-top: $header-height;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
|
||||
.topnav-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
|
||||
.nav-link {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
padding: 1rem 1.3rem;
|
||||
color: var(--#{$prefix}menu-item-color);
|
||||
i{
|
||||
font-size: 15px;
|
||||
}
|
||||
&:focus, &:hover{
|
||||
color: var(--#{$prefix}menu-item-active-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item{
|
||||
color: var(--#{$prefix}menu-item-color);
|
||||
&.active, &:hover{
|
||||
color: var(--#{$prefix}menu-item-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item{
|
||||
.nav-link.active{
|
||||
color: var(--#{$prefix}menu-item-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
&.active{
|
||||
>a {
|
||||
color: var(--#{$prefix}menu-item-active-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
|
||||
body[data-layout="horizontal"] {
|
||||
.container-fluid,
|
||||
.navbar-header {
|
||||
max-width: 85%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.topnav {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
&:first-of-type {
|
||||
.nav-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: .5rem 1.5rem;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
&.mega-dropdown{
|
||||
// position: static;
|
||||
.mega-dropdown-menu{
|
||||
left: 0px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
border-radius: 0 0 $dropdown-border-radius $dropdown-border-radius;
|
||||
|
||||
.arrow-down {
|
||||
&::after {
|
||||
right: 15px;
|
||||
transform: rotate(-135deg) translateY(-50%);
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
left: 100%;
|
||||
display: none
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
>.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:hover>.dropdown-menu>.dropdown:hover>.dropdown-menu {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
display: inline-block;
|
||||
|
||||
&:after {
|
||||
border-color: initial;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 1px;
|
||||
content: "";
|
||||
height: .4em;
|
||||
display: inline-block;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
margin-left: 10px;
|
||||
transform: rotate(-45deg) translateY(-50%);
|
||||
transform-origin: top;
|
||||
transition: all .3s ease-out;
|
||||
width: .4em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.topnav-menu {
|
||||
.navbar-nav {
|
||||
li {
|
||||
&:last-of-type {
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
.navbar-brand-box{
|
||||
.logo-dark {
|
||||
display: var(--#{$prefix}display-block);
|
||||
span.logo-sm{
|
||||
display: var(--#{$prefix}display-block);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: var(--#{$prefix}display-none);
|
||||
}
|
||||
}
|
||||
|
||||
.topnav {
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
padding: 0.75rem 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-menu {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding-left: 15px;
|
||||
&.dropdown-mega-menu-xl{
|
||||
width: auto;
|
||||
|
||||
.row{
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
&::after {
|
||||
right: 15px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
||||
body[data-layout="horizontal"][data-topbar="light"] {
|
||||
.navbar-brand-box{
|
||||
.logo-dark {
|
||||
display: var(--#{$prefix}display-block);
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: var(--#{$prefix}display-none);
|
||||
}
|
||||
}
|
||||
|
||||
.topnav{
|
||||
background-color: $primary;
|
||||
.navbar-nav {
|
||||
|
||||
.nav-link {
|
||||
color: rgba($white, 0.6);
|
||||
|
||||
&:focus, &:hover{
|
||||
color: rgba($white, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown{
|
||||
&.active{
|
||||
>a {
|
||||
color: rgba($white, 0.9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Colored Topbar
|
||||
|
||||
body[data-layout="horizontal"][data-topbar="colored"] {
|
||||
#page-topbar{
|
||||
background-color: $primary;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-search {
|
||||
|
||||
.form-control {
|
||||
background-color: rgba(var(--#{$prefix}topbar-search-bg),0.07);
|
||||
color: $white;
|
||||
}
|
||||
span,
|
||||
input.form-control::-webkit-input-placeholder {
|
||||
color: rgba($white,0.5);
|
||||
}
|
||||
}
|
||||
.header-item {
|
||||
color: var(--#{$prefix}header-dark-item-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}header-dark-item-color);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
.dropdown .show {
|
||||
&.header-item{
|
||||
background-color: rgba($white,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.waves-effect .waves-ripple {
|
||||
background: rgba($white, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.noti-icon {
|
||||
i {
|
||||
color: var(--#{$prefix}header-dark-item-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.topnav{
|
||||
background-color: $primary;
|
||||
.navbar-nav {
|
||||
|
||||
.nav-link {
|
||||
color: rgba($white, 0.6);
|
||||
|
||||
&:focus, &:hover{
|
||||
color: rgba($white, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown{
|
||||
&.active{
|
||||
>a {
|
||||
color: rgba($white, 0.9) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
//
|
||||
// _layouts.scss
|
||||
//
|
||||
|
||||
body[data-layout-size="boxed"] {
|
||||
background-color: var(--#{$prefix}boxed-body-bg);
|
||||
#layout-wrapper {
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
max-width: $boxed-layout-width;
|
||||
margin: 0 auto;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
#page-topbar {
|
||||
max-width: $boxed-layout-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin: 0 auto;
|
||||
max-width: calc(#{$boxed-layout-width} - #{$sidebar-width});
|
||||
}
|
||||
|
||||
&.vertical-collpsed {
|
||||
.footer {
|
||||
max-width: calc(#{$boxed-layout-width} - #{$sidebar-collapsed-width});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Horizontal Boxed Layout
|
||||
|
||||
body[data-layout="horizontal"][data-layout-size="boxed"]{
|
||||
#page-topbar, #layout-wrapper, .footer {
|
||||
max-width: 100%;
|
||||
}
|
||||
.container-fluid, .navbar-header {
|
||||
max-width: $boxed-layout-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Scrollable layout
|
||||
|
||||
body[data-layout-scrollable="true"] {
|
||||
@media (min-width: 992px) {
|
||||
#page-topbar, .vertical-menu{
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="horizontal"]{
|
||||
@media (min-width: 992px) {
|
||||
#page-topbar, .topnav{
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
//
|
||||
// Page-title
|
||||
//
|
||||
|
||||
.page-title-box {
|
||||
padding-bottom: $grid-gutter-width;
|
||||
|
||||
.breadcrumb {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
//
|
||||
// right-sidebar.scss
|
||||
//
|
||||
|
||||
.right-bar {
|
||||
background-color: var(--#{$prefix}secondary-bg);
|
||||
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
|
||||
display: block;
|
||||
position: fixed;
|
||||
transition: all 200ms ease-out;
|
||||
width: $rightbar-width;
|
||||
z-index: 9999;
|
||||
float: right !important;
|
||||
right: -($rightbar-width + 10px);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
.right-bar-toggle {
|
||||
background-color: var(--#{$prefix}dark);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
line-height: 24px;
|
||||
display: block;
|
||||
color: var(--#{$prefix}gray-200);
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--#{$prefix}dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Rightbar overlay
|
||||
.rightbar-overlay {
|
||||
background-color: rgba($dark, 0.55);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
z-index: 9998;
|
||||
transition: all .2s ease-out;
|
||||
}
|
||||
|
||||
.right-bar-enabled {
|
||||
.right-bar {
|
||||
right: 0;
|
||||
}
|
||||
.rightbar-overlay {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.right-bar {
|
||||
overflow: auto;
|
||||
.slimscroll-menu {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
289
src/web-live-chat/src/lib/scss/custom/structure/_topbar.scss
Normal file
289
src/web-live-chat/src/lib/scss/custom/structure/_topbar.scss
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
//
|
||||
// _header.scss
|
||||
//
|
||||
|
||||
#page-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1002;
|
||||
background-color: var(--#{$prefix}header-bg);
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
display: flex;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
height: $header-height;
|
||||
padding: 0 calc(#{$grid-gutter-width} * 0.5) 0 0 /*rtl: 0 0 0 calc(#{$grid-gutter-width} / 2) */;
|
||||
|
||||
.dropdown .show {
|
||||
&.header-item {
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
padding: 0 1.5rem;
|
||||
text-align: center;
|
||||
width: $navbar-brand-box-width;
|
||||
}
|
||||
|
||||
.logo {
|
||||
line-height: 70px;
|
||||
|
||||
.logo-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
.app-search {
|
||||
padding: calc(#{$header-height - 38px} * 0.5) 0;
|
||||
|
||||
.form-control {
|
||||
border: none;
|
||||
height: 38px;
|
||||
padding-left: 40px;
|
||||
padding-right: 20px;
|
||||
background-color: var(--#{$prefix}topbar-search-bg);
|
||||
box-shadow: none;
|
||||
border-radius: 30px;
|
||||
}
|
||||
span {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
font-size: 16px;
|
||||
line-height: 38px;
|
||||
left: 13px;
|
||||
top: 0;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Mega menu
|
||||
|
||||
.megamenu-list {
|
||||
li{
|
||||
position: relative;
|
||||
padding: 5px 0px;
|
||||
a{
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.navbar-brand-box {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
span.logo-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.logo-sm {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: calc(#{$header-height} + #{$grid-gutter-width}) calc(#{$grid-gutter-width} * 0.75) $footer-height calc(#{$grid-gutter-width} * 0.75);
|
||||
}
|
||||
|
||||
.header-item {
|
||||
height: $header-height;
|
||||
box-shadow: none !important;
|
||||
color: var(--#{$prefix}header-item-color);
|
||||
border: 0;
|
||||
border-radius: 0px;
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}header-item-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-profile-user {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.noti-icon {
|
||||
i {
|
||||
font-size: 22px;
|
||||
color: var(--#{$prefix}header-item-color);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
.d-flex {
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--#{$prefix}tertiary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown with Icons
|
||||
.dropdown-icon-item {
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
padding: 15px 0 9px;
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
|
||||
img {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Full Screen
|
||||
.fullscreen-enable {
|
||||
[data-bs-toggle="fullscreen"] {
|
||||
.bx-fullscreen::before {
|
||||
content: "\ea3f";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[data-topbar="dark"] {
|
||||
#page-topbar {
|
||||
background-color: var(--#{$prefix}header-dark-bg);
|
||||
}
|
||||
.navbar-header {
|
||||
.dropdown .show {
|
||||
&.header-item {
|
||||
background-color: rgba($white, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.waves-effect .waves-ripple {
|
||||
background: rgba($white, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.header-item {
|
||||
color: var(--#{$prefix}header-dark-item-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}header-dark-item-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-profile-user {
|
||||
background-color: rgba($white, 0.25);
|
||||
}
|
||||
|
||||
.noti-icon {
|
||||
i {
|
||||
color: var(--#{$prefix}header-dark-item-color);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-search {
|
||||
|
||||
.form-control {
|
||||
background-color: rgba(var(--#{$prefix}topbar-search-bg),0.07);
|
||||
color: $white;
|
||||
}
|
||||
span,
|
||||
input.form-control::-webkit-input-placeholder {
|
||||
color: rgba($white,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[data-sidebar="dark"] {
|
||||
.navbar-brand-box {
|
||||
background: $sidebar-dark-bg;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navbar-header {
|
||||
.dropdown {
|
||||
position: static;
|
||||
|
||||
.dropdown-menu {
|
||||
left: 10px !important;
|
||||
right: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.navbar-brand-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body[data-layout="horizontal"] {
|
||||
.navbar-brand-box {
|
||||
width: auto;
|
||||
}
|
||||
.page-content {
|
||||
margin-top: $header-height;
|
||||
padding: calc(55px + #{$grid-gutter-width}) calc(#{$grid-gutter-width} * 0.5) $footer-height calc(#{$grid-gutter-width} * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
body[data-layout="horizontal"] {
|
||||
.page-content {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
717
src/web-live-chat/src/lib/scss/custom/structure/_vertical.scss
Normal file
717
src/web-live-chat/src/lib/scss/custom/structure/_vertical.scss
Normal file
|
|
@ -0,0 +1,717 @@
|
|||
//
|
||||
// _menu.scss
|
||||
//
|
||||
|
||||
.metismenu {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mm-collapse {
|
||||
display: none;
|
||||
|
||||
&:not(.mm-show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mm-show {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.mm-collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: .35s;
|
||||
transition-property: height, visibility;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vertical-menu {
|
||||
width: $sidebar-width;
|
||||
z-index: 1001;
|
||||
background: $sidebar-bg;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
position: fixed;
|
||||
top: $header-height;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
padding: 0 15px 10px 15px;
|
||||
margin-top: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#sidebar-menu {
|
||||
padding: 10px 0 30px 0;
|
||||
|
||||
.mm-active {
|
||||
>.has-arrow {
|
||||
&:after {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-arrow {
|
||||
&:after {
|
||||
content: "\F0140";
|
||||
font-family: 'Material Design Icons';
|
||||
display: block;
|
||||
float: right;
|
||||
transition: transform .2s;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
padding: .625rem 1.5rem;
|
||||
color: $sidebar-menu-item-color;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
transition: all .4s;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
min-width: 1.75rem;
|
||||
padding-bottom: .125em;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.40625rem;
|
||||
vertical-align: middle;
|
||||
color: $sidebar-menu-item-icon-color;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-menu-item-hover-color;
|
||||
|
||||
i {
|
||||
color: $sidebar-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
|
||||
a {
|
||||
padding: .4rem 1.5rem .4rem 3.5rem;
|
||||
font-size: 13px;
|
||||
color: $sidebar-menu-sub-item-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
a {
|
||||
padding: .4rem 1.5rem .4rem 4.5rem;
|
||||
font-size: 13px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
padding: 12px 20px !important;
|
||||
letter-spacing: .05em;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: $sidebar-menu-item-icon-color;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.mm-active {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
|
||||
>a {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
|
||||
i {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
|
||||
i {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
>i {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.vertical-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
body.sidebar-enable {
|
||||
.vertical-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Enlarge menu
|
||||
.vertical-collpsed {
|
||||
|
||||
.main-content {
|
||||
margin-left: $sidebar-collapsed-width;
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
width: $sidebar-collapsed-width !important;
|
||||
}
|
||||
|
||||
.logo {
|
||||
span.logo-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.logo-sm {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Side menu
|
||||
.vertical-menu {
|
||||
position: absolute;
|
||||
width: $sidebar-collapsed-width !important;
|
||||
z-index: 5;
|
||||
|
||||
.simplebar-mask,
|
||||
.simplebar-content-wrapper {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.simplebar-scrollbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.simplebar-offset {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
// Sidebar Menu
|
||||
#sidebar-menu {
|
||||
|
||||
.menu-title,
|
||||
.badge,
|
||||
.collapse.in {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav.collapse {
|
||||
height: inherit !important;
|
||||
}
|
||||
|
||||
.has-arrow {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
>ul {
|
||||
>li {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
>a {
|
||||
padding: 15px 20px;
|
||||
min-height: 55px;
|
||||
transition: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $sidebar-menu-item-hover-color;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.45rem;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
>a {
|
||||
position: relative;
|
||||
width: calc(190px + #{$sidebar-collapsed-width});
|
||||
color: $primary;
|
||||
background-color: darken($sidebar-bg, 4%);
|
||||
transition: none;
|
||||
|
||||
i {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
>ul {
|
||||
display: block;
|
||||
left: $sidebar-collapsed-width;
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
height: auto !important;
|
||||
box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1);
|
||||
|
||||
ul {
|
||||
box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1);
|
||||
}
|
||||
|
||||
a {
|
||||
box-shadow: none;
|
||||
padding: 8px 20px;
|
||||
position: relative;
|
||||
width: 190px;
|
||||
z-index: 6;
|
||||
color: $sidebar-menu-sub-item-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 5px 0;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
background-color: $sidebar-bg;
|
||||
|
||||
li {
|
||||
&:hover {
|
||||
>ul {
|
||||
display: block;
|
||||
left: 190px;
|
||||
height: auto !important;
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
>a {
|
||||
span.pull-right {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 12px;
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
a {
|
||||
color: $gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body[data-sidebar="dark"] {
|
||||
.vertical-menu {
|
||||
background: $sidebar-dark-bg;
|
||||
}
|
||||
|
||||
#sidebar-menu {
|
||||
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
color: $sidebar-dark-menu-item-color;
|
||||
|
||||
i {
|
||||
color: $sidebar-dark-menu-item-icon-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
|
||||
i {
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
li {
|
||||
|
||||
a {
|
||||
color: $sidebar-dark-menu-sub-item-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Enlarge menu
|
||||
&.vertical-collpsed {
|
||||
min-height: 1760px;
|
||||
|
||||
// Side menu
|
||||
.vertical-menu {
|
||||
|
||||
// Sidebar Menu
|
||||
#sidebar-menu {
|
||||
|
||||
>ul {
|
||||
>li {
|
||||
|
||||
&:hover {
|
||||
>a {
|
||||
background: lighten($sidebar-dark-bg, 2%);
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
|
||||
i {
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
>ul {
|
||||
a {
|
||||
color: $sidebar-dark-menu-sub-item-color;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-dark-menu-item-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
background-color: $sidebar-dark-bg;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
&.mm-active .active {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
|
||||
i {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mm-active {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
|
||||
>a {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
|
||||
i {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
>i {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
|
||||
i {
|
||||
color: $sidebar-dark-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
color: $sidebar-dark-menu-item-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body[data-layout="horizontal"] {
|
||||
.main-content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Compact Sidebar
|
||||
|
||||
body[data-sidebar-size="small"] {
|
||||
.navbar-brand-box {
|
||||
width: $sidebar-width-sm;
|
||||
}
|
||||
|
||||
.vertical-menu {
|
||||
width: $sidebar-width-sm;
|
||||
text-align: center;
|
||||
|
||||
.has-arrow:after,
|
||||
.badge {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: $sidebar-width-sm;
|
||||
}
|
||||
|
||||
.footer {
|
||||
left: $sidebar-width-sm;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-menu {
|
||||
ul li {
|
||||
&.menu-title {
|
||||
background-color: lighten($sidebar-dark-bg, 2%);
|
||||
}
|
||||
|
||||
a {
|
||||
i {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
li {
|
||||
a {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
ul.sub-menu li a {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-collpsed {
|
||||
.main-content {
|
||||
margin-left: $sidebar-collapsed-width;
|
||||
}
|
||||
|
||||
.vertical-menu {
|
||||
#sidebar-menu {
|
||||
text-align: left;
|
||||
|
||||
>ul {
|
||||
>li {
|
||||
>a {
|
||||
i {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
left: $sidebar-collapsed-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// colored sidebar
|
||||
|
||||
body[data-sidebar="colored"] {
|
||||
.vertical-menu {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.navbar-brand-box {
|
||||
background-color: $primary;
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mm-active {
|
||||
color: $white !important;
|
||||
|
||||
>a {
|
||||
color: $white !important;
|
||||
|
||||
i {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
>i,
|
||||
.active {
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-menu {
|
||||
ul {
|
||||
li {
|
||||
&.menu-title {
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba($white, 0.6);
|
||||
|
||||
i {
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
li {
|
||||
a {
|
||||
color: rgba($white, .5);
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-collpsed {
|
||||
.vertical-menu {
|
||||
#sidebar-menu {
|
||||
>ul {
|
||||
>li {
|
||||
&:hover>a {
|
||||
background-color: lighten($primary, 2%);
|
||||
color: $white;
|
||||
display: block;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
&.mm-active {
|
||||
.active {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
color: $sidebar-menu-item-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.mm-active {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
|
||||
>a {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
|
||||
i {
|
||||
color: $sidebar-menu-item-active-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/web-live-chat/src/lib/scss/icons.scss
Normal file
11
src/web-live-chat/src/lib/scss/icons.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/*
|
||||
Template Name: Skote - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Version: 4.1.0.
|
||||
Website: https://themesbrand.com/
|
||||
Contact: themesbrand@gmail.com
|
||||
File: Icons Css File
|
||||
*/
|
||||
|
||||
// Plugins
|
||||
@import "custom/plugins/icons";
|
||||
21
src/web-live-chat/src/lib/services/api-endpoints.js
Normal file
21
src/web-live-chat/src/lib/services/api-endpoints.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
const host = 'http://localhost:5500';
|
||||
|
||||
// user
|
||||
export const tokenUrl = `${host}/token`;
|
||||
export const usrCreationUrl = `${host}/user`;
|
||||
|
||||
// plugin
|
||||
export const pluginListUrl = `${host}/plugins`;
|
||||
|
||||
// agent
|
||||
export const agentListUrl = `${host}/agents`;
|
||||
export const agentDetailUrl = `${host}/agent/{id}`;
|
||||
|
||||
// conversation
|
||||
export const conversationInitUrl = `${host}/conversation/{agentId}`
|
||||
export const conversationMessageUrl = `${host}/conversation/{agentId}/{conversationId}`
|
||||
export const conversationsUrl = `${host}/conversations/{agentId}`
|
||||
export const dialogsUrl = `${host}/conversation/{conversationId}/dialogs`
|
||||
|
||||
// chathub
|
||||
export const chatHubUrl = `${host}/chatHub`;
|
||||
69
src/web-live-chat/src/lib/services/auth-service.js
Normal file
69
src/web-live-chat/src/lib/services/auth-service.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import { userStore, getUserStore } from '$lib/helpers/store.js';
|
||||
import { tokenUrl, usrCreationUrl } from './api-endpoints.js';
|
||||
|
||||
/**
|
||||
* This callback type is called `requestCallback` and is displayed as a global symbol.
|
||||
*
|
||||
* @callback loginSucceed
|
||||
* @param {string} token
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {string} email
|
||||
* @param {string} password
|
||||
* @param {loginSucceed} onSucceed
|
||||
*/
|
||||
export async function getToken(email, password, onSucceed) {
|
||||
const credentials = btoa(`${email}:${password}`);
|
||||
const headers = {
|
||||
Authorization: `Basic ${credentials}`,
|
||||
};
|
||||
|
||||
await fetch(tokenUrl, {
|
||||
method: 'POST',
|
||||
headers: headers,
|
||||
}).then(response => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
} else {
|
||||
alert(response.statusText);
|
||||
}
|
||||
}).then(result => {
|
||||
let user = getUserStore();
|
||||
userStore.set({ ...user, init: false, loggedIn: true, email, token: result.access_token });
|
||||
onSucceed(result.access_token);
|
||||
})
|
||||
.catch(error => alert(error.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} firstName
|
||||
* @param {string} lastName
|
||||
* @param {string} email
|
||||
* @param {string} password
|
||||
* @param {function} onSucceed()
|
||||
*/
|
||||
export async function register(firstName, lastName, email, password, onSucceed) {
|
||||
let data = JSON.stringify({
|
||||
firstName,
|
||||
lastName,
|
||||
email,
|
||||
password
|
||||
});
|
||||
|
||||
await fetch(usrCreationUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: data
|
||||
})
|
||||
.then(result => {
|
||||
if (result.ok) {
|
||||
onSucceed();
|
||||
} else {
|
||||
alert(result.statusText);
|
||||
}
|
||||
})
|
||||
.catch(error => alert(error.message));
|
||||
}
|
||||
44
src/web-live-chat/src/lib/services/conversation-service.js
Normal file
44
src/web-live-chat/src/lib/services/conversation-service.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import {
|
||||
conversationInitUrl,
|
||||
conversationMessageUrl,
|
||||
dialogsUrl,
|
||||
} from './api-endpoints.js';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
/**
|
||||
* New conversation
|
||||
* @param {string} agentId
|
||||
* @returns {Promise<import('$typedefs').ConversationModel>}
|
||||
*/
|
||||
export async function newConversation(agentId) {
|
||||
let url = conversationInitUrl.replace("{agentId}", agentId);
|
||||
const response = await axios.post(url, {});
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get dialog history
|
||||
* @param {string} conversationId
|
||||
* @returns {Promise<import('$typedefs').ChatResponseModel[]>}
|
||||
*/
|
||||
export async function GetDialogs(conversationId) {
|
||||
let url = dialogsUrl.replace("{conversationId}", conversationId);
|
||||
const response = await axios.get(url);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
// send a message to the hub
|
||||
/**
|
||||
* @param {string} agentId The agent id
|
||||
* @param {string} conversationId The conversation id
|
||||
* @param {string} message The text message sent to CSR
|
||||
*/
|
||||
export async function sendMessageToHub(agentId, conversationId, message) {
|
||||
let url = conversationMessageUrl.replace("{agentId}", agentId)
|
||||
.replace("{conversationId}", conversationId);
|
||||
const response = await axios.post(url, {
|
||||
"text": message
|
||||
});
|
||||
return response.data;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue