├── CHANGELOG.md ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── .DS_Store ├── .htaccess ├── favicon.png ├── fonts │ ├── .DS_Store │ ├── Yekan │ │ ├── Yekan.eot │ │ ├── Yekan.svg │ │ ├── Yekan.ttf │ │ └── Yekan.woff │ ├── nucleo.eot │ ├── nucleo.ttf │ ├── nucleo.woff │ └── nucleo.woff2 ├── images │ ├── bg-profile.jpg │ ├── bg-signup.jpg │ ├── dark-gradient.png │ ├── face-1.jpg │ ├── face-2.jpg │ ├── face-3.jpg │ ├── face-4.jpg │ ├── face-5.jpeg │ ├── face-6.jpeg │ ├── home-decor-1.jpeg │ ├── home-decor-2.jpeg │ ├── home-decor-3.jpeg │ ├── img-signin.jpg │ ├── info-card-1.jpg │ ├── info-card-2.jpg │ ├── info-card-3.jpg │ ├── logo-ct-black.png │ ├── logo-ct-white.png │ └── logos │ │ ├── Google__G__Logo.svg.png │ │ ├── facebook.svg │ │ ├── logo-apple.svg │ │ ├── logo-asana.svg │ │ ├── logo-atlassian.svg │ │ ├── logo-google-drive.svg │ │ ├── logo-invision.svg │ │ ├── logo-jira.svg │ │ ├── logo-shopify.svg │ │ ├── logo-slack.svg │ │ ├── logo-spotify.svg │ │ ├── logo-weave.svg │ │ ├── logo-webdev.svg │ │ ├── logos-facebook.svg │ │ ├── mastercard-logo.png │ │ ├── paypal-logo-2.png │ │ ├── paypal-logo.png │ │ └── visa-logo.png └── index.html ├── src ├── App.vue ├── components │ ├── Cards │ │ ├── CardAuthorTable.vue │ │ ├── CardBarChart.vue │ │ ├── CardBillingInfo.vue │ │ ├── CardConversations.vue │ │ ├── CardCredit.vue │ │ ├── CardInfo.vue │ │ ├── CardInfo2.vue │ │ ├── CardInvoices.vue │ │ ├── CardLineChart.vue │ │ ├── CardOrderHistory.vue │ │ ├── CardPaymentMethods.vue │ │ ├── CardPlatformSettings.vue │ │ ├── CardProfileInformation.vue │ │ ├── CardProject.vue │ │ ├── CardProjectTable.vue │ │ ├── CardProjectTable2.vue │ │ └── CardTransactions.vue │ ├── Charts │ │ ├── ChartBar.vue │ │ └── ChartLine.vue │ ├── Footers │ │ ├── DashboardFooter.vue │ │ └── DefaultFooter.vue │ ├── Headers │ │ ├── DashboardHeader.vue │ │ └── DefaultHeader.vue │ ├── Sidebars │ │ ├── DashboardSettingsDrawer.vue │ │ └── DashboardSidebar.vue │ └── Widgets │ │ ├── WidgetCounter.vue │ │ └── WidgetSalary.vue ├── layouts │ ├── Dashboard.vue │ ├── DashboardRTL.vue │ └── Default.vue ├── main.js ├── plugins │ └── click-away.js ├── router │ └── index.js ├── scss │ ├── app.scss │ ├── base │ │ ├── _override.scss │ │ ├── _typography.scss │ │ ├── _utilities.scss │ │ └── _variables.scss │ ├── components │ │ ├── _avatar.scss │ │ ├── _badge.scss │ │ ├── _button.scss │ │ ├── _card.scss │ │ ├── _chart.scss │ │ ├── _dropdown.scss │ │ ├── _list.scss │ │ ├── _progress.scss │ │ ├── _settings-drawer.scss │ │ ├── _space.scss │ │ ├── _table.scss │ │ ├── _tag.scss │ │ ├── _timeline.scss │ │ └── _widget.scss │ ├── form │ │ ├── _checkbox.scss │ │ └── _input.scss │ ├── layouts │ │ ├── _dashboard-rtl.scss │ │ ├── _dashboard.scss │ │ └── _default.scss │ └── pages │ │ ├── _profile.scss │ │ ├── _sign-in.scss │ │ └── _sign-up.scss └── views │ ├── 404.vue │ ├── Billing.vue │ ├── Dashboard.vue │ ├── Layout.vue │ ├── Profile.vue │ ├── RTL.vue │ ├── Sign-In.vue │ ├── Sign-Up.vue │ └── Tables.vue └── vue.config.js /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Change Log 2 | 3 | ### [1.0.0] 2021-07-23 4 | - Original Release -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Muse Vue Ant Design Dashboard Rtl] 2 | 3 | Muse Rtl - Vue Ant Design Dashboard is a beautiful Ant Design Vue admin dashboard with a large number of components, designed to look beautiful and organized 4 | 5 | You can use this admin panel to develope your projects.Tools and technologies used in this project are 6 |
7 | `ant-design-vue/v1.7`, 8 |
9 | `vue/v2.6`, 10 |
11 | `vue-router/v3.5`. 12 |
13 | 14 | and you need node `12.3` to run this project. 15 |

16 | 17 | Screen Shot 1402-06-21 at 14 03 37 18 | 19 |
20 |

