init
1
.env.development
Normal file
@ -0,0 +1 @@
|
||||
NEXT_PUBLIC_API_URL='https://api-silos-kpr.basys.co.id'
|
1
.env.production
Normal file
@ -0,0 +1 @@
|
||||
NEXT_PUBLIC_API_URL='https://api-silos-kpr.basys.co.id'
|
36
.gitignore
vendored
Normal file
@ -0,0 +1,36 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
.yarn/install-state.gz
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
5
.idea/.gitignore
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
12
.idea/command-center.iml
generated
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
8
.idea/modules.xml
generated
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/command-center.iml" filepath="$PROJECT_DIR$/.idea/command-center.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
6
.idea/vcs.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
36
README.md
Normal file
@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
7
jsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
40
next.config.js
Normal file
@ -0,0 +1,40 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: false,
|
||||
output: 'export',
|
||||
images: {
|
||||
// unoptimized: true,
|
||||
loader: "custom",
|
||||
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
|
||||
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
|
||||
},
|
||||
transpilePackages: ["next-image-export-optimizer"],
|
||||
env: {
|
||||
nextImageExportOptimizer_imageFolderPath: "public/images",
|
||||
nextImageExportOptimizer_exportFolderPath: "out",
|
||||
nextImageExportOptimizer_quality: "75",
|
||||
nextImageExportOptimizer_storePicturesInWEBP: "true",
|
||||
nextImageExportOptimizer_exportFolderName: "nextImageExportOptimizer",
|
||||
nextImageExportOptimizer_generateAndUseBlurImages: "true",
|
||||
nextImageExportOptimizer_remoteImageCacheTTL: "0",
|
||||
},
|
||||
async redirects() {
|
||||
return [
|
||||
{
|
||||
source: '/:path*.txt',
|
||||
destination: '/404', // or any other path
|
||||
permanent: false,
|
||||
},
|
||||
];
|
||||
},
|
||||
}
|
||||
|
||||
const withPWA = require('next-pwa')({
|
||||
dest: 'public',
|
||||
register: true,
|
||||
skipWaiting: true,
|
||||
});
|
||||
|
||||
module.exports = withPWA(nextConfig);
|
||||
|
||||
|
9748
package-lock.json
generated
Normal file
41
package.json
Normal file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "command-center",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.3.0",
|
||||
"@material/dialog": "^14.0.0",
|
||||
"@material/ripple": "^14.0.0",
|
||||
"antd": "^5.12.5",
|
||||
"apexcharts": "^3.49.1",
|
||||
"cookies-next": "^4.1.1",
|
||||
"dayjs": "^1.11.10",
|
||||
"docxtemplater": "^3.40.0",
|
||||
"exceljs": "^4.4.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"firebase": "^10.13.2",
|
||||
"framer-motion": "^10.16.4",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jspdf": "^2.5.1",
|
||||
"jspdf-autotable": "^3.8.2",
|
||||
"next": "14.2.8",
|
||||
"next-image-export-optimizer": "^1.12.3",
|
||||
"next-pwa": "^5.6.0",
|
||||
"nextjs-toploader": "^1.6.6",
|
||||
"react": "^18",
|
||||
"react-apexcharts": "^1.4.1",
|
||||
"react-dom": "^18",
|
||||
"react-hook-form": "^7.45.4",
|
||||
"react-query": "^3.39.3",
|
||||
"sass": "^1.77.8",
|
||||
"styled-components": "^5.3.9",
|
||||
"uuid": "^10.0.0",
|
||||
"zustand": "^4.4.7"
|
||||
}
|
||||
}
|
166
public/css/button.scss
Normal file
@ -0,0 +1,166 @@
|
||||
|
||||
.btn.btn-primary {
|
||||
color: var(--primary-inverse);
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.btn.btn-light-primary {
|
||||
color: var(--primary);
|
||||
border-color: var(--primary-light);
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.btn.btn-success {
|
||||
color: var(--success-inverse);
|
||||
border-color: var(--success);
|
||||
background-color: var(--success);
|
||||
}
|
||||
|
||||
.btn.btn-light-success {
|
||||
color: var(--success);
|
||||
border-color: var(--success-light);
|
||||
background-color: var(--success-light);
|
||||
}
|
||||
|
||||
.btn.btn-danger {
|
||||
color: var(--danger-inverse);
|
||||
border-color: var(--danger);
|
||||
background-color: var(--danger);
|
||||
}
|
||||
|
||||
.btn.btn-light-danger {
|
||||
color: var(--danger);
|
||||
border-color: var(--danger-light);
|
||||
background-color: var(--danger-light);
|
||||
}
|
||||
|
||||
.btn.btn-warning {
|
||||
color: var(--warning-inverse);
|
||||
border-color: var(--warning);
|
||||
background-color: var(--warning);
|
||||
}
|
||||
|
||||
.btn.btn-light-warning {
|
||||
color: var(--warning);
|
||||
border-color: var(--warning-light);
|
||||
background-color: var(--warning-light);
|
||||
}
|
||||
|
||||
.btn.btn-info {
|
||||
color: var(--info-inverse);
|
||||
border-color: var(--info);
|
||||
background-color: var(--info);
|
||||
}
|
||||
|
||||
.btn.btn-light-info {
|
||||
color: var(--info);
|
||||
border-color: var(--info-light);
|
||||
background-color: var(--info-light);
|
||||
}
|
||||
|
||||
.btn.btn-dark {
|
||||
color: var(--dark-inverse);
|
||||
border-color: var(--dark);
|
||||
background-color: var(--dark);
|
||||
}
|
||||
|
||||
.btn.btn-light-dark {
|
||||
color: var(--dark);
|
||||
border-color: var(--dark-light);
|
||||
background-color: var(--dark-light);
|
||||
}
|
||||
|
||||
.btn.btn-white {
|
||||
color: var(--white-inverse);
|
||||
border-color: var(--white);
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.btn.btn-light-white {
|
||||
color: var(--white);
|
||||
border-color: var(--white-light);
|
||||
background-color: var(--white-light);
|
||||
}
|
||||
|
||||
.btn.btn-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
background: #ffffff00;
|
||||
color: white;
|
||||
border: 1px solid #ffffff1f;
|
||||
}
|
||||
.btn.sm {
|
||||
height: 30px !important;
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 35px;
|
||||
padding: 0 28px;
|
||||
border-radius: 15px;
|
||||
font-size: 11px;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-round-lg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 40px;
|
||||
min-width: 140px;
|
||||
padding: 0 24px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-circle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 35px !important;
|
||||
width: 35px !important;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
background: var(--blue);
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-circle.btn-sm{
|
||||
width:30px;
|
||||
height:30px;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
.btn-circle-sm {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
background: var(--blue);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
1060
public/css/dark.scss
Normal file
306
public/css/form.scss
Normal file
@ -0,0 +1,306 @@
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 17px;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: 15px;
|
||||
color: #181c32;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e1e3ea;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.ant-select-selection-item {
|
||||
font-weight: 600 !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.ant-select-disabled {
|
||||
background: #fff;
|
||||
border: 0;
|
||||
|
||||
.ant-select-selector {
|
||||
background: #fff !important;
|
||||
color: #181c32 !important;
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ant-picker-disabled {
|
||||
background-color: #fff !important;
|
||||
border: 0;
|
||||
|
||||
input {
|
||||
color: #181c32 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.form-control {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control[type="file"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-control[type="file"]:not(:disabled):not([readonly]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
color: #181c32;
|
||||
background-color: #ffffff;
|
||||
border-color: var(#b5b5c3);
|
||||
outline: 0;
|
||||
/* box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08); */
|
||||
}
|
||||
|
||||
.form-control::-webkit-date-and-time-value {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
font-size: 14px;
|
||||
color: #a1a5b7;
|
||||
font-weight: 400;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ======== FLOATING LABEL ======== */
|
||||
|
||||
.floating-label-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.floating-label-content textarea {
|
||||
min-height: 120px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.floating-label {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 0 7px;
|
||||
background: #fff;
|
||||
color: #757575;
|
||||
cursor: text;
|
||||
transition: 0.2s ease all;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.floating-input:focus,
|
||||
.floating-select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.floating-input:focus~.floating-label {
|
||||
top: -10px;
|
||||
left: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.floating-input:not(:-moz-placeholder-shown)~.floating-label {
|
||||
top: -10px;
|
||||
left: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.floating-input:not(:-ms-input-placeholder)~.floating-label {
|
||||
top: -10px;
|
||||
left: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.floating-input:not(:placeholder-shown)~.floating-label {
|
||||
top: -10px;
|
||||
left: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.floating-select:not([value=""]):valid~.floating-label {
|
||||
top: -10px;
|
||||
left: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 120px;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
/* ======== END FLOATING LABEL ======== */
|
||||
|
||||
.label-form {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #1f2233;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.icon-password {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
color: #c1c1c1;
|
||||
top: 0px;
|
||||
font-size: 25px;
|
||||
border-radius: 27px;
|
||||
}
|
||||
|
||||
/* INPUT IMAGE */
|
||||
.image-input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-input .content-btn {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: -11px;
|
||||
top: -10px;
|
||||
gap: 3px;
|
||||
flex-direction: column;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.image-input input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-input label {
|
||||
display: block;
|
||||
color: #FFF;
|
||||
background: #000;
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 115%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-input label i {
|
||||
font-size: 125%;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.image-input label:hover i {
|
||||
animation: shake 0.35s;
|
||||
}
|
||||
|
||||
// .ant-upload-wrapper .ant-upload {
|
||||
// background-size: contain !important;
|
||||
// width: 100% !important;
|
||||
// height: 200px !important;
|
||||
// border-radius: 20px;
|
||||
// border: 1px dashed #f1f1f1;
|
||||
// }
|
||||
|
||||
.image-input span {
|
||||
display: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-preview{
|
||||
width: 100%;
|
||||
height: 315px;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
// .ant-image-mask-info {
|
||||
// border-radius: 20px;
|
||||
// }
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* INPUT IMAGE */
|
||||
|
||||
|
||||
.searchInput {
|
||||
border-radius: 15px;
|
||||
padding-left: 2.6rem;
|
||||
background-color: #fff !important;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid #0049af24;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.searchInput:focus {
|
||||
background-color: #fff !important;
|
||||
//width: 300px !important;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.icon-search {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 13px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.error-form {
|
||||
font-size: 11px;
|
||||
color: var(--danger);
|
||||
margin-top: 5px;
|
||||
margin-left: 22px;
|
||||
}
|
||||
|
||||
.error .form-control {
|
||||
border: 1px solid var(--danger);
|
||||
}
|
||||
|
||||
.error .floating-label {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.ant-select-selector {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ant-select-selection-search {
|
||||
left: 0 !important;
|
||||
}
|
54
public/css/modal.scss
Normal file
@ -0,0 +1,54 @@
|
||||
|
||||
.zn-close {
|
||||
position: absolute !important;
|
||||
top: 15px !important;
|
||||
right: 15px !important;
|
||||
}
|
||||
|
||||
.modal {
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.zn-bg-modal {
|
||||
background: var(--primary-light);
|
||||
border-radius: 0px 0px 20px 20px !important;
|
||||
}
|
||||
|
||||
.ant-modal-content{
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 1px dashed #efefef;
|
||||
}
|
||||
|
||||
.card-footer.footerDetail {
|
||||
position: relative;
|
||||
background: #272727;
|
||||
padding: 1.4rem 1.6rem;
|
||||
border-radius: 0px 0px 18px 18px !important;
|
||||
|
||||
.containerDetail {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.name {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
.subname {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
926
public/css/navbar.scss
Normal file
@ -0,0 +1,926 @@
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 0px;
|
||||
z-index: 1000;
|
||||
border-radius: 0;
|
||||
transition: .3s ease-in-out;
|
||||
|
||||
|
||||
&.navScroll {
|
||||
background: #ffffff50;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0px 0px 27px #74747430;
|
||||
transition: .3s ease-in-out;
|
||||
|
||||
.nav-logo img {
|
||||
filter: none;
|
||||
}
|
||||
.nav-logo .titleText,
|
||||
.nav-logo .version,
|
||||
.nav-account .container-account .account .text .name,
|
||||
.nav-account .container-account .account .text .role {
|
||||
color: #172236;
|
||||
}
|
||||
|
||||
.ant-menu-overflow-item.ant-menu-item,
|
||||
.ant-menu-submenu-horizontal {
|
||||
.ant-menu-submenu-title {
|
||||
display: flex !important;
|
||||
justify-content: start !important;
|
||||
align-items: center !important;
|
||||
|
||||
.ant-menu-title-content a {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #2b2b2b;
|
||||
}
|
||||
.ant-menu-item-icon svg {
|
||||
width: 16px;
|
||||
fill: #2b2b2b;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-menu-submenu-open,
|
||||
&.ant-menu-submenu-active {
|
||||
.ant-menu-title-content a {
|
||||
font-size: 12px;
|
||||
color: #E7FF56;
|
||||
}
|
||||
.ant-menu-item-icon svg {
|
||||
width: 16px;
|
||||
fill: #E7FF56;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu {
|
||||
gap: 1rem !important;
|
||||
}
|
||||
|
||||
.ant-menu-overflow-item.ant-menu-item {
|
||||
.ant-menu-title-content a {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
.ant-menu-item-icon svg {
|
||||
width: 16px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
&.ant-menu-item-selected,
|
||||
&.ant-menu-item-open,
|
||||
&.ant-menu-item-active {
|
||||
.ant-menu-title-content a {
|
||||
font-size: 12px;
|
||||
color: #E7FF56;
|
||||
}
|
||||
.ant-menu-item-icon svg {
|
||||
width: 16px;
|
||||
fill: #E7FF56;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-submenu-horizontal {
|
||||
.ant-menu-submenu-title {
|
||||
display: flex !important;
|
||||
justify-content: start !important;
|
||||
align-items: center !important;
|
||||
|
||||
.ant-menu-title-content a {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
.ant-menu-item-icon svg {
|
||||
width: 16px;
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-menu-submenu-selected,
|
||||
&.ant-menu-submenu-open,
|
||||
&.ant-menu-submenu-active {
|
||||
.ant-menu-title-content a {
|
||||
font-size: 12px;
|
||||
color: #E7FF56;
|
||||
}
|
||||
.ant-menu-item-icon svg {
|
||||
width: 16px;
|
||||
fill: #E7FF56;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-submenu-vertical {
|
||||
.ant-menu-submenu-title {
|
||||
display: flex !important;
|
||||
justify-content: start !important;
|
||||
align-items: center !important;
|
||||
|
||||
.ant-menu-title-content a {
|
||||
font-size: 12px;
|
||||
color: #3a4b6b;
|
||||
}
|
||||
.ant-menu-item-icon svg {
|
||||
width: 16px;
|
||||
fill: #3a4b6b;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #3a4b6b !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu.ant-menu-inline {
|
||||
position: relative;
|
||||
padding: 8px 10px;
|
||||
|
||||
.ant-menu-title-content a {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #2c3850;
|
||||
}
|
||||
.ant-menu-item-icon svg {
|
||||
width: 16px;
|
||||
fill: #2c3850;
|
||||
}
|
||||
|
||||
.ant-menu-item-selected {
|
||||
border-radius: 12px;
|
||||
background: #2c3850 !important;
|
||||
|
||||
svg {
|
||||
fill: #fff !important;
|
||||
}
|
||||
a {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-menu-submenu-selected,
|
||||
&.ant-menu-submenu-open,
|
||||
&.ant-menu-submenu-active {
|
||||
.ant-menu-title-content a {
|
||||
font-size: 12px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #E7FF56 !important;
|
||||
}
|
||||
.ant-menu-item-icon svg {
|
||||
width: 16px !important;
|
||||
fill: #E7FF56 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-item {
|
||||
display: flex !important;
|
||||
justify-content: start !important;
|
||||
align-items: center !important;
|
||||
|
||||
.ant-menu-title-content {
|
||||
font-size: 12px;
|
||||
color: #3a4b6b;
|
||||
}
|
||||
.ant-menu-item-icon svg {
|
||||
width: 16px;
|
||||
fill: #3a4b6b;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-horizontal, .ant-menu-item::after, .ant-menu-submenu::after {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.ant-menu-submenu-horizontal .ant-menu-submenu-title {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ant-menu-submenu-inline .ant-menu-submenu-arrow {
|
||||
color: #2c3850 !important;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal .ant-menu-item {
|
||||
padding: 0 !important;
|
||||
right: -1rem;
|
||||
}
|
||||
.ant-menu-submenu-horizontal .ant-menu-submenu-arrow {
|
||||
position: absolute;
|
||||
right: -1rem;
|
||||
display: block !important;
|
||||
color: #fff !important;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.ant-menu-submenu-horizontal {
|
||||
&.ant-menu-submenu-selected,
|
||||
&.ant-menu-submenu-open,
|
||||
&.ant-menu-submenu-active {
|
||||
.ant-menu-submenu-arrow {
|
||||
color: #E7FF56 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btnMenuShow {
|
||||
position: relative;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
margin-left: 20px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btnMenuHide {
|
||||
position: absolute;
|
||||
top: .6rem;
|
||||
right: -2.4rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
background: #ffffff60;
|
||||
color: #fff;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar .nav-start {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar .nav-logo {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
margin-left: 20px;
|
||||
padding: 10px 7px;
|
||||
}
|
||||
|
||||
.navbar .nav-logo img {
|
||||
width: 100px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.navbar .nav-logo .titleText {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar .nav-logo .version {
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
//background: #f5f1f1;
|
||||
position: absolute;
|
||||
border-radius: 35px;
|
||||
padding: 10px 0px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.title-primary {
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-top: 34px;
|
||||
color: var(--dark);
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
}
|
||||
|
||||
.nav-title .title {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.nav-title .title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: -8px;
|
||||
height: 16px;
|
||||
width: 1px;
|
||||
background: var(--grey);
|
||||
}
|
||||
|
||||
.nav-title .sub-title {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
|
||||
.nav-account {
|
||||
position: relative;
|
||||
//background: #efefef;
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
.nav-account .container-account .account {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
//background: rgba(255, 255, 255, 0);
|
||||
padding: 8px 10px 8px 45px;
|
||||
border-radius: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-account .container-account .account .text {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.nav-account .detail-account .header .text .name {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
color: var(--black);
|
||||
}
|
||||
.nav-account .container-account .account .text .name {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-account .detail-account .header .text .role {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.nav-account .container-account .account .text .role {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-account .container-account .second-account i,
|
||||
.nav-account .container-account .account i,
|
||||
.nav-account .detail-account .header i {
|
||||
font-size: 28px;
|
||||
color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.nav-account .detail-account {
|
||||
background: #fff;
|
||||
height: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
top: 100%;
|
||||
margin-top: 10px;
|
||||
min-width: 250px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
|
||||
}
|
||||
|
||||
.nav-account .container-account:hover .detail-account {
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: all 0.5s ease;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.nav-account .detail-account .header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 18px 24px;
|
||||
}
|
||||
|
||||
.nav-account .detail-account .header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.nav-account .detail-account .feature {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.nav-account .detail-account button {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--black);
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.nav-account .detail-account button:hover {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-account .detail-account a {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--black);
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.nav-account .detail-account a:hover {
|
||||
background: #f4f6fa;
|
||||
color: #3e97ff;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
background: #0049af24;
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.foto-member-nav {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.ant-menu-light{
|
||||
background: none;
|
||||
}
|
||||
|
||||
.con-mega-menu {
|
||||
width: 700px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.nav-end {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: .4rem;
|
||||
}
|
||||
|
||||
.switchTheme {
|
||||
position: relative;
|
||||
width: 70px;
|
||||
padding: 8px 16px;
|
||||
|
||||
.ant-switch {
|
||||
background: #ccc !important;
|
||||
|
||||
&.ant-switch-checked {
|
||||
background: #3a4b6b !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-switch-inner {
|
||||
position: relative;
|
||||
left: -10px;
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.anticon-moon {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: -5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.anticon-sun {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.containerSignOut {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
}
|
||||
|
||||
.btnNotif {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #00000030;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 50%;
|
||||
margin-right: 33px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
.count {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
height: 14px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #0D466A;
|
||||
background: #E7FF56;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-drawer-header {
|
||||
border: none !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.ant-drawer-header-title {
|
||||
padding-bottom: .6rem;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.ant-drawer-close svg {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.ant-drawer-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #3a4b6b;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
ul.navNotif {
|
||||
position: relative;
|
||||
padding-left: .8rem;
|
||||
// border-left: 2px solid #ddd;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
|
||||
&:last-child .text-secondary::before {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.date {
|
||||
// position: relative;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
padding: 0 12px;
|
||||
background: #fff;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
&.text-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -14px;
|
||||
height: calc(100% + 16px);
|
||||
width: 2px;
|
||||
background: var(--primary);
|
||||
z-index: 7;
|
||||
}
|
||||
&.text-primary::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -14px;
|
||||
width: calc(100% + 14px);
|
||||
height: 1px;
|
||||
background: var(--primary);
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
&.text-secondary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -14px;
|
||||
height: calc(100% + 16px);
|
||||
width: 2px;
|
||||
background: var(--secondary);
|
||||
z-index: 7;
|
||||
}
|
||||
&.text-secondary::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -14px;
|
||||
width: calc(100% + 14px);
|
||||
height: 1px;
|
||||
background: var(--secondary);
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&.text-primary .shape::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: -17px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-light);
|
||||
border: 2px solid var(--primary);
|
||||
transform: rotate(45deg);
|
||||
z-index: 999;
|
||||
}
|
||||
&.text-secondary .shape::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: -17px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--secondary-light);
|
||||
border: 2px solid var(--secondary);
|
||||
transform: rotate(45deg);
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: .8rem;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
padding: 8px 14px;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 16px;
|
||||
|
||||
&.notif-unread {
|
||||
border: 1px solid var(--primary);
|
||||
background: var(--primary-light);
|
||||
|
||||
.icon {
|
||||
background: var(--primary);
|
||||
|
||||
svg {
|
||||
animation: shake 2s ease infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
.title,
|
||||
.subtitle {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
&.notif-read {
|
||||
border: 1px solid var(--secondary);
|
||||
background: var(--secondary-light);
|
||||
|
||||
.icon {
|
||||
background: var(--secondary);
|
||||
}
|
||||
.title,
|
||||
.subtitle {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
.containerIcon {
|
||||
position: relative;
|
||||
width: 15%;
|
||||
}
|
||||
.desc {
|
||||
position: relative;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-radius: 12px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 15px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform:translate(0,0) }
|
||||
1.78571% { transform:translate(3px,0) }
|
||||
3.57143% { transform:translate(0,0) }
|
||||
5.35714% { transform:translate(3px,0) }
|
||||
7.14286% { transform:translate(0,0) }
|
||||
8.92857% { transform:translate(3px,0) }
|
||||
10.71429% { transform:translate(0,0) }
|
||||
100% { transform:translate(0,0) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuHorizontal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menuInline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
background: #ffffff80;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: 0px 0px 27px #74747430;
|
||||
z-index: 999999;
|
||||
transition: .4s;
|
||||
|
||||
&.out {
|
||||
transform: translateX(-120%);
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.ant-menu-inline {
|
||||
max-height: 100vh;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 0;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.backdropMenu {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #ffffff20;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1100px) {
|
||||
.btnMenuShow,
|
||||
.menuInline,
|
||||
.backdropMenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.ant-menu.ant-menu-horizontal {
|
||||
display: none;
|
||||
}
|
||||
.navbar .nav-start {
|
||||
gap: 12px;
|
||||
}
|
||||
.navbar .nav-logo {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.nav-account .container-account .account .text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-menu-toggle{
|
||||
width: 35px;
|
||||
height:35px;
|
||||
//background: #00000038;
|
||||
background: rgba(0, 0, 0, 0.1882352941);
|
||||
border-radius: 26px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
margin-left: -16px;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
transition: 0.5s ease-in-out;
|
||||
|
||||
&:hover{
|
||||
background: #ffffff;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
677
public/css/position.scss
Normal file
@ -0,0 +1,677 @@
|
||||
|
||||
.m-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: 0.25rem !important;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem !important;
|
||||
}
|
||||
|
||||
.m-3 {
|
||||
margin: 1rem !important;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1.5rem !important;
|
||||
}
|
||||
|
||||
.m-5 {
|
||||
margin: 3rem !important;
|
||||
}
|
||||
|
||||
.m-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.mx-0 {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-right: 0.25rem !important;
|
||||
margin-left: 0.25rem !important;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-right: 0.5rem !important;
|
||||
margin-left: 0.5rem !important;
|
||||
}
|
||||
|
||||
.mx-3 {
|
||||
margin-right: 1rem !important;
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-right: 1.5rem !important;
|
||||
margin-left: 1.5rem !important;
|
||||
}
|
||||
|
||||
.mx-5 {
|
||||
margin-right: 3rem !important;
|
||||
margin-left: 3rem !important;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.my-0 {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.my-1 {
|
||||
margin-top: 0.25rem !important;
|
||||
margin-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-top: 0.5rem !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.my-3 {
|
||||
margin-top: 1rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 1.5rem !important;
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.my-5 {
|
||||
margin-top: 3rem !important;
|
||||
margin-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.my-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.25rem !important;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1.5rem !important;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 3rem !important;
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
|
||||
.me-0 {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.me-1 {
|
||||
margin-right: 0.25rem !important;
|
||||
}
|
||||
|
||||
.me-2 {
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
.me-3 {
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
|
||||
.me-4 {
|
||||
margin-right: 1.5rem !important;
|
||||
}
|
||||
|
||||
.me-5 {
|
||||
margin-right: 3rem !important;
|
||||
}
|
||||
|
||||
.me-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.mb-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
.ms-0 {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.ms-1 {
|
||||
margin-left: 0.25rem !important;
|
||||
}
|
||||
|
||||
.ms-2 {
|
||||
margin-left: 0.5rem !important;
|
||||
}
|
||||
|
||||
.ms-3 {
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
|
||||
.ms-4 {
|
||||
margin-left: 1.5rem !important;
|
||||
}
|
||||
|
||||
.ms-5 {
|
||||
margin-left: 3rem !important;
|
||||
}
|
||||
|
||||
.ms-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem !important;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 3rem !important;
|
||||
}
|
||||
|
||||
.px-0 {
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-right: 0.25rem !important;
|
||||
padding-left: 0.25rem !important;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-right: 0.5rem !important;
|
||||
padding-left: 0.5rem !important;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-right: 0.75rem !important;
|
||||
padding-left: 0.75rem !important;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-right: 1rem !important;
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
|
||||
.px-5 {
|
||||
padding-right: 1.25rem !important;
|
||||
padding-left: 1.25rem !important;
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-right: 1.5rem !important;
|
||||
padding-left: 1.5rem !important;
|
||||
}
|
||||
|
||||
.px-7 {
|
||||
padding-right: 1.75rem !important;
|
||||
padding-left: 1.75rem !important;
|
||||
}
|
||||
|
||||
.px-8 {
|
||||
padding-right: 2rem !important;
|
||||
padding-left: 2rem !important;
|
||||
}
|
||||
|
||||
.px-9 {
|
||||
padding-right: 2.25rem !important;
|
||||
padding-left: 2.25rem !important;
|
||||
}
|
||||
|
||||
.px-10 {
|
||||
padding-right: 2.5rem !important;
|
||||
padding-left: 2.5rem !important;
|
||||
}
|
||||
|
||||
.px-11 {
|
||||
padding-right: 2.75rem !important;
|
||||
padding-left: 2.75rem !important;
|
||||
}
|
||||
|
||||
.px-12 {
|
||||
padding-right: 3rem !important;
|
||||
padding-left: 3rem !important;
|
||||
}
|
||||
|
||||
.px-13 {
|
||||
padding-right: 3.25rem !important;
|
||||
padding-left: 3.25rem !important;
|
||||
}
|
||||
|
||||
.px-14 {
|
||||
padding-right: 3.5rem !important;
|
||||
padding-left: 3.5rem !important;
|
||||
}
|
||||
|
||||
.px-15 {
|
||||
padding-right: 3.75rem !important;
|
||||
padding-left: 3.75rem !important;
|
||||
}
|
||||
|
||||
.px-16 {
|
||||
padding-right: 4rem !important;
|
||||
padding-left: 4rem !important;
|
||||
}
|
||||
|
||||
.px-17 {
|
||||
padding-right: 4.25rem !important;
|
||||
padding-left: 4.25rem !important;
|
||||
}
|
||||
|
||||
.px-18 {
|
||||
padding-right: 4.5rem !important;
|
||||
padding-left: 4.5rem !important;
|
||||
}
|
||||
|
||||
.px-19 {
|
||||
padding-right: 4.75rem !important;
|
||||
padding-left: 4.75rem !important;
|
||||
}
|
||||
|
||||
.px-20 {
|
||||
padding-right: 5rem !important;
|
||||
padding-left: 5rem !important;
|
||||
}
|
||||
|
||||
.py-0 {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 0.25rem !important;
|
||||
padding-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem !important;
|
||||
padding-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.py-3 {
|
||||
padding-top: 0.75rem !important;
|
||||
padding-bottom: 0.75rem !important;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.py-5 {
|
||||
padding-top: 1.25rem !important;
|
||||
padding-bottom: 1.25rem !important;
|
||||
}
|
||||
|
||||
.py-6 {
|
||||
padding-top: 1.5rem !important;
|
||||
padding-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.py-7 {
|
||||
padding-top: 1.75rem !important;
|
||||
padding-bottom: 1.75rem !important;
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem !important;
|
||||
padding-bottom: 2rem !important;
|
||||
}
|
||||
|
||||
.py-9 {
|
||||
padding-top: 2.25rem !important;
|
||||
padding-bottom: 2.25rem !important;
|
||||
}
|
||||
|
||||
.py-10 {
|
||||
padding-top: 2.5rem !important;
|
||||
padding-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
.py-11 {
|
||||
padding-top: 2.75rem !important;
|
||||
padding-bottom: 2.75rem !important;
|
||||
}
|
||||
|
||||
.py-12 {
|
||||
padding-top: 3rem !important;
|
||||
padding-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.py-13 {
|
||||
padding-top: 3.25rem !important;
|
||||
padding-bottom: 3.25rem !important;
|
||||
}
|
||||
|
||||
.py-14 {
|
||||
padding-top: 3.5rem !important;
|
||||
padding-bottom: 3.5rem !important;
|
||||
}
|
||||
|
||||
.py-15 {
|
||||
padding-top: 3.75rem !important;
|
||||
padding-bottom: 3.75rem !important;
|
||||
}
|
||||
|
||||
.py-16 {
|
||||
padding-top: 4rem !important;
|
||||
padding-bottom: 4rem !important;
|
||||
}
|
||||
|
||||
.py-17 {
|
||||
padding-top: 4.25rem !important;
|
||||
padding-bottom: 4.25rem !important;
|
||||
}
|
||||
|
||||
.py-18 {
|
||||
padding-top: 4.5rem !important;
|
||||
padding-bottom: 4.5rem !important;
|
||||
}
|
||||
|
||||
.py-19 {
|
||||
padding-top: 4.75rem !important;
|
||||
padding-bottom: 4.75rem !important;
|
||||
}
|
||||
|
||||
.py-20 {
|
||||
padding-top: 5rem !important;
|
||||
padding-bottom: 5rem !important;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: 0.25rem !important;
|
||||
}
|
||||
|
||||
.pt-2 {
|
||||
padding-top: 0.5rem !important;
|
||||
}
|
||||
|
||||
.pt-3 {
|
||||
padding-top: 1rem !important;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1.5rem !important;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: 3rem !important;
|
||||
}
|
||||
|
||||
.pe-0 {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.pe-1 {
|
||||
padding-right: 0.25rem !important;
|
||||
}
|
||||
|
||||
.pe-2 {
|
||||
padding-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
.pe-3 {
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
.pe-4 {
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
|
||||
.pe-5 {
|
||||
padding-right: 3rem !important;
|
||||
}
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.pb-3 {
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.pb-4 {
|
||||
padding-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.pb-5 {
|
||||
padding-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.ps-0 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.ps-1 {
|
||||
padding-left: 0.25rem !important;
|
||||
}
|
||||
|
||||
.ps-2 {
|
||||
padding-left: 0.5rem !important;
|
||||
}
|
||||
|
||||
.ps-3 {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
|
||||
.ps-4 {
|
||||
padding-left: 1.5rem !important;
|
||||
}
|
||||
|
||||
.ps-5 {
|
||||
padding-left: 3rem !important;
|
||||
}
|
||||
|
||||
.fs-1 {
|
||||
font-size: calc(1.375rem + 1.5vw) !important;
|
||||
}
|
||||
|
||||
.fs-2 {
|
||||
font-size: calc(1.325rem + 0.9vw) !important;
|
||||
}
|
||||
|
||||
.fs-3 {
|
||||
font-size: calc(1.3rem + 0.6vw) !important;
|
||||
}
|
||||
|
||||
.fs-4 {
|
||||
font-size: calc(1.275rem + 0.3vw) !important;
|
||||
}
|
||||
|
||||
.fs-5 {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.fs-6 {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.fs-7 {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.fs-8 {
|
||||
font-size: 0.6rem !important;
|
||||
}
|
||||
|
||||
.fw-lighter {
|
||||
font-weight: lighter !important;
|
||||
}
|
||||
|
||||
.fw-light {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.fw-normal {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.fw-medium {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.fw-semibold {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.fw-bold {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.fw-bolder {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.gap-0 {
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem !important;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 1rem !important;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1.5rem !important;
|
||||
}
|
||||
|
||||
.gap-5 {
|
||||
gap: 3rem !important;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
display: flex !important;
|
||||
justify-content: start !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
display: flex !important;
|
||||
justify-content: end !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
@mixin justify-start {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
@mixin justify-item-start {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
@mixin justify-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@mixin justify-end {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
@mixin justify-sb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
@mixin justify-sb-start {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
}
|
335
public/css/sidebar.scss
Normal file
@ -0,0 +1,335 @@
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 275px;
|
||||
//background: var(--bg-menu);
|
||||
z-index: 100;
|
||||
border-radius: 0 35px;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 6rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar .bg-sidebar {
|
||||
height: 100vh;
|
||||
width: unset !important;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.sidebar.close {
|
||||
width: 55px;
|
||||
border-radius: 0 20px;
|
||||
}
|
||||
|
||||
.sidebar.close:hover {
|
||||
width: 260px;
|
||||
border-radius: 0 35px;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links,
|
||||
.sidebar .nav-links {
|
||||
height: 100%;
|
||||
padding: 10px 0 150px 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sidebar .nav-links .nav-menu,
|
||||
.sidebar.close .nav-links .nav-menu {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links .nav-menu.active i,
|
||||
.sidebar.close .nav-links .nav-menu.active {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar.close .nav-links {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar .nav-links::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar .nav-links li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.hideBar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 260px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999999;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar .nav-links li .arrow-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar.close .nav-links li .arrow-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar .nav-links .nav-icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
line-height: 55px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.sidebar .nav-links .nav-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sidebar.close .nav-links .nav-menu.active i {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
text-align: center;
|
||||
background: var(--bg-sub-menu);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
margin-left: 7px;
|
||||
border-radius: 14px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links .nav-menu.active,
|
||||
.sidebar .nav-links .nav-menu.active {
|
||||
width: 95%;
|
||||
border-radius: 0 30px 30px 0;
|
||||
background: var(--bg-sub-menu);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar .nav-links .nav-menu i.arrow {
|
||||
color: #fff;
|
||||
margin-left: 22px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links .arrow-link.active i.arrow,
|
||||
.sidebar .nav-links .arrow-link.active i.arrow {
|
||||
transform: rotate(-180deg);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: 30px;
|
||||
fill: #ffffffa3;
|
||||
color: #ffffffa3;
|
||||
transform: rotate(270deg);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar.close .nav-links .arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links .arrow {
|
||||
|
||||
display: block;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
animation: arrowDelay 0.3s 0.4s forwards;
|
||||
}
|
||||
|
||||
@keyframes arrowDelay {
|
||||
to {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links li a,
|
||||
.sidebar .nav-links li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links li a .nav-name,
|
||||
.sidebar .nav-links li a .nav-name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links li a .link_name,
|
||||
.sidebar .nav-links li a .link_name {
|
||||
width: 160px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
margin-top: 6px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar.close .nav-links li a .link_name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links li .list-link-head,
|
||||
.sidebar .nav-links li .list-link-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links li .list-link-head .nav-name,
|
||||
.sidebar .nav-links li .list-link-head .nav-name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links li .list-link-head .link_name,
|
||||
.sidebar .nav-links li .list-link-head .link_name {
|
||||
width: 160px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
margin-top: 6px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar.close .nav-links li .list-link-head .link_name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar.close:hover .nav-links .nav-menu .submenu,
|
||||
.sidebar .nav-links .nav-menu .submenu {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.2s ease-out;
|
||||
}
|
||||
|
||||
.sidebar .nav-links .nav-menu .submenu li {
|
||||
position: relative;
|
||||
padding-left: 45px;
|
||||
transition: all 0.2s ease;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.sidebar.close .nav-links .nav-menu .submenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar .nav-links .nav-menu .submenu .submenu-link a {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding: 5px 0;
|
||||
text-transform: capitalize;
|
||||
opacity: 1;
|
||||
transition: all 0.2s ease;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.arrow-link.active .arrow {
|
||||
transform: rotate(1deg);
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.sidebar .nav-links .nav-menu .submenu .submenu-link.active {
|
||||
width: 93%;
|
||||
border-radius: 0 30px 30px 0;
|
||||
padding-right: 6px;
|
||||
background: var(--bg-sub-menu);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar .nav-links .nav-menu .submenu .submenu-link.active a {
|
||||
margin-left: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar .nav-links .nav-menu .submenu .submenu-link a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: -14px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-sub-menu);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
.sidebar .nav-links .nav-menu .submenu .submenu-link.active a::before {
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.submenu-level3 {
|
||||
padding-left: 20px !important;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 6px !important;
|
||||
left: -14px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-sub-menu);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
opacity: 0.7 !important;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menu-level3 {
|
||||
display: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.ant-menu-inline.ant-menu-root .ant-menu-item >.ant-menu-title-content,
|
||||
.ant-menu-inline.ant-menu-root .ant-menu-submenu-title >.ant-menu-title-content {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
187
public/css/table.scss
Normal file
@ -0,0 +1,187 @@
|
||||
|
||||
.rdt_TableCol {
|
||||
padding: 8px 11px;
|
||||
color: var(--primary) !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.rdt_TableRow {
|
||||
border-bottom: 1px solid var(--primary-light) !important;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.rdt_TableRow:hover {
|
||||
background-color: var(--primary-light) !important;
|
||||
}
|
||||
|
||||
.rdt_TableHeadRow {
|
||||
background: var(--primary-light) !important;
|
||||
border: none !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rdt_TableHeadRow:nth-child(1) {
|
||||
border-radius: 25px !important;
|
||||
}
|
||||
|
||||
.rdt_Pagination {
|
||||
border-top: none !important;
|
||||
/* border-top: 1px solid #EFF2F5 !important; */
|
||||
}
|
||||
|
||||
|
||||
//ANTD TABLE
|
||||
.ant-table-cell{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-pagination .ant-pagination-item-active a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.ant-pagination .ant-pagination-item-active {
|
||||
border-color: var(--primary) !important;
|
||||
background: var(--primary) !important;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-thead > tr > th, .ant-table-wrapper .ant-table-thead > tr > td {
|
||||
position: relative;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
text-align: start;
|
||||
background:#d4e8ed;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
padding: 11px 16px;
|
||||
}
|
||||
|
||||
|
||||
.ant-table-tbody tr td {
|
||||
font-weight: 500;
|
||||
padding: 3px 13px !important;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-column-sorter-up.active, .ant-table-wrapper .ant-table-column-sorter-down.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-thead th.ant-table-column-sort {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-container table > thead > tr:first-child > *:last-child{
|
||||
border-radius: 0 10px 0px 0;
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-container table > thead > tr:first-child > *:first-child {
|
||||
border-radius: 10px 0 0 0px;
|
||||
}
|
||||
|
||||
.ant-table-cell:hover .ant-table-wrapper .ant-table-container table > thead > tr:first-child > *:last-child{
|
||||
border-radius: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
.ant-table-cell-row-hover {
|
||||
background: var(--primary-light) !important;
|
||||
}
|
||||
|
||||
.ant-pagination .ant-pagination-total-text {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
//zn table
|
||||
.znTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
background: #fff;
|
||||
|
||||
tr td {
|
||||
padding: 10px 30px;
|
||||
border-top: 1px solid #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-wrapper .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before,
|
||||
.ant-table-wrapper .ant-table-thead >tr>td:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
|
||||
background-color: #00353129;
|
||||
}
|
||||
|
||||
|
||||
.ant-table-kol .ant-table-wrapper .ant-table-thead > tr > th,
|
||||
.ant-table-kol .ant-table-wrapper .ant-table-thead > tr > td{
|
||||
background: #f7f7f7;
|
||||
padding:8px 15px;
|
||||
}
|
||||
|
||||
.ant-table-early-warning .ant-table-wrapper .ant-table-thead > tr > th,
|
||||
.ant-table-early-warning .ant-table-wrapper .ant-table-thead > tr > td{
|
||||
background: #242424;
|
||||
padding: 10px 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ant-table-kol-npl .ant-table-wrapper .ant-table-thead > tr > th,
|
||||
.ant-table-kol-npl .ant-table-wrapper .ant-table-thead > tr > td{
|
||||
color: rgb(248, 230, 248);
|
||||
background: rgb(109, 0, 175);
|
||||
padding:8px 15px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.ant-table-kol-dist .ant-table-wrapper .ant-table-thead > tr > th,
|
||||
.ant-table-kol-dist .ant-table-wrapper .ant-table-thead > tr > td{
|
||||
color: rgb(230, 238, 248);
|
||||
background: rgb(0, 73, 175);
|
||||
padding:8px 15px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.ant-table-kol-kjt .ant-table-wrapper .ant-table-thead > tr > th,
|
||||
.ant-table-kol-kjt .ant-table-wrapper .ant-table-thead > tr > td{
|
||||
color: rgb(255, 245, 248);
|
||||
background: rgb(241, 65, 108);
|
||||
padding:8px 15px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.ant-table-pergerakan .ant-table-wrapper .ant-table-thead > tr > th,
|
||||
.ant-table-pergerakan .ant-table-wrapper .ant-table-thead > tr > td{
|
||||
background: #f7f7f7;
|
||||
padding:8px 15px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.ant-table-pemburukan .ant-table-wrapper .ant-table-thead > tr > th,
|
||||
.ant-table-pemburukan .ant-table-wrapper .ant-table-thead > tr > td{
|
||||
background: var(--color-kol1);
|
||||
color: #fff;
|
||||
padding:8px 15px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.ant-table-perbaikan .ant-table-wrapper .ant-table-thead > tr > th,
|
||||
.ant-table-perbaikan .ant-table-wrapper .ant-table-thead > tr > td{
|
||||
background: var(--color-kol2);
|
||||
color: #fff;
|
||||
padding:8px 15px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.ant-table-tetap .ant-table-wrapper .ant-table-thead > tr > th,
|
||||
.ant-table-tetap .ant-table-wrapper .ant-table-thead > tr > td{
|
||||
background: var(--color-kol3);
|
||||
color: #fff;
|
||||
padding:8px 15px;
|
||||
height: 65px;
|
||||
}
|
2196
public/css/template.scss
Normal file
174
public/css/text.scss
Normal file
@ -0,0 +1,174 @@
|
||||
|
||||
.text-primary {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.text-dark-primary {
|
||||
color: var(--dark-primary) !important;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--success) !important;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: var(--info) !important;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--warning) !important;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color: var(--dark) !important;
|
||||
}
|
||||
|
||||
.text-dark-grey {
|
||||
color: var(--dark-grey) !important;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: var(--dark) !important;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.text-white{
|
||||
color :#fff;
|
||||
}
|
||||
.text-kol1{
|
||||
color: var(--color-kol1);
|
||||
}
|
||||
.text-kol2{
|
||||
color: var(--color-kol2);
|
||||
}
|
||||
.text-kol2A{
|
||||
color: var(--color-kol2);
|
||||
}
|
||||
.text-kol2B{
|
||||
color: var(--color-kol2);
|
||||
}
|
||||
.text-kol2C{
|
||||
color: var(--color-kol2);
|
||||
}
|
||||
.text-kol3{
|
||||
color: var(--color-kol3);
|
||||
}
|
||||
.text-kol4{
|
||||
color: var(--color-kol4);
|
||||
}
|
||||
.text-kol5{
|
||||
color: var(--color-kol5);
|
||||
}
|
||||
|
||||
.bg-kol1{
|
||||
background: var(--color-kol1-light);
|
||||
}
|
||||
.bg-kol2{
|
||||
background: var(--color-kol2-light);
|
||||
}
|
||||
.bg-kol2A{
|
||||
background: var(--color-kol2-light);
|
||||
}
|
||||
.bg-kol2B{
|
||||
background: var(--color-kol2-light);
|
||||
}
|
||||
.bg-kol2C{
|
||||
background: var(--color-kol2-light);
|
||||
}
|
||||
.bg-kol3{
|
||||
background: var(--color-kol3-light);
|
||||
}
|
||||
.bg-kol4{
|
||||
background: var(--color-kol4-light);
|
||||
}
|
||||
.bg-kol5{
|
||||
background: var(--color-kol5-light);
|
||||
}
|
||||
|
||||
|
||||
.bg-primary {
|
||||
background: var(--primary) !important;
|
||||
}
|
||||
|
||||
.bg-dark-primary {
|
||||
background: var(--dark-primary) !important;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background: var(--success) !important;
|
||||
}
|
||||
|
||||
.bg-info {
|
||||
background: var(--info) !important;
|
||||
}
|
||||
|
||||
.bg-warning {
|
||||
background: var(--warning) !important;
|
||||
}
|
||||
|
||||
.bg-danger {
|
||||
background: var(--danger) !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background: var(--secondary) !important;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background: var(--dark) !important;
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
background: var(--dark) !important;
|
||||
}
|
||||
|
||||
.bg-info-light {
|
||||
background: var(--info-light) !important;
|
||||
}
|
||||
.bg-success-light {
|
||||
background: var(--success-light) !important;
|
||||
}
|
||||
|
||||
.bg-warning-light {
|
||||
background: var(--warning-light) !important;
|
||||
}
|
||||
|
||||
.bg-danger-light {
|
||||
background: var(--danger-light) !important;
|
||||
}
|
||||
|
||||
.bg-dark-light {
|
||||
background: var(--dark-light) !important;
|
||||
}
|
||||
|
||||
.bg-black-light {
|
||||
background: var(--dark-light) !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
||||
|
||||
.text-light{
|
||||
color: #ffffff78;
|
||||
}
|
168
public/css/wave.scss
Normal file
@ -0,0 +1,168 @@
|
||||
|
||||
.wave {
|
||||
background-color: #f3f6f9;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wave > div {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wave:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.wave:after {
|
||||
content: " ";
|
||||
width: 1000px;
|
||||
height: 1025px;
|
||||
position: absolute;
|
||||
bottom: 65%;
|
||||
left: -250px;
|
||||
border-radius: 35%;
|
||||
background: #fff;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.wave:after {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.wave-animate:after {
|
||||
-webkit-animation: animate-wave 15s infinite linear;
|
||||
animation: animate-wave 15s infinite linear;
|
||||
}
|
||||
|
||||
.wave-animate-slower:after {
|
||||
-webkit-animation: animate-wave 30s infinite linear;
|
||||
animation: animate-wave 30s infinite linear;
|
||||
}
|
||||
|
||||
.wave-animate-slow:after {
|
||||
-webkit-animation: animate-wave 25s infinite linear;
|
||||
animation: animate-wave 25s infinite linear;
|
||||
}
|
||||
|
||||
.wave-animate-fast:after {
|
||||
-webkit-animation: animate-wave 10s infinite linear;
|
||||
animation: animate-wave 10s infinite linear;
|
||||
}
|
||||
|
||||
.wave-animate-faster:after {
|
||||
-webkit-animation: animate-wave 5s infinite linear;
|
||||
animation: animate-wave 5s infinite linear;
|
||||
}
|
||||
|
||||
.wave.wave-primary {
|
||||
background-color: var(--primary-light) !important;
|
||||
}
|
||||
|
||||
.wave.wave-primary .svg-icon svg g [fill] {
|
||||
fill: var(--primary-light);
|
||||
}
|
||||
|
||||
.wave.wave-secondary {
|
||||
background-color: rgba(228, 230, 239, 0.1) !important;
|
||||
}
|
||||
|
||||
.wave.wave-secondary .svg-icon svg g [fill] {
|
||||
fill: #e4e6ef;
|
||||
}
|
||||
|
||||
.wave.wave-success {
|
||||
background-color: rgba(27, 197, 189, 0.1) !important;
|
||||
}
|
||||
|
||||
.wave.wave-success .svg-icon svg g [fill] {
|
||||
fill: #43a047;
|
||||
}
|
||||
|
||||
.wave.wave-info {
|
||||
background-color: rgba(137, 80, 252, 0.1) !important;
|
||||
}
|
||||
|
||||
.wave.wave-info .svg-icon svg g [fill] {
|
||||
fill: #8950fc;
|
||||
}
|
||||
|
||||
.wave.wave-warning {
|
||||
background-color: rgba(255, 168, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.wave.wave-warning .svg-icon svg g [fill] {
|
||||
fill: #ffa800;
|
||||
}
|
||||
|
||||
.wave.wave-danger {
|
||||
background-color: rgba(246, 78, 96, 0.1) !important;
|
||||
}
|
||||
|
||||
.wave.wave-danger .svg-icon svg g [fill] {
|
||||
fill: #039be5;
|
||||
}
|
||||
|
||||
.wave.wave-light {
|
||||
background-color: rgba(243, 246, 249, 0.1) !important;
|
||||
}
|
||||
|
||||
.wave.wave-light .svg-icon svg g [fill] {
|
||||
fill: #f3f6f9;
|
||||
}
|
||||
|
||||
.wave.wave-dark {
|
||||
background-color: rgba(24, 28, 50, 0.1) !important;
|
||||
}
|
||||
|
||||
.wave.wave-dark .svg-icon svg g [fill] {
|
||||
fill: #181c32;
|
||||
}
|
||||
|
||||
.wave.wave-white {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.wave.wave-white .svg-icon svg g [fill] {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animate-wave {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate-wave {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.content-notif {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
BIN
public/icon512_maskable.png
Normal file
After Width: | Height: | Size: 31 KiB |
BIN
public/icon512_rounded.png
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
public/img/2456051.png
Normal file
After Width: | Height: | Size: 372 KiB |
BIN
public/img/3793096.jpg
Normal file
After Width: | Height: | Size: 124 KiB |
BIN
public/img/404.jpg
Normal file
After Width: | Height: | Size: 220 KiB |
BIN
public/img/500.jpg
Normal file
After Width: | Height: | Size: 252 KiB |
7
public/img/basys-name.svg
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
public/img/basys.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
public/img/bg-light.png
Normal file
After Width: | Height: | Size: 45 KiB |
172
public/img/bg-login_2.svg
Normal file
After Width: | Height: | Size: 264 KiB |
172
public/img/bg-login_3.svg
Normal file
After Width: | Height: | Size: 264 KiB |
BIN
public/img/bg-nav.jpg
Normal file
After Width: | Height: | Size: 132 KiB |
BIN
public/img/bg-nav2.jpg
Normal file
After Width: | Height: | Size: 46 KiB |
BIN
public/img/bg-sidebar.jpg
Normal file
After Width: | Height: | Size: 262 KiB |
BIN
public/img/bg.png
Normal file
After Width: | Height: | Size: 52 KiB |
BIN
public/img/bg1.jpg
Normal file
After Width: | Height: | Size: 81 KiB |
BIN
public/img/bg10.png
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
public/img/bg11.jpg
Normal file
After Width: | Height: | Size: 213 KiB |
BIN
public/img/bg12.jpg
Normal file
After Width: | Height: | Size: 206 KiB |
BIN
public/img/bg13.jpg
Normal file
After Width: | Height: | Size: 1.9 MiB |
BIN
public/img/bg14.jpg
Normal file
After Width: | Height: | Size: 994 KiB |
BIN
public/img/bg15.jpg
Normal file
After Width: | Height: | Size: 724 KiB |
BIN
public/img/bg151.png
Normal file
After Width: | Height: | Size: 89 KiB |
BIN
public/img/bg152.jpg
Normal file
After Width: | Height: | Size: 194 KiB |
BIN
public/img/bg16.jpg
Normal file
After Width: | Height: | Size: 164 KiB |
BIN
public/img/bg17.jpg
Normal file
After Width: | Height: | Size: 243 KiB |
BIN
public/img/bg2.jpg
Normal file
After Width: | Height: | Size: 113 KiB |
BIN
public/img/bg2.png
Normal file
After Width: | Height: | Size: 55 KiB |
BIN
public/img/bg3.jpg
Normal file
After Width: | Height: | Size: 101 KiB |
BIN
public/img/bg3.png
Normal file
After Width: | Height: | Size: 49 KiB |
BIN
public/img/bg4.jpg
Normal file
After Width: | Height: | Size: 108 KiB |
BIN
public/img/bg5.jpg
Normal file
After Width: | Height: | Size: 118 KiB |
BIN
public/img/bg6.jpg
Normal file
After Width: | Height: | Size: 155 KiB |
BIN
public/img/bg7.jpg
Normal file
After Width: | Height: | Size: 64 KiB |
BIN
public/img/bg8.jpg
Normal file
After Width: | Height: | Size: 226 KiB |
BIN
public/img/bg9.jpg
Normal file
After Width: | Height: | Size: 315 KiB |
BIN
public/img/bgnew-min.jpg
Normal file
After Width: | Height: | Size: 259 KiB |
BIN
public/img/bsmr.png
Normal file
After Width: | Height: | Size: 18 KiB |
88
public/img/circle-effect.svg
Normal file
@ -0,0 +1,88 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="1697.4px" height="641.1px" viewBox="0 0 1697.4 641.1" enable-background="new 0 0 1697.4 641.1" xml:space="preserve">
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_1_" d="M1387.2,175.4c4.9,18.5,23.9,29.6,42.4,24.7c18.5-4.9,29.6-23.9,24.7-42.4c-4.9-18.5-23.9-29.6-42.4-24.7
|
||||
C1393.4,137.9,1382.3,156.9,1387.2,175.4 M1259.7,209.1c-23.5-88.9,29.6-180.1,118.5-203.6c88.9-23.5,180.1,29.6,203.6,118.5
|
||||
c23.5,88.9-29.6,180.1-118.5,203.6C1374.3,351.1,1283.2,298,1259.7,209.1"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<rect x="1249.2" y="-5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 298.3336 1053.4047)" opacity="0.2" clip-path="url(#SVGID_2_)" fill="#FFFFFF" width="343.1" height="343.1"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_3_" d="M1516.9,463.5c11.7,44.4,57.4,71,101.8,59.2c44.4-11.7,71-57.4,59.2-101.8c-11.7-44.4-57.4-71-101.8-59.2
|
||||
C1531.8,373.4,1505.2,419.1,1516.9,463.5 M1500.8,467.7c-14.1-53.4,17.7-108,71.1-122.1c53.4-14.1,108,17.7,122.1,71.1
|
||||
c14.1,53.4-17.7,108-71.1,122.1C1569.6,552.9,1514.9,521.1,1500.8,467.7"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_4_">
|
||||
<use xlink:href="#SVGID_3_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<rect x="1492.5" y="337.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 155.1939 1259.0591)" opacity="0.2" clip-path="url(#SVGID_4_)" fill="#FFFFFF" width="209.9" height="209.9"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_5_" d="M1549.3,456.3c7.3,27.8,35.9,44.4,63.7,37.1c27.8-7.3,44.4-35.9,37.1-63.7c-7.3-27.8-35.9-44.4-63.7-37.1
|
||||
C1558.6,399.9,1542,428.5,1549.3,456.3 M1533.2,460.6c-9.7-36.8,12.2-74.4,49-84.1c36.8-9.7,74.4,12.2,84.1,49
|
||||
c9.7,36.8-12.2,74.4-49,84.1C1580.6,519.2,1542.9,497.3,1533.2,460.6"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_6_">
|
||||
<use xlink:href="#SVGID_5_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<rect x="1525.9" y="369.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 155.3305 1260.9583)" opacity="0.2" clip-path="url(#SVGID_6_)" fill="#FFFFFF" width="147.7" height="147.7"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_7_" d="M89.1,530.4c0-12.7,10.3-23.1,23-23.2c12.7,0,23.1,10.3,23.2,23c0,12.7-10.3,23.1-23,23.2
|
||||
C99.5,553.4,89.1,543.1,89.1,530.4 M1.3,530.7c0.2,61.2,50,110.7,111.3,110.5c61.2-0.2,110.7-50,110.5-111.3
|
||||
c-0.2-61.2-50-110.7-111.3-110.5C50.6,419.6,1.1,469.4,1.3,530.7"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_8_">
|
||||
<use xlink:href="#SVGID_7_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<rect x="-3.7" y="414.4" transform="matrix(0.5 -0.866 0.866 0.5 -403.1351 362.2907)" opacity="0.2" clip-path="url(#SVGID_8_)" fill="#FFFFFF" width="231.8" height="231.8"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_9_" d="M123.3,322.6c-0.1-30.6,24.7-55.5,55.2-55.6c30.6-0.1,55.5,24.7,55.6,55.2c0.1,30.6-24.7,55.5-55.2,55.6
|
||||
C148.4,378,123.5,353.2,123.3,322.6 M112.3,322.7c0.1,36.7,30,66.4,66.8,66.3c36.7-0.1,66.4-30,66.3-66.8
|
||||
c-0.1-36.7-30-66.4-66.8-66.3C141.8,256,112.1,285.9,112.3,322.7"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_10_">
|
||||
<use xlink:href="#SVGID_9_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<rect x="107.2" y="250.9" transform="matrix(0.5 -0.866 0.866 0.5 -189.8356 316.0442)" opacity="0.2" clip-path="url(#SVGID_10_)" fill="#FFFFFF" width="143.1" height="143.1"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_11_" d="M145.4,322.2c-0.1-19.1,15.4-34.7,34.5-34.8c19.1-0.1,34.7,15.4,34.8,34.6c0.1,19.1-15.4,34.7-34.5,34.8
|
||||
C161.1,356.8,145.5,341.3,145.4,322.2 M134.3,322.2c0.1,25.3,20.7,45.7,45.9,45.6c25.3-0.1,45.7-20.7,45.6-45.9
|
||||
c-0.1-25.3-20.7-45.7-45.9-45.6C154.6,276.4,134.2,297,134.3,322.2"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_12_">
|
||||
<use xlink:href="#SVGID_11_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<rect x="129.3" y="271.3" transform="matrix(0.5 -0.866 0.866 0.5 -188.8918 316.9881)" opacity="0.2" clip-path="url(#SVGID_12_)" fill="#FFFFFF" width="101.5" height="101.5"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_13_" d="M43.7,130.9c24.2-0.1,43.9,19.5,44,43.7c0.1,24.2-19.5,44-43.7,44c-24.2,0.1-43.9-19.5-44-43.7
|
||||
C-0.1,150.7,19.5,131,43.7,130.9"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_14_">
|
||||
<use xlink:href="#SVGID_13_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<rect x="-5" y="125.9" transform="matrix(0.5 -0.866 0.866 0.5 -129.4321 125.396)" opacity="0.2" clip-path="url(#SVGID_14_)" fill="#FFFFFF" width="97.8" height="97.8"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 4.4 KiB |
BIN
public/img/defaultproject.jpg
Normal file
After Width: | Height: | Size: 129 KiB |
18
public/img/export-shape.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<svg width="416" height="960" viewBox="0 0 416 960" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="295" height="960" fill="#001E44"/>
|
||||
<path d="M183 233C183 104.318 287.318 0 416 0V0V960H183V233Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M407.089 5.15191C409.06 3.27065 407.653 0 404.928 0L287.219 0C286.322 0 285.451 0.425904 284.883 1.1201C-47.0089 406.169 190.621 785.465 390.456 959.279C391.001 959.753 391.684 960 392.406 960H395.197C397.842 960 399.1 956.72 397.279 954.801C28.8507 566.697 231.152 173.072 407.089 5.15191Z" fill="url(#paint0_linear_737_21)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M396.098 954.632C398.352 956.411 397.004 960 394.132 960H131.303C130.189 960 129.15 959.351 128.633 958.364C-106.403 509.747 99.3567 169.127 143.292 104.931C145.109 102.277 148.756 104.366 148.062 107.506C35.1977 618.922 302.358 880.643 396.098 954.632Z" fill="url(#paint1_linear_737_21)"/>
|
||||
<path d="M405 960C400.5 957 388.333 945.667 383.5 940L394 960H405Z" fill="#001D44"/>
|
||||
<path d="M414.5 0C408 3.5 408.5 4 403.5 8.5V0H414.5Z" fill="#004AAA"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_737_21" x1="263.772" y1="-6.07222e-07" x2="217.501" y2="652" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#004AAA"/>
|
||||
<stop offset="1" stop-color="#001E44"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_737_21" x1="41.5" y1="435.5" x2="269.416" y2="999.89" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#014AAF"/>
|
||||
<stop offset="1" stop-color="#0D2341"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/img/facebook.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
public/img/gedung.jpeg
Normal file
After Width: | Height: | Size: 164 KiB |
BIN
public/img/github.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
public/img/google.png
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
public/img/icon-building.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
public/img/icon-location.png
Normal file
After Width: | Height: | Size: 4.6 KiB |
1
public/img/icon-login.svg
Normal file
After Width: | Height: | Size: 7.4 KiB |
BIN
public/img/icon-map.png
Normal file
After Width: | Height: | Size: 3.1 KiB |
BIN
public/img/logo_command.png
Normal file
After Width: | Height: | Size: 15 KiB |
1
public/img/mainlabel.svg
Normal file
After Width: | Height: | Size: 18 KiB |
1
public/img/mainlabel2.svg
Normal file
After Width: | Height: | Size: 23 KiB |
1
public/img/mainlabel3.svg
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
public/img/no-image.jpg
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
public/img/no_img.png
Normal file
After Width: | Height: | Size: 13 KiB |
BIN
public/img/noimg.jpg
Normal file
After Width: | Height: | Size: 16 KiB |
3
public/img/notif.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.2083 13.0199V9.58335C18.2083 6.5004 16.1144 3.90331 13.2777 3.12227C12.9969 2.41502 12.3108 1.91669 11.5 1.91669C10.6893 1.91669 10.0031 2.41502 9.72229 3.12227C6.88563 3.90427 4.79167 6.5004 4.79167 9.58335V13.0199L3.15579 14.6558C3.06663 14.7447 2.99591 14.8503 2.94772 14.9665C2.89953 15.0828 2.87482 15.2075 2.875 15.3334V17.25C2.875 17.5042 2.97597 17.7479 3.15569 17.9277C3.33541 18.1074 3.57917 18.2084 3.83333 18.2084H19.1667C19.4208 18.2084 19.6646 18.1074 19.8443 17.9277C20.024 17.7479 20.125 17.5042 20.125 17.25V15.3334C20.1252 15.2075 20.1005 15.0828 20.0523 14.9665C20.0041 14.8503 19.9334 14.7447 19.8442 14.6558L18.2083 13.0199ZM18.2083 16.2917H4.79167V15.7301L6.42754 14.0942C6.51671 14.0054 6.58742 13.8998 6.63561 13.7835C6.6838 13.6672 6.70852 13.5426 6.70833 13.4167V9.58335C6.70833 6.94123 8.85788 4.79169 11.5 4.79169C14.1421 4.79169 16.2917 6.94123 16.2917 9.58335V13.4167C16.2917 13.6716 16.3923 13.915 16.5725 14.0942L18.2083 15.7301V16.2917ZM11.5 21.0834C12.0935 21.0841 12.6725 20.8999 13.1565 20.5564C13.6405 20.2129 14.0054 19.7272 14.2006 19.1667H8.79942C8.99459 19.7272 9.35954 20.2129 9.84353 20.5564C10.3275 20.8999 10.9065 21.0841 11.5 21.0834Z" fill="#D1D1D1"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/img/pat1.png
Normal file
After Width: | Height: | Size: 55 KiB |
BIN
public/img/pat10.png
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
public/img/pat11.png
Normal file
After Width: | Height: | Size: 108 KiB |
BIN
public/img/pat12.png
Normal file
After Width: | Height: | Size: 76 KiB |
BIN
public/img/pat13.png
Normal file
After Width: | Height: | Size: 4.5 KiB |
BIN
public/img/pat14.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
public/img/pat15.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
public/img/pat16.png
Normal file
After Width: | Height: | Size: 56 KiB |
BIN
public/img/pat17.png
Normal file
After Width: | Height: | Size: 217 KiB |
BIN
public/img/pat18.png
Normal file
After Width: | Height: | Size: 100 KiB |
BIN
public/img/pat19.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
public/img/pat2.png
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
public/img/pat20.png
Normal file
After Width: | Height: | Size: 69 KiB |
BIN
public/img/pat21.png
Normal file
After Width: | Height: | Size: 101 KiB |
BIN
public/img/pat22.png
Normal file
After Width: | Height: | Size: 31 KiB |
BIN
public/img/pat23.png
Normal file
After Width: | Height: | Size: 31 KiB |
BIN
public/img/pat24.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
public/img/pat25.png
Normal file
After Width: | Height: | Size: 65 KiB |
BIN
public/img/pat26.png
Normal file
After Width: | Height: | Size: 290 KiB |