21 |
22 |
23 | Screen Shot 1402-06-21 at 14 03 54 24 |
25 |
26 | Screen Shot 1402-06-21 at 14 04 07 27 | 28 |
29 |
30 | Screen Shot 1402-06-21 at 14 04 55 31 | 32 |
33 |
34 | Screen Shot 1402-06-21 at 14 05 14 35 | 36 |
37 |
38 | Screen Shot 1402-06-21 at 14 05 28 39 |
40 |
41 | 42 | ## Installation 43 | 44 | clone or download this project 45 |
46 | go to the projects folder and run 47 |
48 | 49 | `` npm i `` 50 | 51 | you can serve this project on your localhost with 52 |
53 | 54 | ```npm run serve``` 55 |
56 | 57 | build for production with 58 |
59 | 60 | ``npm run build`` 61 | 62 |
63 | 64 | you have questions or need help integrating the product please [contact me](gisoonasrollahi@gmail.com) 65 | 66 | 67 | ##### Social Media 68 | 69 | linkedin:https://www.linkedin.com/in/gisunasrollahi 70 | 71 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "muse-vue-ant-design-dashboard", 3 | "version": "1.0.0", 4 | "description": "A user-friendly, open source and beautiful dashboard based on Ant Design Vue.", 5 | "main": "src/main.js", 6 | "homepage": "https://demos.creative-tim.com/muse-ant-design-dashboard/", 7 | "repository": "https://github.com/creativetimofficial/muse-ant-design-dashboard", 8 | "license": "MIT", 9 | "private": true, 10 | "scripts": { 11 | "serve": "vue-cli-service serve --open", 12 | "build": "vue-cli-service build", 13 | "dev": "npm run serve" 14 | }, 15 | "dependencies": { 16 | "ant-design-vue": "1.7.6", 17 | "chart.js": "3.4.1", 18 | "core-js": "3.15.2", 19 | "vue": "2.6.14", 20 | "vue-github-buttons": "^3.1.0", 21 | "vue-router": "3.5.2" 22 | }, 23 | "devDependencies": { 24 | "@vue/cli-plugin-babel": "4.5.13", 25 | "@vue/cli-plugin-router": "4.5.13", 26 | "@vue/cli-service": "4.5.13", 27 | "node-sass": "6.0.1", 28 | "sass-loader": "^10", 29 | "vue-template-compiler": "2.6.14" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /public/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/.DS_Store -------------------------------------------------------------------------------- /public/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | 3 | Options -MultiViews 4 | 5 | 6 | RewriteEngine On 7 | 8 | # Redirect Trailing Slashes If Not A Folder... 9 | RewriteCond %{REQUEST_FILENAME} !-d 10 | RewriteCond %{REQUEST_URI} (.+)/$ 11 | RewriteRule ^ %1 [L,R=301] 12 | 13 | # Handle Front Controller... 14 | RewriteCond %{REQUEST_FILENAME} !-d 15 | RewriteCond %{REQUEST_FILENAME} !-f 16 | RewriteRule ^ index.html [L] 17 | 18 | # Handle Authorization Header 19 | RewriteCond %{HTTP:Authorization} . 20 | RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] 21 | 22 | Options -Indexes 23 | 24 | 25 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/favicon.png -------------------------------------------------------------------------------- /public/fonts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/fonts/.DS_Store -------------------------------------------------------------------------------- /public/fonts/Yekan/Yekan.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/fonts/Yekan/Yekan.eot -------------------------------------------------------------------------------- /public/fonts/Yekan/Yekan.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/fonts/Yekan/Yekan.ttf -------------------------------------------------------------------------------- /public/fonts/Yekan/Yekan.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/fonts/Yekan/Yekan.woff -------------------------------------------------------------------------------- /public/fonts/nucleo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/fonts/nucleo.eot -------------------------------------------------------------------------------- /public/fonts/nucleo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/fonts/nucleo.ttf -------------------------------------------------------------------------------- /public/fonts/nucleo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/fonts/nucleo.woff -------------------------------------------------------------------------------- /public/fonts/nucleo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/fonts/nucleo.woff2 -------------------------------------------------------------------------------- /public/images/bg-profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/bg-profile.jpg -------------------------------------------------------------------------------- /public/images/bg-signup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/bg-signup.jpg -------------------------------------------------------------------------------- /public/images/dark-gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/dark-gradient.png -------------------------------------------------------------------------------- /public/images/face-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/face-1.jpg -------------------------------------------------------------------------------- /public/images/face-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/face-2.jpg -------------------------------------------------------------------------------- /public/images/face-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/face-3.jpg -------------------------------------------------------------------------------- /public/images/face-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/face-4.jpg -------------------------------------------------------------------------------- /public/images/face-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/face-5.jpeg -------------------------------------------------------------------------------- /public/images/face-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/face-6.jpeg -------------------------------------------------------------------------------- /public/images/home-decor-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/home-decor-1.jpeg -------------------------------------------------------------------------------- /public/images/home-decor-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/home-decor-2.jpeg -------------------------------------------------------------------------------- /public/images/home-decor-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/home-decor-3.jpeg -------------------------------------------------------------------------------- /public/images/img-signin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/img-signin.jpg -------------------------------------------------------------------------------- /public/images/info-card-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/info-card-1.jpg -------------------------------------------------------------------------------- /public/images/info-card-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/info-card-2.jpg -------------------------------------------------------------------------------- /public/images/info-card-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/info-card-3.jpg -------------------------------------------------------------------------------- /public/images/logo-ct-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/logo-ct-black.png -------------------------------------------------------------------------------- /public/images/logo-ct-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/logo-ct-white.png -------------------------------------------------------------------------------- /public/images/logos/Google__G__Logo.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/logos/Google__G__Logo.svg.png -------------------------------------------------------------------------------- /public/images/logos/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/logos/logo-apple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-apple 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/images/logos/logo-asana.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-asana 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /public/images/logos/logo-atlassian.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-atlassian 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /public/images/logos/logo-google-drive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-google-drive 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /public/images/logos/logo-invision.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-invision 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/images/logos/logo-jira.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-jira 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /public/images/logos/logo-shopify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-shopify 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/images/logos/logo-slack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-slack 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/images/logos/logo-spotify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-spotify 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /public/images/logos/logo-weave.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-weave 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/images/logos/logo-webdev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | logo-webdev 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/images/logos/logos-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/logos/mastercard-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/logos/mastercard-logo.png -------------------------------------------------------------------------------- /public/images/logos/paypal-logo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/logos/paypal-logo-2.png -------------------------------------------------------------------------------- /public/images/logos/paypal-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/logos/paypal-logo.png -------------------------------------------------------------------------------- /public/images/logos/visa-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gisuNasr/vue-ant-design-admin/f059f2f2aefe85936b3b89bf85a73abdd2a0fd03/public/images/logos/visa-logo.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | داشبور فارسی میوز 25 | 38 | 39 | 40 | 43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 15 | 16 | 29 | 30 | -------------------------------------------------------------------------------- /src/components/Cards/CardAuthorTable.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | -------------------------------------------------------------------------------- /src/components/Cards/CardBarChart.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | -------------------------------------------------------------------------------- /src/components/Cards/CardBillingInfo.vue: -------------------------------------------------------------------------------- 1 | 110 | 111 | -------------------------------------------------------------------------------- /src/components/Cards/CardConversations.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | -------------------------------------------------------------------------------- /src/components/Cards/CardCredit.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | -------------------------------------------------------------------------------- /src/components/Cards/CardInfo.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/Cards/CardInfo2.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | -------------------------------------------------------------------------------- /src/components/Cards/CardInvoices.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | -------------------------------------------------------------------------------- /src/components/Cards/CardLineChart.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/Cards/CardOrderHistory.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | -------------------------------------------------------------------------------- /src/components/Cards/CardPaymentMethods.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | -------------------------------------------------------------------------------- /src/components/Cards/CardPlatformSettings.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | -------------------------------------------------------------------------------- /src/components/Cards/CardProfileInformation.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | -------------------------------------------------------------------------------- /src/components/Cards/CardProject.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | -------------------------------------------------------------------------------- /src/components/Cards/CardProjectTable.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | -------------------------------------------------------------------------------- /src/components/Cards/CardProjectTable2.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | -------------------------------------------------------------------------------- /src/components/Cards/CardTransactions.vue: -------------------------------------------------------------------------------- 1 | 63 | 64 | -------------------------------------------------------------------------------- /src/components/Charts/ChartBar.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 96 | 97 | -------------------------------------------------------------------------------- /src/components/Charts/ChartLine.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 97 | 98 | -------------------------------------------------------------------------------- /src/components/Footers/DashboardFooter.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 47 | -------------------------------------------------------------------------------- /src/components/Footers/DefaultFooter.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 80 | 81 | -------------------------------------------------------------------------------- /src/components/Headers/DefaultHeader.vue: -------------------------------------------------------------------------------- 1 | 139 | 140 | 153 | 154 | -------------------------------------------------------------------------------- /src/components/Sidebars/DashboardSettingsDrawer.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 139 | -------------------------------------------------------------------------------- /src/components/Sidebars/DashboardSidebar.vue: -------------------------------------------------------------------------------- 1 | 110 | 111 | 141 | -------------------------------------------------------------------------------- /src/components/Widgets/WidgetCounter.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | -------------------------------------------------------------------------------- /src/components/Widgets/WidgetSalary.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /src/layouts/Dashboard.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 75 | 76 | 134 | -------------------------------------------------------------------------------- /src/layouts/DashboardRTL.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 75 | 76 | 134 | -------------------------------------------------------------------------------- /src/layouts/Default.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 31 | 32 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | ========================================================= 3 | Muse - Vue Ant Design Dashboard - v1.0.0 4 | ========================================================= 5 | 6 | Product Page: https://www.creative-tim.com/product/vue-ant-design-dashboard 7 | Copyright 2021 Creative Tim (https://www.creative-tim.com) 8 | Coded by Creative Tim 9 | 10 | ========================================================= 11 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 12 | */ 13 | 14 | import Vue from 'vue' 15 | import Antd from 'ant-design-vue'; 16 | import 'ant-design-vue/dist/antd.css'; 17 | import App from './App.vue' 18 | import DefaultLayout from './layouts/Default.vue' 19 | import DashboardLayout from './layouts/Dashboard.vue' 20 | import DashboardRTLLayout from './layouts/DashboardRTL.vue' 21 | import router from './router' 22 | // import './plugins/click-away' 23 | 24 | import './scss/app.scss'; 25 | 26 | Vue.use(Antd); 27 | 28 | Vue.config.productionTip = false 29 | 30 | // Adding template layouts to the vue components. 31 | Vue.component("layout-default", DefaultLayout); 32 | Vue.component("layout-dashboard", DashboardLayout); 33 | Vue.component("layout-dashboard-rtl", DashboardRTLLayout); 34 | 35 | new Vue({ 36 | router, 37 | render: h => h(App) 38 | }).$mount('#app') -------------------------------------------------------------------------------- /src/plugins/click-away.js: -------------------------------------------------------------------------------- 1 | // Click away event directive 2 | // Credits : https://medium.com/@Taha_Shashtari/an-easy-way-to-detect-clicks-outside-an-element-in-vue-1b51d43ff634 3 | import Vue from 'vue' 4 | // This variable will hold the reference to 5 | // document's click handler 6 | let handleOutsideClick 7 | Vue.directive('click-away', { 8 | bind (el, binding, vnode) { 9 | // Here's the click/touchstart handler 10 | // (it is registered below) 11 | handleOutsideClick = (e) => { 12 | e.stopPropagation() 13 | // Get the handler method name and the exclude array 14 | // from the object used in v-click-away 15 | const { handler, exclude } = binding.value 16 | // This variable indicates if the clicked element is excluded 17 | let clickedOnExcludedEl = false 18 | exclude.forEach(refName => { 19 | // We only run this code if we haven't detected 20 | // any excluded element yet 21 | if (!clickedOnExcludedEl) { 22 | // Get the element using the reference name 23 | const excludedEl = vnode.parent.context.$refs[refName].$el; 24 | 25 | // See if this excluded element 26 | // is the same element the user just clicked on 27 | clickedOnExcludedEl = excludedEl.contains(e.target) 28 | } 29 | }) 30 | // We check to see if the clicked element is not 31 | // the dialog element and not excluded 32 | if (!el.contains(e.target) && !clickedOnExcludedEl) { 33 | // If the clicked element is outside the dialog 34 | // and not the button, then call the outside-click handler 35 | // from the same component this directive is used in 36 | vnode.context[handler]() 37 | } 38 | } 39 | // Register click/touchstart event listeners on the whole page 40 | document.addEventListener('click', handleOutsideClick) 41 | document.addEventListener('touchstart', handleOutsideClick) 42 | }, 43 | unbind () { 44 | // If the element that has v-click-away is removed, then 45 | // unbind click/touchstart listeners from the whole page 46 | document.removeEventListener('click', handleOutsideClick) 47 | document.removeEventListener('touchstart', handleOutsideClick) 48 | } 49 | }) ; 50 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | let routes = [ 7 | { 8 | // will match everything 9 | path: '*', 10 | component: () => import('../views/404.vue'), 11 | }, 12 | { 13 | path: '/', 14 | name: 'خانه', 15 | redirect: '/dashboard', 16 | }, 17 | { 18 | path: '/dashboard', 19 | name: 'داشبورد', 20 | layout: "dashboard", 21 | // route level code-splitting 22 | // this generates a separate chunk (about.[hash].js) for this route 23 | // which is lazy-loaded when the route is visited. 24 | component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue'), 25 | }, 26 | { 27 | path: '/layout', 28 | name: 'Layout', 29 | layout: "dashboard", 30 | component: () => import('../views/Layout.vue'), 31 | }, 32 | { 33 | path: '/tables', 34 | name: 'جداول', 35 | layout: "dashboard", 36 | component: () => import('../views/Tables.vue'), 37 | }, 38 | { 39 | path: '/billing', 40 | name: 'صورتحساب', 41 | layout: "dashboard", 42 | component: () => import('../views/Billing.vue'), 43 | }, 44 | 45 | { 46 | path: '/Profile', 47 | name: 'پروفایل', 48 | layout: "dashboard", 49 | meta: { 50 | layoutClass: 'layout-profile', 51 | }, 52 | component: () => import('../views/Profile.vue'), 53 | }, 54 | { 55 | path: '/sign-in', 56 | name: 'ورود', 57 | component: () => import('../views/Sign-In.vue'), 58 | }, 59 | { 60 | path: '/sign-up', 61 | name: 'ثبت نام', 62 | meta: { 63 | layoutClass: 'layout-sign-up', 64 | }, 65 | component: () => import('../views/Sign-Up.vue'), 66 | }, 67 | ] 68 | 69 | // Adding layout property from each route to the meta 70 | // object so it can be accessed later. 71 | function addLayoutToRoute( route, parentLayout = "default" ) 72 | { 73 | route.meta = route.meta || {} ; 74 | route.meta.layout = route.layout || parentLayout ; 75 | 76 | if( route.children ) 77 | { 78 | route.children = route.children.map( ( childRoute ) => addLayoutToRoute( childRoute, route.meta.layout ) ) ; 79 | } 80 | return route ; 81 | } 82 | 83 | routes = routes.map( ( route ) => addLayoutToRoute( route ) ) ; 84 | 85 | const router = new VueRouter({ 86 | mode: 'hash', 87 | base: process.env.BASE_URL, 88 | mode: 'history', 89 | routes, 90 | scrollBehavior (to, from, savedPosition) { 91 | if ( to.hash ) { 92 | return { 93 | selector: to.hash, 94 | behavior: 'smooth', 95 | } 96 | } 97 | return { 98 | x: 0, 99 | y: 0, 100 | behavior: 'smooth', 101 | } 102 | } 103 | }) 104 | 105 | export default router 106 | -------------------------------------------------------------------------------- /src/scss/app.scss: -------------------------------------------------------------------------------- 1 | // ========================================================= 2 | // Muse - Vue Ant Design Dashboard - v1.0.0 3 | // ========================================================= 4 | 5 | // Product Page: https://www.creative-tim.com/product/vue-ant-design-dashboard 6 | // Copyright 2021 Creative Tim (https://www.creative-tim.com) 7 | // Coded by Creative Tim 8 | 9 | // ========================================================= 10 | // The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 11 | 12 | 13 | // app.scss 14 | // 15 | // Template's man stylesheet. 16 | // 17 | 18 | // Base 19 | @import "./base/_variables" ; 20 | @import "./base/_utilities" ; 21 | @import "./base/_override" ; 22 | @import "./base/_typography" ; 23 | // / Base 24 | 25 | // Layouts 26 | @import "./layouts/default" ; 27 | @import "./layouts/dashboard" ; 28 | @import "./layouts/dashboard-rtl" ; 29 | // Layouts 30 | 31 | // Components 32 | @import "./components/_avatar" ; 33 | @import "./components/_badge" ; 34 | @import "./components/_button" ; 35 | @import "./components/_card" ; 36 | @import "./components/_chart" ; 37 | @import "./components/_list" ; 38 | @import "./components/_progress" ; 39 | @import "./components/_settings-drawer" ; 40 | @import "./components/_space" ; 41 | @import "./components/_table" ; 42 | @import "./components/_tag" ; 43 | @import "./components/_timeline" ; 44 | @import "./components/_widget" ; 45 | @import "./components/dropdown" ; 46 | // / Components 47 | 48 | // Form 49 | @import "./form/_input" ; 50 | @import "./form/_checkbox" ; 51 | // / Form 52 | 53 | // Pages 54 | @import "./pages/_profile" ; 55 | @import "./pages/_sign-in" ; 56 | @import "./pages/_sign-up" ; 57 | // Pages 58 | -------------------------------------------------------------------------------- /src/scss/base/_typography.scss: -------------------------------------------------------------------------------- 1 | // _typography.scss 2 | // 3 | // Template's basic typography configurations. 4 | // 5 | 6 | body { 7 | font-family: $f-family; 8 | letter-spacing: -.3px; 9 | } 10 | 11 | $headers-font-sizes: ( "1": 48px, "2": 36px, "3": 30px, "4": 24px, "5": 20px, "6": 16px ) ; 12 | 13 | @each $index, $font-size in $headers-font-sizes { 14 | h#{$index}, 15 | .h#{$index} { 16 | font-size: $font-size; 17 | font-weight: $fw-bold; 18 | color: $color-gray-12; 19 | } 20 | // Output Ex : 21 | // h1, 22 | // .h1 { 23 | // font-size: 48px; 24 | // font-weight: $fw-bold; 25 | // color: $color-gray-12; 26 | // } 27 | } 28 | p { 29 | font-size: 14px; 30 | } -------------------------------------------------------------------------------- /src/scss/base/_utilities.scss: -------------------------------------------------------------------------------- 1 | // _utilities.scss 2 | // 3 | // Template's utility classes and helpers. 4 | // 5 | 6 | // Base Colors 7 | $colors: ( 8 | "primary": $color-primary, 9 | "secondary": $color-secondary, 10 | "success": $color-success, 11 | "warning": $color-warning, 12 | "danger": $color-danger, 13 | "dark": $color-dark, 14 | "white": $color-white, 15 | "muted": $color-muted, 16 | ) ; 17 | 18 | @each $name, $value in $colors { 19 | .bg-#{$name} { 20 | background-color: $value; 21 | } 22 | .text-#{$name} { 23 | color: $value; 24 | } 25 | .border-#{$name} { 26 | border-color: $value; 27 | } 28 | .fill-#{$name} { 29 | fill: $value; 30 | } 31 | .badge-dot-#{$name} .ant-badge-status-dot { 32 | background-color: $value; 33 | } 34 | .ant-tag-#{$name} { 35 | background-color: $value; 36 | color: #ffffff; 37 | border: none; 38 | } 39 | } 40 | 41 | // Overriding the dark text color. 42 | .text-dark { 43 | color: #142738; 44 | } 45 | // / Base Colors 46 | 47 | // Neutral Colors 48 | $neutral-colors: ( 49 | "gray-1": $color-gray-1, 50 | "gray-2": $color-gray-2, 51 | "gray-3": $color-gray-3, 52 | "gray-4": $color-gray-4, 53 | "gray-5": $color-gray-5, 54 | "gray-6": $color-gray-6, 55 | "gray-7": $color-gray-7, 56 | "gray-8": $color-gray-8, 57 | "gray-9": $color-gray-9, 58 | "gray-10": $color-gray-10, 59 | "gray-11": $color-gray-11, 60 | "gray-12": $color-gray-12, 61 | "muted": $color-muted, 62 | ) ; 63 | 64 | @each $name, $value in $neutral-colors { 65 | .bg-#{$name} { 66 | background-color: $value !important; 67 | } 68 | .text-#{$name} { 69 | color: $value !important; 70 | } 71 | .border-#{$name} { 72 | border-color: $value !important; 73 | } 74 | .fill-#{$name} { 75 | fill: $value !important; 76 | } 77 | } 78 | // / Neutral Colors 79 | 80 | // Font 81 | .font-regular { 82 | font-weight: $fw-regular !important; 83 | } 84 | .font-semibold { 85 | font-weight: $fw-semibold !important; 86 | } 87 | .font-bold { 88 | font-weight: $fw-bold !important; 89 | } 90 | .text-sm { 91 | font-size: 12px; 92 | } 93 | .text-md { 94 | font-size: 14px; 95 | } 96 | .text-lg { 97 | font-size: 16px; 98 | } 99 | .text-right { 100 | text-align: right; 101 | } 102 | .text-left { 103 | text-align: left; 104 | } 105 | .text-center { 106 | text-align: center; 107 | } 108 | // / Font 109 | 110 | 111 | 112 | // Margin & Padding 113 | @for $i from 0 through 10 { 114 | $j: $i * 5; 115 | .mt-#{$j} { 116 | margin-top: #{$j}px !important; 117 | } 118 | .mb-#{$j} { 119 | margin-bottom: #{$j}px !important; 120 | } 121 | .ml-#{$j} { 122 | margin-left: #{$j}px !important; 123 | } 124 | .mr-#{$j} { 125 | margin-right: #{$j}px !important; 126 | } 127 | .my-#{$j} { 128 | @extend .mt-#{$j}; 129 | @extend .mb-#{$j}; 130 | } 131 | .mx-#{$j} { 132 | @extend .ml-#{$j}; 133 | @extend .mr-#{$j}; 134 | } 135 | .m-#{$j} { 136 | @extend .my-#{$j}; 137 | @extend .mx-#{$j}; 138 | } 139 | } 140 | .mt-auto { 141 | margin-top: auto !important; 142 | } 143 | .mb-auto { 144 | margin-bottom: auto !important; 145 | } 146 | .ml-auto { 147 | margin-left: auto !important; 148 | } 149 | .mr-auto { 150 | margin-right: auto !important; 151 | } 152 | .m-auto { 153 | @extend .mt-auto; 154 | @extend .mb-auto; 155 | @extend .ml-auto; 156 | @extend .mr-auto; 157 | } 158 | .mb-24 { 159 | margin-bottom: 24px; 160 | } 161 | 162 | @for $i from 0 through 10 { 163 | $j: $i * 5; 164 | .pt-#{$j} { 165 | padding-top: #{$j}px !important; 166 | } 167 | .pb-#{$j} { 168 | padding-bottom: #{$j}px !important; 169 | } 170 | .pl-#{$j} { 171 | padding-left: #{$j}px !important; 172 | } 173 | .pr-#{$j} { 174 | padding-right: #{$j}px !important; 175 | } 176 | .py-#{$j} { 177 | @extend .pt-#{$j}; 178 | @extend .pb-#{$j}; 179 | } 180 | .px-#{$j} { 181 | @extend .pl-#{$j}; 182 | @extend .pr-#{$j}; 183 | } 184 | .p-#{$j} { 185 | @extend .py-#{$j}; 186 | @extend .px-#{$j}; 187 | } 188 | } 189 | // / Margin & Padding 190 | 191 | // Height 192 | .h-full { 193 | height: 100%; 194 | } 195 | // / Height 196 | 197 | // Shadows 198 | $shadows: ( 199 | 0: $shadow-0, 200 | 1: $shadow-1, 201 | 2: $shadow-2, 202 | 3: $shadow-3, 203 | ) ; 204 | 205 | @each $name, $value in $shadows { 206 | .shadow-#{$name} { 207 | box-shadow: $value !important; 208 | } 209 | } 210 | // / Shadows 211 | 212 | 213 | // RTL 214 | .layout-dashboard-rtl { 215 | .text-right { 216 | text-align: left; 217 | } 218 | .text-left { 219 | text-align: right; 220 | } 221 | 222 | @for $i from 0 through 10 { 223 | $j: $i * 5; 224 | .ml-#{$j} { 225 | margin-right: #{$j}px !important; 226 | } 227 | .mr-#{$j} { 228 | margin-left: #{$j}px !important; 229 | } 230 | .pl-#{$j} { 231 | padding-right: #{$j}px !important; 232 | } 233 | .pr-#{$j} { 234 | padding-left: #{$j}px !important; 235 | } 236 | } 237 | } 238 | // / RTL -------------------------------------------------------------------------------- /src/scss/base/_variables.scss: -------------------------------------------------------------------------------- 1 | // _variables.scss 2 | // 3 | // Template's variables for colors, font weight and... . 4 | // 5 | 6 | 7 | // Base Colors 8 | $color-primary: #1890FF; 9 | $color-secondary: #B37FEB; 10 | $color-success: #52C41A; 11 | $color-warning: #FADB14; 12 | $color-danger: #F5222D; 13 | $color-dark: #141414; 14 | $color-white: #FFFFFF; 15 | // / Base Colors 16 | 17 | // Neutral Colors 18 | $color-gray-1: #FFFFFF; 19 | $color-gray-2: #FAFAFA; 20 | $color-gray-3: #F5F5F5; 21 | $color-gray-4: #F0F0F0; 22 | $color-gray-5: #D9D9D9; 23 | $color-gray-6: #BFBFBF; 24 | $color-gray-7: #8C8C8C; 25 | $color-gray-8: #595959; 26 | $color-gray-9: #434343; 27 | $color-gray-10: #262626; 28 | $color-gray-11: #1F1F1F; 29 | $color-gray-12: #141414; 30 | $color-muted: $color-gray-7; 31 | // / Neutral Colors 32 | 33 | // Font Weights 34 | $fw-regular: 400; 35 | $fw-semibold: 600; 36 | $fw-bold: 700; 37 | // / Font Weights 38 | 39 | // Font Family 40 | $f-family: "yekan", Helvetica, Arial, sans-serif; 41 | // / Font Family 42 | 43 | // Responsive Breakpoints 44 | $xs: 480px ; 45 | $sm: 576px ; 46 | $md: 768px ; 47 | $lg: 992px ; 48 | $xl: 1200px ; 49 | $xxl: 1600px ; 50 | // / Responsive Breakpoints 51 | 52 | // Ant Design Vars 53 | $btn-height-base: 40px; 54 | $btn-height-lg: 48px; 55 | $btn-height-sm: 34px; 56 | $btn-padding-base: 0px 15px; 57 | $btn-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07); 58 | $btn-border-radius-base: 6px; 59 | $btn-font-size-base: 12px; 60 | $btn-font-size-lg: 16px; 61 | $btn-font-size-sm: 12px; 62 | $btn-font-weight: $fw-bold; 63 | $input-color: $color-gray-7; 64 | $input-border-color: $color-gray-5; 65 | $input-hover-border-color: $color-primary; 66 | $input-height-base: $btn-height-base; 67 | $input-height-lg: $btn-height-lg; 68 | $input-height-sm: $btn-height-sm; 69 | $select-color: $color-gray-7; 70 | $select-border-color: $color-gray-5; 71 | $select-hover-border-color: $color-primary; 72 | // / Ant Design Vars 73 | 74 | // Template Vars 75 | $shadow-0: none; 76 | $shadow-1: 0px 20px 27px rgba(0, 0, 0, 0.05); 77 | $shadow-2: 0px 4px 6px rgba(0, 0, 0, 0.12); 78 | $shadow-3: 0px 5px 10px rgba(0, 0, 0, 0.12); 79 | 80 | $submenu-links-p: 10px 16px; 81 | // / Template Vars 82 | 83 | -------------------------------------------------------------------------------- /src/scss/components/_avatar.scss: -------------------------------------------------------------------------------- 1 | // _avatar.scss 2 | // 3 | // Template's avatar styles. 4 | // 5 | 6 | .avatar-chips .ant-avatar-image { 7 | border: 1px solid #ffffff; 8 | &:hover { 9 | z-index: 1; 10 | } 11 | } 12 | .avatar-chips .ant-space-item { 13 | &:hover { 14 | z-index: 1; 15 | } 16 | } -------------------------------------------------------------------------------- /src/scss/components/_badge.scss: -------------------------------------------------------------------------------- 1 | // _badge.scss 2 | // 3 | // Template's badge styles. 4 | // 5 | 6 | .layout-dashboard { 7 | .header-control { 8 | .ant-scroll-number-only > p.ant-scroll-number-only-unit { 9 | height: 18px; 10 | margin: 0; 11 | font-size: 10px; 12 | font-weight: $fw-semibold; 13 | } 14 | .ant-badge-count { 15 | min-width: 18px; 16 | height: 18px; 17 | line-height: 18px; 18 | background-color: $color-danger; 19 | } 20 | .ant-scroll-number-only { 21 | height: 18px; 22 | } 23 | .ant-badge { 24 | margin: 0 7px; 25 | .ant-dropdown-link { 26 | padding: 0; 27 | margin: 0; 28 | } 29 | } 30 | } 31 | } 32 | 33 | .layout-dashboard-rtl { 34 | .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component { 35 | left: 0; 36 | right: auto; 37 | transform: translate(-50%, -50%); 38 | } 39 | 40 | .ant-badge-status-text { 41 | margin-right: 8px; 42 | margin-left: 0; 43 | } 44 | } -------------------------------------------------------------------------------- /src/scss/components/_button.scss: -------------------------------------------------------------------------------- 1 | // _button.scss 2 | // 3 | // Template's button styles. 4 | // 5 | 6 | .ant-btn svg { 7 | margin-right: 5px; 8 | } 9 | .ant-btn.ant-btn-icon-only svg { 10 | margin-right: 0; 11 | } 12 | .ant-btn > .anticon + span { 13 | margin-left: 0; 14 | } 15 | .ant-btn > span + .anticon { 16 | margin-left: 5px; 17 | } 18 | .ant-btn > svg { 19 | vertical-align: middle; 20 | } 21 | .ant-btn > svg + span { 22 | vertical-align: middle; 23 | } 24 | .ant-btn-icon-only.ant-btn-lg:not(.ant-btn-round), 25 | .ant-btn-icon-only.ant-btn:not(.ant-btn-round), 26 | .ant-btn-icon-only.ant-btn-sm:not(.ant-btn-round) { 27 | padding: 0; 28 | } 29 | 30 | .ant-btn-circle, .ant-btn-circle-outline { 31 | border-radius: 50%; 32 | } 33 | .ant-btn.fab { 34 | width: 50px; 35 | height: 50px; 36 | background-color: $color-white; 37 | position: fixed; 38 | bottom: 30px; 39 | right: 30px; 40 | box-shadow: $shadow-3; 41 | 42 | svg { 43 | margin: 0; 44 | } 45 | } 46 | 47 | .ant-btn.fab { 48 | width: 50px; 49 | height: 50px; 50 | background-color: $color-white; 51 | position: fixed; 52 | bottom: 30px; 53 | right: 30px; 54 | box-shadow: $shadow-3; 55 | 56 | svg { 57 | margin: 0; 58 | } 59 | } 60 | 61 | .layout-dashboard-rtl { 62 | .ant-btn-group .ant-btn { 63 | border-radius: 0; 64 | } 65 | .ant-btn-group > .ant-btn:first-child:not(:last-child), .ant-btn-group > span:first-child:not(:last-child) > .ant-btn { 66 | border-radius: 0; 67 | border-top-right-radius: 4px; 68 | border-bottom-right-radius: 4px; 69 | } 70 | .ant-btn-group > .ant-btn:last-child:not(:first-child), .ant-btn-group > span:last-child:not(:first-child) > .ant-btn { 71 | border-radius: 0; 72 | border-top-left-radius: 4px; 73 | border-bottom-left-radius: 4px; 74 | } 75 | .ant-btn-group .ant-btn + .ant-btn, .ant-btn + .ant-btn-group, .ant-btn-group span + .ant-btn, .ant-btn-group .ant-btn + span, .ant-btn-group > span + span, .ant-btn-group + .ant-btn, .ant-btn-group + .ant-btn-group { 76 | margin-right: -1px; 77 | margin-left: 0; 78 | } 79 | 80 | .ant-radio-button-wrapper { 81 | border-left: 1px solid $color-gray-5; 82 | border-right-width: 0; 83 | } 84 | .ant-radio-button-wrapper:first-child { 85 | border-right-width: 1px; 86 | border-radius: 0 4px 4px 0; 87 | } 88 | .ant-radio-button-wrapper:last-child { 89 | border-radius: 4px 0 0 4px; 90 | border-left: 1px solid $color-gray-5; 91 | } 92 | .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { 93 | color: $color-gray-1; 94 | border-color: $color-primary; 95 | } 96 | .ant-radio-group-outline .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { 97 | color: $color-primary; 98 | border-color: $color-primary; 99 | } 100 | .ant-radio-button-wrapper:not(:first-child)::before { 101 | left: auto; 102 | right: -1px; 103 | } 104 | .ant-btn svg { 105 | margin-left: 5px; 106 | margin-right: 0; 107 | } 108 | 109 | .ant-btn.fab { 110 | left: 30px; 111 | right: auto; 112 | 113 | svg { 114 | margin: 0; 115 | } 116 | } 117 | } -------------------------------------------------------------------------------- /src/scss/components/_card.scss: -------------------------------------------------------------------------------- 1 | // _card.scss 2 | // 3 | // Template's cards styles. 4 | // 5 | 6 | // Cards 7 | 8 | .ant-card-body { 9 | padding: 16px; 10 | } 11 | 12 | .layout-dashboard { 13 | .ant-card { 14 | border-radius: 12px; 15 | box-shadow: $shadow-1; 16 | } 17 | } 18 | 19 | .ant-card-head-title { 20 | h6 { 21 | margin-bottom: 0; 22 | } 23 | p { 24 | font-weight: $fw-semibold; 25 | color: $color-gray-7; 26 | margin-bottom: 0; 27 | } 28 | span { 29 | font-weight: $fw-bold; 30 | margin-left: 5px; 31 | } 32 | } 33 | .header-solid .ant-card-head { 34 | border-bottom: 0; 35 | } 36 | .ant-card-head-wrapper { 37 | min-height: 72px; 38 | } 39 | .card-header-date { 40 | margin-bottom: 0; 41 | font-weight: $fw-bold; 42 | color: $color-muted; 43 | >* { 44 | vertical-align: middle; 45 | } 46 | 47 | svg { 48 | margin-right: 5px; 49 | } 50 | } 51 | .ant-card.card-info, 52 | .ant-card.card-info-2 { 53 | h6 { 54 | color: $color-gray-7; 55 | margin-bottom: 0; 56 | } 57 | p { 58 | font-size: 16px; 59 | color: $color-gray-7; 60 | } 61 | .col-content { 62 | flex-grow: 1; 63 | margin-right: 20px; 64 | display: flex; 65 | flex-direction: column; 66 | justify-content: space-between; 67 | } 68 | .col-img { 69 | width: 100%; 70 | flex-grow: 1; 71 | flex-shrink: 0; 72 | margin-top: 20px; 73 | 74 | @media( min-width: $xl ){ 75 | width: auto; 76 | flex-shrink: 1; 77 | flex-grow: 0; 78 | margin-top: 0px; 79 | } 80 | } 81 | .card-img-bg { 82 | width: 100%; 83 | height: 300px; 84 | background-size: cover; 85 | background-position: center; 86 | border-radius: 8px; 87 | box-shadow: $shadow-2; 88 | position: relative; 89 | overflow: hidden; 90 | 91 | @media( min-width: $xl ){ 92 | width: 220px; 93 | height: 220px; 94 | } 95 | 96 | img { 97 | position: absolute; 98 | top: 0; 99 | right: 0; 100 | left: 0; 101 | bottom: 0; 102 | margin: auto; 103 | height: 100%; 104 | width: 100%; 105 | object-fit: cover; 106 | } 107 | } 108 | .card-footer a { 109 | color: $color-primary; 110 | font-weight: $fw-semibold; 111 | 112 | span { 113 | vertical-align: middle; 114 | } 115 | svg { 116 | vertical-align: middle; 117 | 118 | path { 119 | fill: $color-primary; 120 | } 121 | } 122 | } 123 | } 124 | .ant-card.card-info-2 { 125 | .ant-card-body { 126 | height: 100%; 127 | } 128 | .col-content { 129 | padding: 24px; 130 | margin-right: 0; 131 | border-radius: 8px; 132 | background-size: cover; 133 | } 134 | h6, 135 | h5, 136 | p, 137 | .card-footer a { 138 | color: $color-gray-1; 139 | } 140 | .card-footer a svg path { 141 | fill: $color-gray-1; 142 | } 143 | } 144 | .card-credit { 145 | background-position: center; 146 | background-size: cover; 147 | border: none; 148 | 149 | * { 150 | color: $color-gray-1; 151 | } 152 | 153 | .ant-card-body { 154 | padding-top: 15px; 155 | } 156 | 157 | .card-number { 158 | word-spacing: 10px; 159 | font-weight: $fw-semibold; 160 | margin-bottom: 45px; 161 | } 162 | .card-footer { 163 | display: flex; 164 | align-items: flex-end; 165 | 166 | h6 { 167 | margin-bottom: 0; 168 | } 169 | 170 | p { 171 | margin-bottom: 0px; 172 | } 173 | } 174 | .col-logo img { 175 | max-width: 50px; 176 | } 177 | } 178 | 179 | .payment-method-card.ant-card { 180 | box-shadow: none; 181 | word-spacing: 10px; 182 | 183 | .ant-card-body { 184 | display: flex; 185 | align-items: center; 186 | justify-content: space-between; 187 | } 188 | 189 | h6 { 190 | font-weight: $fw-semibold; 191 | margin-bottom: 0; 192 | } 193 | .ant-btn { 194 | margin-right: -20px; 195 | } 196 | img { 197 | width: 40px; 198 | } 199 | } 200 | 201 | .card-billing-info.ant-card { 202 | box-shadow: none; 203 | background-color: $color-gray-2; 204 | border: 1px solid $color-gray-3; 205 | 206 | .ant-card-body { 207 | @media( min-width: $lg ){ 208 | display: flex; 209 | } 210 | } 211 | .col-action { 212 | margin-left: auto; 213 | flex-shrink: 0; 214 | margin-top: 10px; 215 | @media( min-width: $lg ){ 216 | margin-top: 0; 217 | } 218 | } 219 | .ant-btn { 220 | color: $color-gray-7; 221 | } 222 | } 223 | 224 | .card-profile-head { 225 | margin: -53px 0px 24px; 226 | 227 | @media( min-width: $lg ){ 228 | margin: -53px 24px 24px; 229 | } 230 | 231 | .ant-card-head { 232 | border-bottom: 0; 233 | padding: 0 16px; 234 | 235 | .ant-radio-group { 236 | margin-top: 15px; 237 | 238 | @media( min-width: $lg ){ 239 | margin-top: 0; 240 | } 241 | } 242 | 243 | .col-info { 244 | display: flex; 245 | align-items: center; 246 | padding-right: 10px; 247 | } 248 | .avatar-info { 249 | margin-left: 16px; 250 | padding-right: 10px; 251 | h4 { 252 | font-weight: $fw-semibold; 253 | margin-bottom: 0; 254 | } 255 | } 256 | .ant-avatar { 257 | box-shadow: $shadow-3; 258 | border-radius: 8px; 259 | margin: 0; 260 | } 261 | } 262 | } 263 | 264 | .card-profile-information { 265 | hr { 266 | opacity: .2; 267 | } 268 | .ant-descriptions .ant-descriptions-row > th, .ant-descriptions .ant-descriptions-row > td { 269 | padding-bottom: 16px; 270 | } 271 | .ant-descriptions .ant-descriptions-item-content i { 272 | font-size: 15px; 273 | } 274 | } 275 | 276 | .card-project.ant-card { 277 | box-shadow: none; 278 | border: none; 279 | 280 | .ant-card-cover img { 281 | border-radius: 8px; 282 | box-shadow: $shadow-2; 283 | } 284 | .ant-card-body { 285 | padding: 16px 0 0; 286 | } 287 | 288 | .card-tag, 289 | p { 290 | font-weight: $fw-semibold; 291 | color: $color-muted; 292 | margin-bottom: 5px; 293 | } 294 | 295 | p { 296 | margin-bottom: 0; 297 | } 298 | h5 { 299 | font-weight: $fw-semibold; 300 | } 301 | .card-footer { 302 | margin-top: 22px; 303 | } 304 | } 305 | 306 | .card-signup { 307 | width: 100%; 308 | max-width: 500px; 309 | margin: auto; 310 | box-shadow: $shadow-1; 311 | border-radius: 12px; 312 | margin-top: -190px; 313 | margin-bottom: 20px; 314 | 315 | @media( min-width: $md ) { 316 | margin-bottom: 120px; 317 | } 318 | 319 | .sign-up-gateways { 320 | text-align: center; 321 | 322 | .ant-btn { 323 | margin-right: 10px; 324 | margin-left: 10px; 325 | height: 60px; 326 | width: 70px; 327 | box-shadow: none; 328 | 329 | @media( min-width: $md ) { 330 | width: 100px; 331 | } 332 | img { 333 | width: 20px; 334 | } 335 | } 336 | } 337 | } 338 | // / Cards -------------------------------------------------------------------------------- /src/scss/components/_chart.scss: -------------------------------------------------------------------------------- 1 | // _chart.scss 2 | // 3 | // Template's charts styles. 4 | // 5 | 6 | .dashboard-bar-chart { 7 | height: 100%; 8 | canvas { 9 | border-radius: 8px; 10 | box-shadow: $shadow-2; 11 | } 12 | .card-title { 13 | margin-top: 24px; 14 | h6 { 15 | font-weight: $fw-bold; 16 | margin-bottom: 0; 17 | } 18 | p { 19 | font-weight: $fw-semibold; 20 | color: $color-gray-7; 21 | } 22 | span { 23 | font-weight: $fw-bold; 24 | margin-left: 5px; 25 | } 26 | } 27 | .card-content { 28 | p { 29 | } 30 | } 31 | .card-footer { 32 | h4 { 33 | font-weight: $fw-bold; 34 | margin-bottom: 0; 35 | } 36 | span { 37 | font-weight: $fw-semibold; 38 | } 39 | } 40 | } 41 | 42 | .dashboard-bar-line { 43 | height: 100%; 44 | .ant-card-extra { 45 | .ant-badge { 46 | display: block; 47 | } 48 | .ant-badge-status-dot { 49 | width: 20px; 50 | height: 4px; 51 | border-radius: 5px; 52 | } 53 | .ant-badge-status-text { 54 | font-weight: $fw-semibold; 55 | color: $color-gray-7; 56 | } 57 | } 58 | } -------------------------------------------------------------------------------- /src/scss/components/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // _dropdown.scss 2 | // 3 | // Template's dropdown styles. 4 | // 5 | 6 | .ant-dropdown-menu-item > .anticon:first-child, .ant-dropdown-menu-submenu-title > .anticon:first-child, .ant-dropdown-menu-item > span > .anticon:first-child, .ant-dropdown-menu-submenu-title > span > .anticon:first-child { 7 | vertical-align: -1px; 8 | } 9 | .ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title { 10 | padding: 6px 15px; 11 | color: $color-gray-8; 12 | } 13 | .ant-dropdown-menu-item-disabled, .ant-dropdown-menu-submenu-title-disabled { 14 | color: rgba(0, 0, 0, 0.25); 15 | } 16 | .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover { 17 | background-color: $color-gray-3; 18 | } 19 | .ant-btn.ant-dropdown-trigger svg { 20 | margin-right: 0; 21 | } 22 | 23 | 24 | .layout-dashboard-rtl { 25 | .ant-dropdown-menu { 26 | text-align: right; 27 | } 28 | } -------------------------------------------------------------------------------- /src/scss/components/_list.scss: -------------------------------------------------------------------------------- 1 | // _list.scss 2 | // 3 | // Template's lists styles. 4 | // 5 | 6 | 7 | // Lists 8 | .invoice-list, 9 | .transactions-list { 10 | .ant-list-item { 11 | padding: 11px 0; 12 | } 13 | .ant-list-item-action .ant-btn { 14 | font-weight: $fw-semibold; 15 | color: $color-gray-12; 16 | } 17 | .ant-list-item-meta-title { 18 | font-size: 14px; 19 | font-weight: $fw-semibold; 20 | color: $color-gray-12; 21 | } 22 | .ant-list-item-meta-description { 23 | font-size: 12px; 24 | font-weight: $fw-semibold; 25 | color: $color-gray-7; 26 | } 27 | .amount { 28 | font-size: 14px; 29 | font-weight: $fw-semibold; 30 | color: $color-gray-7; 31 | } 32 | } 33 | 34 | .transactions-list { 35 | h6 { 36 | font-size: 12px; 37 | font-weight: $fw-semibold; 38 | color: $color-muted; 39 | margin: 6px 0; 40 | } 41 | .ant-list-item { 42 | padding: 12px 0; 43 | 44 | &:first-child { 45 | padding-top: 0; 46 | } 47 | } 48 | .ant-list-item-action .ant-btn { 49 | font-weight: $fw-semibold; 50 | color: $color-gray-12; 51 | } 52 | .ant-list-item-meta-title { 53 | margin-bottom: 0; 54 | } 55 | .amount { 56 | font-size: 16px; 57 | font-weight: $fw-bold; 58 | 59 | span.text-warning { 60 | font-size: 14px; 61 | font-weight: $fw-semibold; 62 | } 63 | } 64 | .ant-list-item-meta { 65 | align-items: center; 66 | } 67 | } 68 | 69 | .conversations-list { 70 | .ant-list-item { 71 | padding: 11px 0; 72 | } 73 | .ant-avatar { 74 | border-radius: 10.5px; 75 | box-shadow: $shadow-2; 76 | } 77 | .ant-list-item-meta-title { 78 | font-size: 14px; 79 | font-weight: $fw-semibold; 80 | color: $color-gray-12; 81 | margin: 0; 82 | } 83 | .ant-list-item-meta { 84 | align-items: center; 85 | } 86 | .ant-list-item-meta-description { 87 | font-size: 12px; 88 | font-weight: $fw-semibold; 89 | color: $color-gray-7; 90 | } 91 | .ant-list-item-action { 92 | margin-left: 0; 93 | } 94 | .ant-btn-link { 95 | font-size: 12px; 96 | } 97 | } 98 | 99 | .layout-dashboard-rtl { 100 | .ant-list-item-meta-avatar { 101 | margin-left: 16px; 102 | margin-right: 0; 103 | } 104 | } 105 | // / Lists -------------------------------------------------------------------------------- /src/scss/components/_progress.scss: -------------------------------------------------------------------------------- 1 | // _progress.scss 2 | // 3 | // Template's progress styles. 4 | // 5 | 6 | 7 | .progress-right { 8 | display: flex; 9 | align-items: center; 10 | } -------------------------------------------------------------------------------- /src/scss/components/_settings-drawer.scss: -------------------------------------------------------------------------------- 1 | // _settings-drawer.scss 2 | // 3 | // Template's settings drawer styles. 4 | // 5 | 6 | 7 | // Settings Drawer 8 | .layout-dashboard { 9 | .settings-drawer { 10 | .ant-drawer-body { 11 | height: 100%; 12 | padding: 30px; 13 | box-shadow: $shadow-1; 14 | overflow: auto; 15 | } 16 | 17 | .btn-close { 18 | position: absolute; 19 | right: 0; 20 | top: 0; 21 | } 22 | .drawer-content { 23 | h6 { 24 | font-weight: $fw-semibold; 25 | color: $color-gray-12; 26 | margin-bottom: 0; 27 | } 28 | >h6 { 29 | font-size: 20px; 30 | margin-bottom: 0; 31 | } 32 | p { 33 | color: $color-gray-7; 34 | } 35 | >hr { 36 | margin: 18px 0; 37 | border: none; 38 | height: 1px; 39 | background-color: $color-gray-3; 40 | } 41 | .sidebar-color { 42 | h6 { 43 | margin-bottom: 8px; 44 | } 45 | .ant-btn { 46 | width: 20px; 47 | height: 20px; 48 | margin: 0; 49 | padding: 0; 50 | border-radius: 4px; 51 | } 52 | .ant-radio-button-wrapper { 53 | width: 20px; 54 | height: 20px; 55 | margin: 0; 56 | padding: 0; 57 | border-radius: 5px; 58 | margin-right: 4px; 59 | border: 2px solid $color-gray-1; 60 | 61 | &::before { 62 | display: none; 63 | } 64 | 65 | &.ant-radio-button-wrapper-checked { 66 | border-color: $color-gray-7; 67 | box-shadow: none; 68 | } 69 | @each $name, $value in $colors { 70 | &.bg-#{$name}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { 71 | background-color: $value; 72 | } 73 | } 74 | } 75 | } 76 | .sidenav-type { 77 | margin-top: 5px; 78 | .ant-radio-group { 79 | display: flex; 80 | flex: 1 0 0; 81 | width: 100%; 82 | } 83 | .ant-radio-button-wrapper { 84 | margin-right: 4px; 85 | border-radius: 4px; 86 | flex-grow: 1; 87 | flex-shrink: 0; 88 | width: 50%; 89 | text-align: center; 90 | font-weight: $fw-bold; 91 | font-size: 12px; 92 | 93 | &:not(.ant-radio-button-wrapper-checked) { 94 | border: 1px solid $color-gray-7; 95 | } 96 | 97 | &:first-child, 98 | &:last-child { 99 | border-radius: 4px; 100 | } 101 | 102 | &::before { 103 | display: none; 104 | } 105 | } 106 | } 107 | .navbar-fixed { 108 | margin-top: 20px; 109 | h6 { 110 | margin-bottom: 5px; 111 | } 112 | } 113 | .download { 114 | margin-top: 20px; 115 | } 116 | .github-stars { 117 | .ant-btn { 118 | margin: 0; 119 | color: $color-gray-9; 120 | background-color: $color-gray-2; 121 | font-weight: $fw-semibold; 122 | box-shadow: none; 123 | padding: 0 12px; 124 | 125 | &:last-child { 126 | background-color: $color-white; 127 | } 128 | } 129 | .ant-btn svg { 130 | fill: $color-gray-9; 131 | margin-right: 3px; 132 | vertical-align: -3px; 133 | } 134 | .ant-btn-group .ant-btn + .ant-btn, .ant-btn + .ant-btn-group, .ant-btn-group span + .ant-btn, .ant-btn-group .ant-btn + span, .ant-btn-group > span + span, .ant-btn-group + .ant-btn, .ant-btn-group + .ant-btn-group { 135 | margin-left: -1px; 136 | } 137 | } 138 | .sharing { 139 | margin-top: 20px; 140 | text-align: center; 141 | h6 { 142 | margin-bottom: 8px; 143 | } 144 | .ant-btn { 145 | height: 40px; 146 | padding: 0 20px; 147 | border-radius: 6px; 148 | svg { 149 | margin-right: 6px; 150 | vertical-align: middle; 151 | fill: $color-gray-1; 152 | } 153 | } 154 | } 155 | } 156 | } 157 | } 158 | 159 | .settings-drawer { 160 | .ant-drawer-body { 161 | height: 100%; 162 | padding: 30px; 163 | box-shadow: $shadow-1; 164 | overflow: auto; 165 | } 166 | 167 | .btn-close { 168 | position: absolute; 169 | right: 0; 170 | top: 0; 171 | } 172 | .drawer-content { 173 | h6 { 174 | font-weight: $fw-semibold; 175 | color: $color-gray-12; 176 | margin-bottom: 0; 177 | } 178 | >h6 { 179 | font-size: 20px; 180 | margin-bottom: 0; 181 | } 182 | p { 183 | color: $color-gray-7; 184 | } 185 | >hr { 186 | margin: 18px 0; 187 | border: none; 188 | height: 1px; 189 | background-color: $color-gray-3; 190 | } 191 | .sidebar-color { 192 | h6 { 193 | margin-bottom: 8px; 194 | } 195 | .ant-btn { 196 | width: 20px; 197 | height: 20px; 198 | margin: 0; 199 | padding: 0; 200 | border-radius: 4px; 201 | } 202 | .ant-radio-button-wrapper { 203 | width: 20px; 204 | height: 20px; 205 | margin: 0; 206 | padding: 0; 207 | border-radius: 5px; 208 | margin-right: 4px; 209 | border: 2px solid $color-gray-1; 210 | 211 | &::before { 212 | display: none; 213 | } 214 | 215 | &.ant-radio-button-wrapper-checked { 216 | border-color: $color-gray-7; 217 | box-shadow: none; 218 | } 219 | @each $name, $value in $colors { 220 | &.bg-#{$name}.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { 221 | background-color: $value; 222 | } 223 | } 224 | } 225 | } 226 | .sidenav-type { 227 | margin-top: 5px; 228 | .ant-radio-group { 229 | display: flex; 230 | flex: 1 0 0; 231 | width: 100%; 232 | } 233 | .ant-radio-button-wrapper { 234 | margin-right: 4px; 235 | border-radius: 4px; 236 | flex-grow: 1; 237 | flex-shrink: 0; 238 | width: 50%; 239 | text-align: center; 240 | font-weight: $fw-bold; 241 | font-size: 12px; 242 | 243 | &:not(.ant-radio-button-wrapper-checked) { 244 | border: 1px solid $color-gray-7; 245 | } 246 | 247 | &:first-child, 248 | &:last-child { 249 | border-radius: 4px; 250 | } 251 | 252 | &::before { 253 | display: none; 254 | } 255 | } 256 | } 257 | .navbar-fixed { 258 | margin-top: 20px; 259 | h6 { 260 | margin-bottom: 5px; 261 | } 262 | } 263 | .download { 264 | margin-top: 20px; 265 | .ant-btn { 266 | margin: 5px 0; 267 | } 268 | } 269 | .github-stars { 270 | margin-top: 20px; 271 | text-align: center; 272 | display: flex; 273 | justify-content: center; 274 | 275 | .ant-btn { 276 | margin: 0; 277 | color: $color-gray-9; 278 | background-color: $color-gray-2; 279 | font-weight: $fw-semibold; 280 | box-shadow: none; 281 | padding: 0 12px; 282 | 283 | &:last-child { 284 | background-color: $color-white; 285 | } 286 | } 287 | .ant-btn svg { 288 | fill: $color-gray-9; 289 | margin-right: 3px; 290 | vertical-align: -3px; 291 | } 292 | .ant-btn-group .ant-btn + .ant-btn, .ant-btn + .ant-btn-group, .ant-btn-group span + .ant-btn, .ant-btn-group .ant-btn + span, .ant-btn-group > span + span, .ant-btn-group + .ant-btn, .ant-btn-group + .ant-btn-group { 293 | margin-left: -1px; 294 | } 295 | } 296 | .sharing { 297 | margin-top: 20px; 298 | text-align: center; 299 | h6 { 300 | margin-bottom: 8px; 301 | } 302 | .ant-btn { 303 | height: 40px; 304 | padding: 0 20px; 305 | border-radius: 6px; 306 | svg { 307 | margin-right: 6px; 308 | vertical-align: middle; 309 | fill: $color-gray-1; 310 | } 311 | } 312 | } 313 | } 314 | } 315 | 316 | .layout-dashboard-rtl { 317 | .settings-drawer.settings-drawer-rtl { 318 | left: 0; 319 | direction: ltr; 320 | 321 | .btn-close { 322 | position: absolute; 323 | right: auto; 324 | left: 0; 325 | top: 0; 326 | } 327 | 328 | .drawer-content { 329 | .github-stars { 330 | .ant-btn-group .ant-btn + .ant-btn, .ant-btn + .ant-btn-group, .ant-btn-group span + .ant-btn, .ant-btn-group .ant-btn + span, .ant-btn-group > span + span, .ant-btn-group + .ant-btn, .ant-btn-group + .ant-btn-group { 331 | margin-right: -1px; 332 | margin-left: 0; 333 | } 334 | } 335 | } 336 | } 337 | .ant-drawer-left .ant-drawer-content-wrapper { 338 | left: 0; 339 | direction: rtl; 340 | } 341 | } 342 | // / Settings Drawer -------------------------------------------------------------------------------- /src/scss/components/_space.scss: -------------------------------------------------------------------------------- 1 | // _space.scss 2 | // 3 | // Template's space styles. 4 | // 5 | 6 | 7 | .layout-dashboard-rtl { 8 | .ant-space-horizontal { 9 | direction: ltr; 10 | } 11 | } -------------------------------------------------------------------------------- /src/scss/components/_table.scss: -------------------------------------------------------------------------------- 1 | // _table.scss 2 | // 3 | // Template's tables styles. 4 | // 5 | 6 | 7 | // Tables 8 | .ant-table-thead > tr > th { 9 | color: $color-gray-7; 10 | font-weight: $fw-bold; 11 | background-color: transparent; 12 | font-size: 12px; 13 | } 14 | .ant-table-thead > tr > th, .ant-table-tbody > tr > td { 15 | padding: 16px 50px; 16 | text-align: right; 17 | 18 | } 19 | .ant-table-tbody > tr:last-child > td { 20 | border-bottom: 0; 21 | } 22 | .ant-table-tbody > tr > td h6 { 23 | font-size: 14px; 24 | font-weight: $fw-semibold; 25 | color: $color-gray-12; 26 | } 27 | .ant-table-tbody .ant-progress-bg { 28 | height: 3px !important; 29 | } 30 | .ant-table-tbody .ant-progress { 31 | line-height: 3px; 32 | margin-top: 3px; 33 | display: block; 34 | } 35 | .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { 36 | background-color: rgba(0, 0, 0, 0.03); 37 | } 38 | .table-upload-btn { 39 | margin: 20px; 40 | margin-top: 10px; 41 | .ant-btn { 42 | box-shadow: none; 43 | font-weight: $fw-semibold; 44 | 45 | &:hover svg path, 46 | &:focus svg path, 47 | &:active svg path { 48 | fill: $color-primary; 49 | } 50 | } 51 | svg { 52 | vertical-align: middle; 53 | margin-right: 5px; 54 | path { 55 | transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 56 | } 57 | } 58 | } 59 | .ant-table-body { 60 | overflow: auto; 61 | 62 | @media(min-width: $xl) { 63 | overflow: visible; 64 | } 65 | 66 | .btn-edit { 67 | font-weight: $fw-semibold; 68 | color: $color-muted; 69 | } 70 | } 71 | .table-avatar-info { 72 | display: flex; 73 | 74 | 75 | .ant-avatar { 76 | margin-right: 20px; 77 | } 78 | .avatar-info { 79 | h6 { 80 | font-size: 14px; 81 | line-height: 14px; 82 | margin-bottom: 3px; 83 | 84 | } 85 | p { 86 | font-size: 14px; 87 | font-weight: $fw-regular; 88 | color: $color-gray-7; 89 | 90 | } 91 | >* { 92 | margin: 0; 93 | padding-right: 10px; 94 | 95 | } 96 | } 97 | } 98 | 99 | .layout-dashboard-rtl { 100 | .ant-table table { 101 | text-align: right; 102 | } 103 | .table-upload-btn svg { 104 | vertical-align: middle; 105 | margin-left: 5px; 106 | margin-right: 0; 107 | } 108 | } 109 | // / Tables -------------------------------------------------------------------------------- /src/scss/components/_tag.scss: -------------------------------------------------------------------------------- 1 | // _tag.scss 2 | // 3 | // Template's tag styles. 4 | // 5 | 6 | 7 | // Tags 8 | .tag-status { 9 | padding: 2px 12px; 10 | font-weight: $fw-bold; 11 | } 12 | // / Tags -------------------------------------------------------------------------------- /src/scss/components/_timeline.scss: -------------------------------------------------------------------------------- 1 | // _timeline.scss 2 | // 3 | // Template's timeline styles. 4 | // 5 | 6 | 7 | // Timeline 8 | .ant-timeline-item-content { 9 | margin: 0 0 0 33px; 10 | font-size: 14px; 11 | top: -4px; 12 | font-weight: $fw-semibold; 13 | color: $color-gray-12; 14 | p { 15 | font-size: 12px; 16 | font-weight: $fw-bold; 17 | color: $color-gray-7; 18 | margin: 0; 19 | } 20 | } 21 | .ant-timeline-item-pending .ant-timeline-item-content { 22 | font-size: 14px; 23 | font-weight: $fw-semibold; 24 | color: $color-gray-12; 25 | } 26 | .ant-timeline-item-pending .ant-timeline-item-head { 27 | border-color: $color-gray-4; 28 | } 29 | .ant-timeline-item-head { 30 | width: 15px; 31 | height: 15px; 32 | border-width: 3px; 33 | } 34 | .ant-timeline-item-tail { 35 | left: 7px; 36 | } 37 | 38 | .layout-dashboard-rtl { 39 | .ant-timeline-item-tail { 40 | right: 6.5px; 41 | left: auto; 42 | } 43 | .ant-timeline-item-content { 44 | margin: 0 33px 0 0; 45 | } 46 | } 47 | // / Timeline -------------------------------------------------------------------------------- /src/scss/components/_widget.scss: -------------------------------------------------------------------------------- 1 | // _widget.scss 2 | // 3 | // Template's widgets styles. 4 | // 5 | 6 | 7 | // Widget Type 1 8 | .widget-1 { 9 | border-radius: 12px; 10 | box-shadow: $shadow-1; 11 | 12 | .ant-card-body { 13 | padding: 16px; 14 | position: relative; 15 | 16 | } 17 | .ant-statistic { 18 | margin-right: 50px; 19 | } 20 | .ant-statistic-title { 21 | font-family: $f-family; 22 | font-weight: $fw-semibold; 23 | color: $color-gray-7; 24 | font-size: 14px; 25 | font-family: 'yekan' !important; 26 | } 27 | .ant-statistic-content { 28 | font-family: $f-family; 29 | font-weight: $fw-bold; 30 | color: inherit; 31 | font-size: 30px; 32 | line-height: 30px; 33 | } 34 | .ant-statistic-content-prefix, 35 | .ant-statistic-content-value { 36 | color: $color-gray-12; 37 | } 38 | .ant-statistic-content-prefix { 39 | margin-right: 0; 40 | } 41 | .ant-statistic-content-suffix { 42 | font-family: $f-family; 43 | font-weight: $fw-bold; 44 | font-size: 14px; 45 | margin-left: 10px; 46 | } 47 | .icon { 48 | width: 48px; 49 | height: 48px; 50 | position: absolute; 51 | top: 0; 52 | bottom: 0; 53 | right: 16px; 54 | margin: auto; 55 | background-color: $color-primary; 56 | border-radius: 8px; 57 | box-shadow: $shadow-2; 58 | display: flex; 59 | justify-content: center; 60 | align-items: center; 61 | } 62 | .icon svg path { 63 | fill: $color-white; 64 | } 65 | } 66 | // / Widget Type 1 67 | 68 | // Widget Type 2 69 | .widget-2 { 70 | border: none; 71 | 72 | .ant-card-body { 73 | padding: 0; 74 | } 75 | .ant-statistic-title { 76 | text-align: center; 77 | padding: 16px; 78 | 79 | h6 { 80 | font-weight: $fw-semibold; 81 | } 82 | 83 | p { 84 | font-size: 12px; 85 | font-weight: $fw-semibold; 86 | margin-bottom: 0; 87 | } 88 | } 89 | .ant-statistic-content { 90 | font-family: $f-family; 91 | font-weight: $fw-semibold; 92 | font-size: 20px; 93 | padding: 12px 16px; 94 | border-top: 1px solid $color-gray-3; 95 | text-align: center; 96 | } 97 | .ant-statistic-content-prefix { 98 | margin-right: 0; 99 | } 100 | .icon { 101 | width: 64px; 102 | height: 64px; 103 | margin: auto; 104 | background-color: $color-primary; 105 | border-radius: 8px; 106 | box-shadow: $shadow-2; 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | margin-bottom: 16px; 111 | 112 | img { 113 | width: 30px; 114 | } 115 | } 116 | } 117 | // / Widget Type 2 118 | 119 | 120 | 121 | .layout-dashboard-rtl { 122 | .widget-1 .icon { 123 | left: 16px; 124 | right: auto; 125 | } 126 | .widget-1 .ant-statistic { 127 | margin-left: 50px; 128 | margin-right: 0; 129 | } 130 | .widget-1 .ant-statistic-content-suffix { 131 | margin-right: 10px; 132 | margin-left: 0; 133 | } 134 | } -------------------------------------------------------------------------------- /src/scss/form/_checkbox.scss: -------------------------------------------------------------------------------- 1 | // _checkbox.scss 2 | // 3 | // Template's checkbox styles. 4 | // 5 | 6 | .ant-checkbox-inner { 7 | border-radius: 4px; 8 | 9 | &::after { 10 | top: 45%; 11 | } 12 | } -------------------------------------------------------------------------------- /src/scss/form/_input.scss: -------------------------------------------------------------------------------- 1 | // _input.scss 2 | // 3 | // Template's input styles. 4 | // 5 | 6 | .ant-input { 7 | border-radius: 6px; 8 | } 9 | 10 | .layout-dashboard-rtl { 11 | .header-control { 12 | .header-search { 13 | .ant-input { 14 | &:not(:first-child) { 15 | padding-right: 32px; 16 | padding-left: 11px; 17 | } 18 | } 19 | } 20 | } 21 | 22 | .ant-input-affix-wrapper .ant-input-prefix { 23 | right: 12px; 24 | left: auto; 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/layouts/_dashboard-rtl.scss: -------------------------------------------------------------------------------- 1 | // _dashboard-rtl.scss 2 | // 3 | // Template's rtl dashboard layout styles. 4 | // 5 | 6 | 7 | // Dashboard Layout 8 | .layout-dashboard-rtl { 9 | background: transparent; 10 | text-align: right; 11 | direction: rtl; 12 | position: relative; 13 | overflow-x: hidden; 14 | 15 | @media( min-width: $lg ){ 16 | overflow: auto; 17 | } 18 | 19 | .ant-page-header-heading-title { 20 | float: right; 21 | } 22 | 23 | // Primary Sidebar 24 | .ant-layout-sider.sider-primary { 25 | right: 0; 26 | left: auto; 27 | 28 | @media( min-width: $lg ){ 29 | margin: 20px 20px 0 0; 30 | height: calc(100vh - 20px); 31 | } 32 | .ant-menu-item, 33 | .ant-menu-submenu { 34 | .icon { 35 | margin-left: 11px; 36 | margin-right: 0; 37 | } 38 | } 39 | 40 | &.ant-layout-sider-white { 41 | margin: 20px 20px 64px 0px; 42 | } 43 | } 44 | // / Primary Sidebar 45 | .header-notifications-list { 46 | .ant-list-item-meta-description { 47 | svg { 48 | margin-left: 4px; 49 | margin-right: 0; 50 | } 51 | } 52 | } 53 | // / Header Notification Dropdown 54 | 55 | .header-control { 56 | .btn-sign-in { 57 | svg { 58 | margin-left: 4px; 59 | margin-right: 0; 60 | } 61 | } 62 | } 63 | // / Page Header 64 | 65 | // Content/Main Layout 66 | .ant-layout { 67 | @media( min-width: $lg ){ 68 | margin-right: 270px; 69 | margin-left: 0; 70 | } 71 | } 72 | 73 | // Page Footer 74 | .ant-layout-footer { 75 | @media( min-width: $md ){ 76 | margin: 0px 20px 20px 0; 77 | } 78 | .ant-menu-horizontal { 79 | @media( min-width: $md ){ 80 | text-align: left; 81 | } 82 | } 83 | .copyright { 84 | @media( min-width: $md ){ 85 | text-align: right; 86 | } 87 | } 88 | } 89 | // / Page Footer 90 | } -------------------------------------------------------------------------------- /src/scss/layouts/_default.scss: -------------------------------------------------------------------------------- 1 | // _default.scss 2 | // 3 | // Template's default layout styles. 4 | // 5 | 6 | 7 | body { 8 | padding: 0 0 30px 0; 9 | background-color: $color-gray-2; 10 | } 11 | 12 | // Default Layout 13 | .layout-default { 14 | background: transparent; 15 | text-align: left; 16 | position: relative; 17 | overflow-x: hidden; 18 | 19 | @media( min-width: $lg ){ 20 | overflow: auto; 21 | } 22 | .ant-layout-header { 23 | display: flex; 24 | position: relative; 25 | background-color: $color-gray-1; 26 | color: $color-gray-12; 27 | box-shadow: $shadow-1; 28 | flex-direction: column; 29 | padding: 20px; 30 | height: auto; 31 | line-height: 1.5; 32 | 33 | @media( min-width: $lg ){ 34 | flex-direction: row; 35 | padding: 0 50px; 36 | height: 64px; 37 | line-height: 64px; 38 | } 39 | 40 | .header-brand { 41 | margin-right: auto; 42 | margin-left: auto; 43 | display: flex; 44 | justify-content: space-between; 45 | width: 100%; 46 | align-items: center; 47 | margin-bottom: 20px; 48 | 49 | @media( min-width: $lg ){ 50 | margin-right: auto; 51 | margin-left: 0; 52 | display: block; 53 | width: auto; 54 | margin-bottom: 0px; 55 | } 56 | 57 | .btn-menu-trigger { 58 | display: block; 59 | 60 | @media( min-width: $lg ){ 61 | display: none; 62 | } 63 | } 64 | 65 | h6 { 66 | white-space: nowrap; 67 | font-size: 16px; 68 | color: $color-gray-12; 69 | margin: 0; 70 | } 71 | 72 | @media( min-width: $lg ){ 73 | h6 { 74 | font-size: 14px; 75 | } 76 | } 77 | } 78 | .header-menu .ant-menu-submenu a svg { 79 | margin-right: 5px; 80 | } 81 | .header-nav { 82 | margin-right: auto; 83 | margin-left: auto; 84 | width: 100%; 85 | 86 | @media( min-width: $lg ){ 87 | margin-right: auto; 88 | margin-left: auto; 89 | } 90 | 91 | a { 92 | color: $color-gray-12; 93 | padding: 6px 12px; 94 | font-weight: $fw-regular; 95 | 96 | &.router-link-active { 97 | color: $color-gray-12; 98 | font-weight: $fw-semibold; 99 | svg path { 100 | fill: $color-gray-12; 101 | } 102 | } 103 | 104 | svg, 105 | span { 106 | vertical-align: middle; 107 | } 108 | svg { 109 | margin-right: 5px; 110 | } 111 | } 112 | 113 | .menu-large { 114 | display: none; 115 | 116 | @media( min-width: $lg ){ 117 | display: block; 118 | } 119 | } 120 | 121 | .ant-menu-horizontal { 122 | border: none; 123 | margin-top: 0px; 124 | text-align: center; 125 | background-color: transparent; 126 | 127 | @media( min-width: $md ){ 128 | margin-top: 0; 129 | } 130 | > .ant-menu-item { 131 | padding: 0; 132 | } 133 | 134 | .ant-menu-submenu-title > span { // Ellipsis element 135 | vertical-align: 6px; 136 | } 137 | > .ant-menu-item, 138 | > .ant-menu-item:hover, 139 | > .ant-menu-item-active, 140 | > .ant-menu-item-selected, 141 | > .ant-menu-submenu, 142 | > .ant-menu-submenu:hover, 143 | > .ant-menu-submenu-active, 144 | > .ant-menu-submenu-selected { 145 | color: $color-gray-7; 146 | font-weight: $fw-semibold; 147 | border: none; 148 | } 149 | > .ant-menu-item:hover, 150 | > .ant-menu-item-active, 151 | > .ant-menu-item-selected, 152 | > .ant-menu-submenu:hover, 153 | > .ant-menu-submenu-active, 154 | > .ant-menu-submenu-selected { 155 | color: $color-gray-10; 156 | } 157 | 158 | .ant-menu-submenu-title { 159 | font-size: 16px; 160 | font-weight: bold; 161 | } 162 | } 163 | 164 | .menu-small { 165 | display: block; 166 | 167 | @media( min-width: $lg ){ 168 | display: none; 169 | } 170 | 171 | .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left { 172 | border: none; 173 | } 174 | .ant-collapse > .ant-collapse-item > .ant-collapse-header { 175 | display: none; 176 | } 177 | .ant-collapse-content { 178 | border: none; 179 | } 180 | .ant-collapse > .ant-collapse-item { 181 | border: 0; 182 | border-radius: 4px; 183 | } 184 | .ant-menu { 185 | border: 1px solid $color-gray-12; 186 | } 187 | .ant-collapse-item:last-child > .ant-collapse-content { 188 | border-radius: 4px; 189 | border-color: $color-gray-12; 190 | border-top: 0; 191 | } 192 | .ant-collapse { 193 | background-color: transparent; 194 | border: 0; 195 | } 196 | .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left { 197 | border: 1px solid $color-gray-5; 198 | border-radius: 4px; 199 | padding: 16px 0px; 200 | margin-bottom: 20px; 201 | } 202 | .ant-collapse-content-box { 203 | padding: 0; 204 | } 205 | .ant-menu-vertical .ant-menu-item:not(:last-child), .ant-menu-vertical-left .ant-menu-item:not(:last-child), .ant-menu-vertical-right .ant-menu-item:not(:last-child), .ant-menu-inline .ant-menu-item:not(:last-child) { 206 | height: auto; 207 | margin: 0; 208 | } 209 | .ant-menu-vertical .ant-menu-item a { 210 | padding-top: 0; 211 | padding-bottom: 0; 212 | } 213 | .ant-collapse-content > .ant-collapse-content-box { 214 | padding: 0; 215 | } 216 | .ant-menu-vertical > .ant-menu-item, .ant-menu-vertical-left > .ant-menu-item, .ant-menu-vertical-right > .ant-menu-item, .ant-menu-inline > .ant-menu-item, .ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title { 217 | height: auto; 218 | margin: 0; 219 | } 220 | } 221 | 222 | } 223 | .header-btn { 224 | 225 | @media( min-width: $lg ){ 226 | margin-left: auto; 227 | } 228 | 229 | .ant-btn-round.ant-btn-sm { 230 | font-size: 12px; 231 | width: 100%; 232 | 233 | @media( min-width: $lg ){ 234 | width: auto; 235 | } 236 | } 237 | } 238 | } 239 | .ant-layout-content { 240 | padding-top: 40px; 241 | } 242 | .ant-layout-footer { 243 | padding: 24px 0px; 244 | color: rgba(0, 0, 0, 0.65); 245 | font-size: 14px; 246 | background: transparent; 247 | text-align: center; 248 | 249 | @media( min-width: $md ) { 250 | padding: 24px 50px; 251 | } 252 | 253 | .ant-menu-horizontal { 254 | border: none; 255 | line-height: 1.5; 256 | margin: 0 0 30px; 257 | background-color: transparent; 258 | font-size: 16px; 259 | 260 | @media( min-width: $md ){ 261 | } 262 | > .ant-menu-item, 263 | > .ant-menu-item:hover, 264 | > .ant-menu-item-active, 265 | > .ant-menu-item-selected, 266 | > .ant-menu-submenu, 267 | > .ant-menu-submenu:hover, 268 | > .ant-menu-submenu-active, 269 | > .ant-menu-submenu-selected { 270 | color: $color-gray-7; 271 | border: none; 272 | } 273 | > .ant-menu-item:hover, 274 | > .ant-menu-item-active, 275 | > .ant-menu-item-selected, 276 | > .ant-menu-submenu:hover, 277 | > .ant-menu-submenu-active, 278 | > .ant-menu-submenu-selected { 279 | color: $color-gray-10; 280 | } 281 | 282 | .ant-menu-submenu-title { 283 | font-size: 16px; 284 | font-weight: bold; 285 | } 286 | } 287 | 288 | .menu-nav-social { 289 | a svg { 290 | fill: $color-muted; 291 | vertical-align: middle; 292 | } 293 | a:hover svg { 294 | fill: $color-primary; 295 | } 296 | } 297 | 298 | .copyright { 299 | margin: 0; 300 | font-size: 16px; 301 | color: $color-muted; 302 | 303 | svg { 304 | width: 16px; 305 | height: 16px; 306 | vertical-align: -2px; 307 | path { 308 | fill: $color-danger; 309 | } 310 | } 311 | a { 312 | color: inherit; 313 | } 314 | } 315 | } 316 | } 317 | // Default Layout -------------------------------------------------------------------------------- /src/scss/pages/_profile.scss: -------------------------------------------------------------------------------- 1 | // _profile.scss 2 | // 3 | // Template's profile page styles. 4 | // 5 | 6 | 7 | // Profile Page 8 | .layout-profile { 9 | .header-control { 10 | .btn-sign-in, 11 | .ant-btn, 12 | .ant-dropdown-link { 13 | svg path { 14 | transition: none; 15 | } 16 | } 17 | } 18 | .ant-breadcrumb a{ 19 | transition: none; 20 | } 21 | .ant-layout>div>div:not(.ant-affix), 22 | .ant-layout>div>.ant-layout-header { 23 | .ant-breadcrumb > span { 24 | .ant-breadcrumb-link a, 25 | .ant-breadcrumb-separator { 26 | color: $color-gray-1; 27 | transition: none; 28 | } 29 | .ant-breadcrumb-link a { 30 | opacity: .75; 31 | } 32 | &:last-child .ant-breadcrumb-link { 33 | color: $color-gray-1; 34 | } 35 | } 36 | .ant-page-header-heading .ant-page-header-heading-title { 37 | color: $color-gray-1; 38 | } 39 | .header-control .btn-sign-in span { 40 | color: $color-gray-1; 41 | } 42 | .header-control { 43 | .btn-sign-in, 44 | .ant-btn, 45 | .ant-dropdown-link { 46 | svg path { 47 | fill: $color-gray-1; 48 | } 49 | } 50 | } 51 | } 52 | .ant-layout-header { 53 | margin: 10px 20px; 54 | } 55 | .ant-card-head { 56 | padding: 0 16px; 57 | } 58 | } 59 | .profile-nav-bg { 60 | height: 300px; 61 | margin-top: -137.8px; 62 | border-radius: 12px; 63 | box-shadow: $shadow-1; 64 | background-size: cover; 65 | background-position: center; 66 | 67 | @media( min-width: $md ){ 68 | margin-top: -87.8px; 69 | } 70 | } 71 | 72 | .settings-list { 73 | list-style: none; 74 | padding: 0; 75 | 76 | >li { 77 | padding: 12px 0; 78 | &:first-child { 79 | padding-top: 0; 80 | } 81 | span { 82 | margin-right: 16px; 83 | color: $color-gray-12; 84 | } 85 | h6 { 86 | font-size: 12px; 87 | color: $color-muted; 88 | margin: 0; 89 | } 90 | } 91 | } 92 | 93 | .projects-uploader { 94 | height: 100%; 95 | border-radius: 8px; 96 | border-color: $color-gray-5; 97 | .ant-upload { 98 | width: 100%; 99 | height: 100%; 100 | margin: 0; 101 | border-radius: 8px; 102 | } 103 | .ant-upload.ant-upload-select-picture-card { 104 | background-color: transparent; 105 | } 106 | } 107 | // / Profile Page -------------------------------------------------------------------------------- /src/scss/pages/_sign-in.scss: -------------------------------------------------------------------------------- 1 | // _sign-in.scss 2 | // 3 | // Template's sign in page styles. 4 | // 5 | 6 | 7 | // Sign In Page 8 | .sign-in { 9 | padding: 0px 20px; 10 | text-align: right; 11 | 12 | .col-img img { 13 | width: 100%; 14 | max-width: 500px; 15 | margin: auto; 16 | display: block; 17 | 18 | @media( min-width: $lg) { 19 | margin: 0; 20 | } 21 | } 22 | .col-form .ant-switch { 23 | margin-right: 5px; 24 | } 25 | .ant-form-item-label { 26 | line-height: 28px; 27 | } 28 | .ant-form-item label { 29 | font-size: 13px; 30 | font-weight: $fw-semibold; 31 | color: $color-gray-12; 32 | } 33 | } 34 | // / Sign In Page -------------------------------------------------------------------------------- /src/scss/pages/_sign-up.scss: -------------------------------------------------------------------------------- 1 | // _sign-up.scss 2 | // 3 | // Template's sign up page styles. 4 | // 5 | 6 | 7 | // Sign Up Page 8 | .layout-default.layout-sign-up { 9 | text-align: right; 10 | padding: 11px; 11 | 12 | .ant-layout-header { 13 | background-color: $color-gray-1; 14 | color: $color-gray-12; 15 | box-shadow: none; 16 | padding: 20px; 17 | margin: -12px -12px 0; 18 | 19 | @media( min-width: $lg ){ 20 | background-color: transparent; 21 | color: $color-gray-1; 22 | margin: 0; 23 | padding: 0 20px; 24 | } 25 | 26 | .header-brand { 27 | padding: 0px; 28 | 29 | @media( min-width: $lg ){ 30 | } 31 | h6 { 32 | color: $color-gray-12; 33 | 34 | @media( min-width: $lg ){ 35 | color: $color-gray-1; 36 | } 37 | } 38 | } 39 | .header-nav { 40 | a { 41 | color: $color-gray-12; 42 | 43 | @media( min-width: $lg ){ 44 | color: $color-gray-1; 45 | } 46 | svg path { 47 | fill: $color-gray-12 !important; 48 | 49 | @media( min-width: $lg ){ 50 | fill: $color-gray-1 !important; 51 | } 52 | } 53 | 54 | &.router-link-active { 55 | color: $color-gray-12; 56 | 57 | @media( min-width: $lg ){ 58 | color: $color-gray-1; 59 | } 60 | svg path { 61 | fill: $color-gray-12; 62 | 63 | @media( min-width: $lg ){ 64 | fill: $color-gray-1; 65 | } 66 | } 67 | } 68 | } 69 | .ant-menu-horizontal { 70 | line-height: 26px; 71 | padding: 10px 0; 72 | 73 | span { 74 | color: $color-gray-12; 75 | 76 | @media( min-width: $lg ){ 77 | color: $color-gray-1; 78 | } 79 | } 80 | } 81 | } 82 | .header-btn .ant-btn-primary { 83 | @media( min-width: $lg ){ 84 | background-color: $color-gray-1; 85 | color: $color-gray-12; 86 | border: none; 87 | } 88 | } 89 | 90 | } 91 | .ant-layout-content { 92 | padding-top: 0; 93 | } 94 | } 95 | 96 | .sign-up-header { 97 | height: 550px; 98 | margin-top: -120.8px; 99 | padding-top: 137.8px; 100 | border-radius: 12px; 101 | box-shadow: $shadow-1; 102 | background-size: cover; 103 | background-position: center; 104 | text-align: center; 105 | 106 | @media( min-width: $lg ){ 107 | margin-top: -62.8px; 108 | } 109 | 110 | * { 111 | color: $color-gray-1; 112 | } 113 | 114 | .content { 115 | padding-top: 40px; 116 | max-width: 480px; 117 | margin: auto; 118 | 119 | h1 { 120 | font-size: 36px; 121 | 122 | @media( min-width: $md) { 123 | font-size: 48px; 124 | } 125 | } 126 | } 127 | } 128 | // Sign Up Page -------------------------------------------------------------------------------- /src/views/404.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/views/Billing.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 87 | 88 | 229 | 230 | -------------------------------------------------------------------------------- /src/views/Layout.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 12 | 13 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/Profile.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 126 | 127 | 230 | 231 | -------------------------------------------------------------------------------- /src/views/Sign-In.vue: -------------------------------------------------------------------------------- 1 | 2 | 59 | 60 | 87 | 88 | -------------------------------------------------------------------------------- /src/views/Sign-Up.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 98 | 99 | 124 | 125 | -------------------------------------------------------------------------------- /src/views/Tables.vue: -------------------------------------------------------------------------------- 1 | 2 | 45 | 46 | 297 | 298 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | runtimeCompiler: true, 3 | 4 | chainWebpack: config => { 5 | config 6 | .plugin('html') 7 | .tap(args => { 8 | args[0].title = 'داشبورد میوز' 9 | return args 10 | }) 11 | } 12 | } 13 | --------------------------------------------------------------------------------