├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── public
├── covid19delhi.png
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── app
├── App.js
├── App.scss
├── App.test.js
├── dashboard
│ ├── Dashboard.js
│ ├── chartConfirmed.js
│ ├── chartDeath.js
│ └── stateChart.js
└── shared
│ ├── Footer.js
│ ├── Navbar.js
│ └── Spinner.js
├── assets
├── images
│ └── dashboard
│ │ └── covid19delhi.png
└── styles
│ ├── _background.scss
│ ├── _dashboard.scss
│ ├── _demo.scss
│ ├── _fonts.scss
│ ├── _footer.scss
│ ├── _functions.scss
│ ├── _layout.scss
│ ├── _misc.scss
│ ├── _navbar.scss
│ ├── _reset.scss
│ ├── _responsive.scss
│ ├── _spinner.scss
│ ├── _typography.scss
│ ├── _utilities.scss
│ ├── _variables.scss
│ ├── components
│ └── _spinner.scss
│ └── mixins
│ ├── _animation.scss
│ ├── _badges.scss
│ ├── _blockqoute.scss
│ ├── _buttons.scss
│ ├── _cards.scss
│ ├── _color-functions.scss
│ ├── _misc.scss
│ ├── _no-ui-slider.scss
│ ├── _popovers.scss
│ └── _tooltips.scss
├── index.js
└── serviceWorker.js
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Gaurav Ghai
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | View live website .
7 |
8 |
9 | ## Setup
10 |
11 | ```
12 | npm i && npm start
13 | ```
14 |
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "covid19delhi",
3 | "version": "0.1.0",
4 | "homepage": "https://www.covid19delhi.in/",
5 | "private": true,
6 | "dependencies": {
7 | "@mdi/font": "^4.5.95",
8 | "bootstrap": "^4.3.1",
9 | "bosket": "^0.2.3",
10 | "brace": "^0.11.1",
11 | "chart.js": "^2.8.0",
12 | "compass-mixins": "^0.12.10",
13 | "font-awesome": "^4.7.0",
14 | "namor": "^1.1.3",
15 | "node-sass": "^4.12.0",
16 | "react": "^16.9.0",
17 | "react-ace": "^7.0.4",
18 | "react-axios": "^2.0.3",
19 | "react-beautiful-dnd": "^11.0.5",
20 | "react-bootstrap": "^1.0.0-beta.12",
21 | "react-bootstrap-editable": "^0.5.1",
22 | "react-chartjs-2": "^2.8.0",
23 | "react-collapse": "^5.0.0",
24 | "react-datepicker": "^2.9.6",
25 | "react-dom": "^16.9.0",
26 | "react-quill": "^1.3.3",
27 | "react-router-dom": "^5.0.1",
28 | "react-scripts": "3.1.1",
29 | "react-select": "^3.0.8",
30 | "react-sparklines": "^1.7.0",
31 | "react-table": "^6.10.3"
32 | },
33 | "scripts": {
34 | "start": "react-scripts start",
35 | "build": "react-scripts build",
36 | "test": "react-scripts test",
37 | "eject": "react-scripts eject"
38 | },
39 | "eslintConfig": {
40 | "extends": "react-app"
41 | },
42 | "browserslist": {
43 | "production": [
44 | ">0.2%",
45 | "not dead",
46 | "not op_mini all"
47 | ],
48 | "development": [
49 | "last 1 chrome version",
50 | "last 1 firefox version",
51 | "last 1 safari version"
52 | ]
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/public/covid19delhi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gauravghai/covid19DelhiAPI-Reactjs/b2d801a85bb11fdaf9cbf80b064c2081950f72d5/public/covid19delhi.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gauravghai/covid19DelhiAPI-Reactjs/b2d801a85bb11fdaf9cbf80b064c2081950f72d5/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | Covid19delhi - #DelhiFightsCrona
28 |
32 |
36 |
37 |
41 |
50 |
51 |
52 | You need to enable JavaScript to run this app.
53 |
54 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gauravghai/covid19DelhiAPI-Reactjs/b2d801a85bb11fdaf9cbf80b064c2081950f72d5/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gauravghai/covid19DelhiAPI-Reactjs/b2d801a85bb11fdaf9cbf80b064c2081950f72d5/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/src/app/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component, Suspense, lazy } from "react";
2 | import "./App.scss";
3 | import Navbar from "./shared/Navbar";
4 | import Footer from "./shared/Footer";
5 |
6 | import Spinner from "../app/shared/Spinner";
7 |
8 | const Dashboard = lazy(() => import("./dashboard/Dashboard"));
9 |
10 | class App extends Component {
11 | state = {};
12 | render() {
13 | let navbarComponent = ;
14 | let footerComponent = ;
15 | return (
16 | }>
17 | {navbarComponent}
18 |
19 |
20 |
21 |
22 | {footerComponent}
23 |
24 |
25 |
26 |
27 | );
28 | }
29 | }
30 |
31 | export default App;
32 |
--------------------------------------------------------------------------------
/src/app/App.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
3 | /* === Plugin styles === */
4 |
5 | @import "~react-datepicker/dist/react-datepicker.css";
6 |
7 | @import "~bootstrap/scss/functions";
8 | @import "~bootstrap/scss/variables";
9 |
10 | @import "../assets/styles/variables";
11 | @import "~compass-mixins/lib/compass";
12 | @import "~compass-mixins/lib/animate";
13 | @import "~bootstrap/scss/bootstrap";
14 | @import "../assets/styles/fonts";
15 | @import "../assets/styles/functions";
16 |
17 | /* === Icon fonts === */
18 | @import "~@mdi/font/scss/materialdesignicons";
19 | @import "~font-awesome/scss/font-awesome";
20 |
21 | /* === Template mixins === */
22 | @import "../assets/styles/mixins/animation";
23 | @import "../assets/styles/mixins/buttons";
24 | @import "../assets/styles/mixins/badges";
25 | @import "../assets/styles/mixins/misc";
26 | @import "../assets/styles/mixins/color-functions";
27 | @import "../assets/styles/mixins/cards";
28 | @import "../assets/styles/mixins/blockqoute";
29 |
30 | /* === Core Styles === */
31 | @import "../assets/styles/background";
32 | @import "../assets/styles/typography";
33 | @import "../assets/styles/reset";
34 | @import "../assets/styles/responsive";
35 | @import "../assets/styles/misc";
36 | @import "../assets/styles/utilities";
37 | @import "../assets/styles/demo";
38 | @import "../assets/styles/spinner";
39 | @import "../assets/styles/dashboard";
40 |
41 | /* === Components === */
42 |
43 | @import "../assets/styles/components/spinner";
44 |
45 | /* === Plugin Overrides === */
46 |
47 | /* === Layout === */
48 | @import "../assets/styles/navbar";
49 | @import "../assets/styles/footer";
50 | @import "../assets/styles/layout";
51 |
--------------------------------------------------------------------------------
/src/app/App.test.js:
--------------------------------------------------------------------------------
1 | import React from '../../node_modules/react';
2 | import ReactDOM from '../../node_modules/react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render( , div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/src/app/dashboard/Dashboard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import ChartConfirmed from "./chartConfirmed";
3 | import ChartDeath from "./chartDeath";
4 | import DistrictPieChart from "./stateChart";
5 |
6 | // import DatePicker from 'react-datepicker';
7 | // import { Dropdown } from 'react-bootstrap';
8 |
9 | export class Dashboard extends Component {
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | covidCases: null,
14 | IndiaConfirm: null,
15 | IndiaRecover: null,
16 | IndiaActive: null,
17 | IndiaDeath: null,
18 | delhiConfirm: null,
19 | delhiDailyConfirm: null,
20 | delhiRecover: null,
21 | delhiDailyRecover: null,
22 | delhiActive: null,
23 | delhiDeath: null,
24 | delhiDailyDeath: null,
25 | };
26 | }
27 | componentDidMount() {
28 | fetch("https://api.covid19india.org/data.json")
29 | .then((res) => res.json())
30 | .then((data) => {
31 | this.setState({ covidCases: data, loading: false });
32 | console.log(data);
33 | this.state.covidCases.statewise.map((covid) =>
34 | covid.statecode == "DL"
35 | ? this.setState({
36 | delhiConfirm: covid.confirmed,
37 | delhiDailyConfirm: covid.deltaconfirmed,
38 | delhiRecover: covid.recovered,
39 | delhiDailyRecover: covid.deltarecovered,
40 | delhiActive: covid.active,
41 | delhiDeath: covid.deaths,
42 | delhiDailyDeath: covid.deltadeaths,
43 | })
44 | : null
45 | );
46 |
47 | this.state.covidCases.statewise.map((covid) =>
48 | covid.statecode == "TT"
49 | ? this.setState({
50 | IndiaConfirm: covid.confirmed,
51 | IndiaRecover: covid.recovered,
52 | IndiaActive: covid.active,
53 | IndiaDeath: covid.deaths,
54 | })
55 | : null
56 | );
57 | })
58 | .catch(console.log);
59 | }
60 |
61 | render() {
62 | return (
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
Confirmed
74 |
75 |
76 | {this.state.delhiConfirm}
77 |
78 |
79 |
80 |
81 |
82 |
83 | {" "}
84 | {this.state.delhiDailyConfirm} Today (Delhi){" "}
85 |
86 |
87 | {this.state.IndiaConfirm} Total India{" "}
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
Active
102 |
103 |
104 | {this.state.delhiActive}
105 |
106 |
107 |
108 |
109 |
110 | {this.state.IndiaActive} Total India{" "}
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
Recovered
124 |
125 |
126 | {this.state.delhiRecover}
127 |
128 |
129 |
130 |
131 |
132 |
133 | {" "}
134 | {this.state.delhiDailyRecover} Today (Delhi){" "}
135 |
136 |
137 | {this.state.IndiaRecover} Total India{" "}
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
Deceased
152 |
153 |
154 | {this.state.delhiDeath}
155 |
156 |
157 |
158 |
159 |
160 |
161 | {" "}
162 | {this.state.delhiDailyDeath} Today (Delhi){" "}
163 |
164 |
165 | {this.state.IndiaDeath} Total India{" "}
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 | {/*
181 |
182 |
183 |
184 |
185 |
186 |
tweet
187 |
188 |
189 |
190 |
191 |
192 |
*/}
193 |
194 |
195 |
196 |
197 |
198 |
Covid Information
199 | No Information Yet
200 |
201 |
202 |
203 |
204 |
205 |
228 |
251 |
273 |
296 |
297 |
298 | );
299 | }
300 | }
301 | export default Dashboard;
302 |
--------------------------------------------------------------------------------
/src/app/dashboard/chartConfirmed.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Line } from "react-chartjs-2";
3 | class ChartConfirmed extends Component {
4 | state = {};
5 | areaOptions = {
6 | responsive: true,
7 | maintainAspectRatio: true,
8 | scales: {
9 | yAxes: [
10 | {
11 | ticks: {
12 | autoSkip: true,
13 | maxTicksLimit: 10,
14 | beginAtZero: true,
15 | },
16 | gridLines: {
17 | display: false,
18 | },
19 | },
20 | ],
21 | xAxes: [
22 | {
23 | gridLines: {
24 | display: false,
25 | },
26 | },
27 | ],
28 | },
29 | legend: {
30 | display: false,
31 | },
32 | elements: {
33 | point: {
34 | radius: 2,
35 | },
36 | },
37 | layout: {
38 | padding: {
39 | left: 0,
40 | right: 0,
41 | top: 0,
42 | bottom: 0,
43 | },
44 | },
45 | stepsize: 1,
46 | };
47 | componentDidMount() {
48 | let covidDailyConfirm = [];
49 | let covidDate = [];
50 | fetch("https://api.covid19india.org/states_daily.json")
51 | .then((res) => res.json())
52 | .then((data) => {
53 | for (const dataObj of data.states_daily) {
54 | if (dataObj.dl) {
55 | if (dataObj.status == "Confirmed") {
56 | covidDailyConfirm.push(parseInt(dataObj.dl));
57 | covidDate.push(dataObj.date.substring(0, 6));
58 | }
59 | }
60 | }
61 | this.setState({
62 | data: {
63 | labels: covidDate,
64 | datasets: [
65 | {
66 | label: "Confirmed",
67 | data: covidDailyConfirm,
68 | backgroundColor: "transparent",
69 | borderColor: "#0c83e2",
70 | borderWidth: 2,
71 | fill: true,
72 | datasetKeyProvider: "key1",
73 | },
74 | ],
75 | },
76 | });
77 | });
78 | }
79 | render() {
80 | return (
81 |
82 |
83 |
84 |
85 |
86 |
Confirmed Cases
87 |
88 |
89 |
95 |
96 |
97 |
98 |
99 |
100 | );
101 | }
102 | }
103 |
104 | export default ChartConfirmed;
105 |
--------------------------------------------------------------------------------
/src/app/dashboard/chartDeath.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Line } from "react-chartjs-2";
3 | class ChartDeath extends Component {
4 | state = {};
5 | areaOptions = {
6 | responsive: true,
7 | maintainAspectRatio: true,
8 | scales: {
9 | yAxes: [
10 | {
11 | ticks: {
12 | autoSkip: true,
13 | maxTicksLimit: 10,
14 | beginAtZero: true,
15 | },
16 | gridLines: {
17 | display: false,
18 | },
19 | },
20 | ],
21 | xAxes: [
22 | {
23 | gridLines: {
24 | display: false,
25 | },
26 | },
27 | ],
28 | },
29 | legend: {
30 | display: false,
31 | },
32 | elements: {
33 | point: {
34 | radius: 2,
35 | },
36 | },
37 | layout: {
38 | padding: {
39 | left: 0,
40 | right: 0,
41 | top: 0,
42 | bottom: 0,
43 | },
44 | },
45 | stepsize: 1,
46 | };
47 | componentDidMount() {
48 | let covidDailyDeceased = [];
49 | let covidDate = [];
50 | fetch("https://api.covid19india.org/states_daily.json")
51 | .then((res) => res.json())
52 | .then((data) => {
53 | for (const dataObj of data.states_daily) {
54 | if (dataObj.dl) {
55 | if (dataObj.status == "Deceased") {
56 | covidDailyDeceased.push(parseInt(dataObj.dl));
57 | covidDate.push(dataObj.date.substring(0, 6));
58 | }
59 | }
60 | }
61 | this.setState({
62 | data: {
63 | labels: covidDate,
64 | datasets: [
65 | {
66 | label: "Deceased",
67 | data: covidDailyDeceased,
68 | backgroundColor: "transparent",
69 | borderColor: "red",
70 | borderWidth: 2,
71 | fill: true,
72 | datasetKeyProvider: "key1",
73 | },
74 | ],
75 | },
76 | });
77 | });
78 | }
79 | render() {
80 | return (
81 |
82 |
83 |
84 |
85 |
86 |
Deceased Cases
87 |
88 |
89 |
95 |
96 |
97 |
98 |
99 |
100 | );
101 | }
102 | }
103 |
104 | export default ChartDeath;
105 |
--------------------------------------------------------------------------------
/src/app/dashboard/stateChart.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Doughnut } from "react-chartjs-2";
3 | class DistrictPieChart extends Component {
4 | state = {};
5 | usersDoughnutChartOptions = {
6 | cutoutPercentage: 70,
7 | animationEasing: "easeOutBounce",
8 | animateRotate: true,
9 | animateScale: false,
10 | responsive: true,
11 | maintainAspectRatio: true,
12 | showScale: true,
13 | legend: {
14 | display: false,
15 | },
16 | layout: {
17 | padding: {
18 | left: 0,
19 | right: 0,
20 | top: 0,
21 | bottom: 0,
22 | },
23 | },
24 | };
25 | componentDidMount() {
26 | let covidConfirm = [];
27 | let covidDistrict = [];
28 | fetch("https://api.covid19india.org/v2/state_district_wise.json")
29 | .then((res) => res.json())
30 | .then((data) => {
31 | for (const dataObj of data) {
32 | if (dataObj.state == "Delhi") {
33 | dataObj.districtData.map((district) => {
34 | covidConfirm.push(parseInt(district.confirmed));
35 | covidDistrict.push(district.district);
36 | });
37 | }
38 | }
39 | this.setState({
40 | pieChart: {
41 | datasets: [
42 | {
43 | data: covidConfirm,
44 | backgroundColor: [
45 | "#ffc107",
46 | "green",
47 | "#28a745",
48 | "#17a2b8",
49 | "orange",
50 | "brown",
51 | "cornflowerblue",
52 | "coral",
53 | "darkslateblue",
54 | "yellowgreen",
55 | "unset",
56 | "#FF0017",
57 | ],
58 | borderColor: [
59 | "#ffc107",
60 | "green",
61 | "#28a745",
62 | "#17a2b8",
63 | "orange",
64 | "brown",
65 | "cornflowerblue",
66 | "coral",
67 | "darkslateblue",
68 | "yellowgreen",
69 | "unset",
70 | "#FF0017",
71 | ],
72 | },
73 | ],
74 | labels: covidDistrict,
75 | },
76 | });
77 | });
78 | }
79 | render() {
80 | return (
81 |
82 |
83 |
84 |
85 |
86 |
87 | Delhi Districts Covid Cases
88 |
89 |
94 |
95 |
96 |
97 | Delhi Districts Covid Cases
98 |
99 |
100 |
101 |
102 |
103 |
104 | Central Delhi
105 |
106 |
107 |
108 |
109 | East Delhi
110 |
111 |
112 |
113 | New Delhi
114 |
115 |
116 | North Delhi
117 |
118 |
119 |
120 | North East Delhi
121 |
122 |
123 |
124 |
125 | North West Delhi
126 |
127 |
128 |
129 |
133 | Shahdara
134 |
135 |
136 |
137 |
138 | South Delhi
139 |
140 |
141 |
142 |
146 | South East Delhi
147 |
148 |
149 |
150 |
151 | South West Delhi
152 |
153 |
154 |
155 |
159 | West Delhi
160 |
161 |
162 |
163 | Unknown
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 | );
174 | }
175 | }
176 |
177 | export default DistrictPieChart;
178 |
--------------------------------------------------------------------------------
/src/app/shared/Footer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | class Footer extends Component {
4 | render() {
5 | return (
6 |
32 | );
33 | }
34 | }
35 |
36 | export default Footer;
37 |
--------------------------------------------------------------------------------
/src/app/shared/Navbar.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | class Navbar extends Component {
4 | render() {
5 | return (
6 |
7 |
8 |
13 |
17 | #DelhiFightsCrona
18 |
19 |
20 |
21 | );
22 | }
23 | }
24 |
25 | export default Navbar;
26 |
--------------------------------------------------------------------------------
/src/app/shared/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | export class Spinner extends Component {
4 | render() {
5 | return (
6 |
11 | );
12 | }
13 | }
14 |
15 | export default Spinner;
16 |
--------------------------------------------------------------------------------
/src/assets/images/dashboard/covid19delhi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gauravghai/covid19DelhiAPI-Reactjs/b2d801a85bb11fdaf9cbf80b064c2081950f72d5/src/assets/images/dashboard/covid19delhi.png
--------------------------------------------------------------------------------
/src/assets/styles/_background.scss:
--------------------------------------------------------------------------------
1 | @each $color, $value in $theme-colors {
2 | .bg-inverse-icon-#{$color} {
3 | @include bg-inverse-icon($value);
4 | }
5 | }
--------------------------------------------------------------------------------
/src/assets/styles/_dashboard.scss:
--------------------------------------------------------------------------------
1 |
2 | .card-revenue {
3 | background: linear-gradient(120deg, #556cdc, #128bfc, #18bef1);
4 | background-size: cover;
5 | color: color(white);
6 |
7 | .highlight-text {
8 | font-size: 1.875rem;
9 | font-family: $type1;
10 | font-weight: 500;
11 | line-height: 1;
12 | margin-bottom: 8px;
13 | }
14 |
15 | .badge {
16 | background-color: rgba(color(white), .2);
17 | font-size: 1.125rem;
18 | padding: 0.5rem 1.25rem;
19 | }
20 | }
21 |
22 | .card-revenue-table {
23 | .revenue-item {
24 | border-bottom: 1px solid $border-color;
25 | @extend .py-3;
26 |
27 | &:last-child {
28 | border-bottom: 0;
29 | @extend .pb-0;
30 | }
31 |
32 | &:first-child {
33 | @extend .pt-0;
34 | }
35 |
36 | .revenue-desc {
37 | margin-right: auto;
38 | width: 80%;
39 |
40 | p {
41 | margin-bottom: 0;
42 | }
43 | }
44 |
45 | .revenue-amount {
46 | margin-left: auto;
47 | width: 40%;
48 |
49 | p {
50 | font-size: 1.25rem;
51 | font-family: $type1;
52 | font-weight: 600;
53 | text-align: right;
54 |
55 | .rtl & {
56 | text-align: left;
57 | }
58 | }
59 | }
60 | }
61 | }
62 | .proBanner {
63 | .purchase-popup {
64 | @extend .grid-margin;
65 | background: #fff;
66 | padding: 15px 20px;
67 | @include border-radius(3px);
68 |
69 | .btn {
70 | margin-right: 20px;
71 | font-weight: 500;
72 | color: $white;
73 | @include border-radius(5px);
74 | @include transition-duration(0.2s);
75 |
76 | &.download-button {
77 | background: rgba(249, 249, 249, 0.7);
78 | color: #969292;
79 | border: 1px solid darken(#e4e4e4,5%);
80 | }
81 |
82 | &.purchase-button {
83 | background-color: theme-color(info);
84 | color: $white;
85 | border: none;
86 | line-height: 1;
87 | vertical-align: middle;
88 | }
89 | }
90 |
91 | p {
92 | margin-bottom: auto;
93 | margin-top: auto;
94 | color: darken(#e4e4e4,40%);
95 | font-weight: 400;
96 | vertical-align: middle;
97 | line-height: 1;
98 | }
99 |
100 | i {
101 | vertical-align: middle;
102 | line-height: 1;
103 | margin: auto 0;
104 | color: darken(#e4e4e4,20%);
105 | }
106 | .bannerClose {
107 | cursor: pointer;
108 | }
109 | }
110 | &.hide {
111 | display: none;
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/src/assets/styles/_demo.scss:
--------------------------------------------------------------------------------
1 | /* Demo Styles */
2 | // Add spacing to Boostrap components for demo purpose
3 | .template-demo {
4 | > .btn {
5 | @extend .mt-3;
6 | @extend .mr-3;
7 | }
8 |
9 | .slider-wrap {
10 | height: 100px;
11 | }
12 |
13 | > .btn-toolbar {
14 | @extend .mt-3;
15 | @extend .mr-3;
16 | }
17 |
18 | > .btn-group,
19 | > .btn-group-vertical {
20 | @extend .mt-2;
21 | @extend .mr-2;
22 | }
23 |
24 | .progress {
25 | margin-top: 1.5rem;
26 | }
27 |
28 | .circle-progress {
29 | @extend .mt-2;
30 | }
31 |
32 | > h2,
33 | > h3,
34 | > h4,
35 | > h5,
36 | > h6,
37 | > h1 {
38 | border-top: 1px solid $border-color;
39 | padding: 0.5rem 0 0;
40 | }
41 |
42 | .noUi-target {
43 | &.noUi-horizontal {
44 | margin-top: 2rem;
45 | }
46 |
47 | &.noUi-vertical {
48 | margin-right: 2rem;
49 | }
50 | }
51 |
52 | > .dropdown {
53 | display: inline-block;
54 | @extend .mr-2;
55 | margin-bottom: 0.5rem;
56 | }
57 |
58 | nav {
59 | .breadcrumb {
60 | margin-bottom: 1.375rem;
61 | }
62 |
63 | &:last-child {
64 | .breadcrumb {
65 | margin-bottom: 0;
66 | }
67 | }
68 | }
69 |
70 | .editable-form {
71 | > .form-group {
72 | border-bottom: 1px solid $border-color;
73 | padding-bottom: 0.8rem;
74 | margin-bottom: 0.8rem;
75 | }
76 | }
77 |
78 | .circle-progress {
79 | padding: 15px;
80 | }
81 |
82 | .circle-progress-block {
83 | @extend .mb-3;
84 | @extend .px-2;
85 | }
86 | }
87 |
88 | .demo-modal {
89 | position: static;
90 | display: block;
91 |
92 | .modal-dialog {
93 | @extend .mt-0;
94 |
95 | &.modal-lg {
96 | max-width: 100%;
97 | }
98 | }
99 | }
100 |
101 | .loader-demo-box {
102 | @extend .border;
103 | @extend .border-secondary;
104 | @extend .rounded;
105 | width: 100%;
106 | height: 200px;
107 | @extend .d-flex;
108 | @extend .align-items-center;
109 | }
110 |
111 | .dropdown-menu-static-demo {
112 | height: 250px;
113 | margin-bottom: 20px;
114 | }
--------------------------------------------------------------------------------
/src/assets/styles/_fonts.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
2 |
3 |
--------------------------------------------------------------------------------
/src/assets/styles/_footer.scss:
--------------------------------------------------------------------------------
1 | .footer {
2 | background: $footer-bg;
3 | color: $footer-color;
4 | border-top: none;
5 | padding: 20px 1rem;
6 | transition: all $action-transition-duration $action-transition-timing-function;
7 | -moz-transition: all $action-transition-duration
8 | $action-transition-timing-function;
9 | -webkit-transition: all $action-transition-duration
10 | $action-transition-timing-function;
11 | -ms-transition: all $action-transition-duration
12 | $action-transition-timing-function;
13 | font-size: calc(#{$default-font-size} - 0.05rem);
14 | font-family: $type1;
15 | font-weight: 400;
16 | .brand-name {
17 | background: linear-gradient(to right, #ff8a00, #da1b60);
18 | background-color: black;
19 | -webkit-background-clip: text;
20 | -webkit-text-fill-color: transparent;
21 | -webkit-box-decoration-break: clone;
22 | box-decoration-break: clone;
23 | font-weight: 650;
24 | font-size: inherit;
25 | }
26 | @media (max-width: 991px) {
27 | margin-left: 0;
28 | width: 100%;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/assets/styles/_functions.scss:
--------------------------------------------------------------------------------
1 | // Functions
2 |
3 | @function social-color($key: "twitter") {
4 | @return map-get($social-colors, $key);
5 | }
6 |
--------------------------------------------------------------------------------
/src/assets/styles/_layout.scss:
--------------------------------------------------------------------------------
1 | /* Layouts */
2 |
3 | // Sidebar Mini
4 | .sidebar-mini {
5 | @media (min-width: 992px) {
6 | .page-body-wrapper {
7 | width: calc(100% - #{$sidebar-width-mini});
8 | .navbar {
9 | &.navbar-mini {
10 | &.fixed-top {
11 | left: $sidebar-width-mini;
12 | }
13 | }
14 | }
15 | }
16 | .sidebar {
17 | width: $sidebar-width-mini;
18 | .nav {
19 | .sidebar-category {
20 | text-align: center;
21 | }
22 | .nav-item {
23 | padding: 0;
24 | .nav-link {
25 | @include display-flex;
26 | @include align-items(center);
27 | @include justify-content(center);
28 | @include flex-direction(column);
29 | text-align: center;
30 | position: relative;
31 | border-bottom: none;
32 | .menu-title {
33 | display: block;
34 | margin: auto;
35 | }
36 | .badge {
37 | margin-left: 5px;
38 | display: none;
39 | }
40 | i {
41 | &.menu-icon {
42 | margin-right: auto;
43 | margin-left: auto;
44 | margin-bottom: 0.625rem;
45 | }
46 | &.menu-arrow {
47 | display: inline-block;
48 | margin-left: 5px;
49 | position: absolute;
50 | top: 50%;
51 | right: 20px;
52 | @include transform(translateY(-50%));
53 | }
54 | }
55 | }
56 | }
57 | }
58 | }
59 |
60 | &:not(.sidebar-icon-only) {
61 | //Apply these styles only when sidebar-mini is not collapsed to icon-only mode
62 | .navbar {
63 | left: $sidebar-width-mini;
64 | .navbar-menu-wrapper {
65 | width: calc(100% - #{$sidebar-width-mini});
66 | }
67 | }
68 | .sidebar {
69 | .nav {
70 | &.sub-menu {
71 | padding: 0;
72 | border-top: none;
73 | .nav-item {
74 | &::before {
75 | left: 1.562rem;
76 | }
77 | .nav-link {
78 | padding: 0.75rem 0 0.75rem 0.5rem;
79 | margin-left: auto;
80 | margin-right: auto;
81 | display: block;
82 | text-align: left;
83 | width: 66%;
84 | }
85 | }
86 | }
87 | }
88 | }
89 | }
90 | }
91 | }
92 |
93 | // Sidebar Icon Only
94 | .sidebar-icon-only {
95 | @media (min-width: 992px) {
96 | .navbar {
97 | left: $sidebar-width-icon;
98 | .rtl & {
99 | left: 0;
100 | right: 150px;
101 | }
102 | .navbar-menu-wrapper {
103 | width: calc(100% - #{$sidebar-width-icon});
104 | }
105 | }
106 | .sidebar {
107 | width: $sidebar-width-icon;
108 | .sidebar-brand-wrapper {
109 | width: $sidebar-width-icon;
110 | .brand-logo {
111 | display: none;
112 | }
113 | .brand-logo-mini {
114 | display: inline-block;
115 | }
116 | }
117 | .nav {
118 | overflow: visible;
119 | .nav-item {
120 | position: relative;
121 | padding: 0;
122 | .nav-link {
123 | display: block;
124 | text-align: center;
125 | padding: 16px 16px;
126 | .menu-title,
127 | .badge,
128 | .menu-sub-title {
129 | display: none;
130 | }
131 | .menu-title {
132 | @include border-radius(0 5px 5px 0px);
133 | @at-root #{selector-append(".rtl", &)} {
134 | @include border-radius(5px 0 0 5px);
135 | }
136 | }
137 | i {
138 | &.menu-icon {
139 | margin-right: 0;
140 | margin-left: 0;
141 | }
142 | &.menu-arrow {
143 | display: none;
144 | }
145 | }
146 | &[aria-expanded] {
147 | .menu-title {
148 | @include border-radius(0 5px 0 0px);
149 | @at-root #{selector-append(".rtl", &)} {
150 | @include border-radius(5px 0 0 0);
151 | }
152 | }
153 | }
154 | }
155 | &.nav-profile {
156 | display: none;
157 | }
158 | &.nav-category {
159 | display: none;
160 | }
161 | &.nav-doc {
162 | margin: 0;
163 | i {
164 | display: block;
165 | }
166 | }
167 | .collapse {
168 | display: none;
169 | }
170 | &.hover-open {
171 | .nav-link {
172 | .menu-title {
173 | @include display-flex;
174 | @include align-items(center);
175 | background: $sidebar-light-menu-hover-bg;
176 | @at-root #{selector-append(".sidebar-dark", &)} {
177 | background: $sidebar-dark-menu-active-bg;
178 | }
179 | padding: 0.5rem 1.4rem;
180 | left: $sidebar-width-icon;
181 | position: absolute;
182 | text-align: left;
183 | top: 0;
184 | bottom: 0;
185 | width: $icon-only-collapse-width;
186 | z-index: 1;
187 | line-height: 1.8;
188 | @at-root #{selector-append(".rtl", &)} {
189 | left: auto;
190 | right: $sidebar-width-icon;
191 | text-align: left;
192 | }
193 | @at-root #{selector-append(".sidebar-dark", &)} {
194 | color: $white;
195 | }
196 | &:after {
197 | display: none;
198 | }
199 | }
200 | }
201 | .collapse,
202 | .collapsing {
203 | display: block;
204 | padding: 0.5rem 0;
205 | background: $sidebar-light-menu-hover-bg;
206 | @include border-radius(0 0 5px 0);
207 | @at-root #{selector-append(".sidebar-dark", &)} {
208 | background: $sidebar-dark-bg;
209 | }
210 | position: absolute;
211 | left: $sidebar-width-icon;
212 | width: $icon-only-collapse-width;
213 | @at-root #{selector-append(".rtl", &)} {
214 | left: auto;
215 | right: $sidebar-width-icon;
216 | @include border-radius(0 0 0 5px);
217 | }
218 | }
219 | }
220 | }
221 | &.sub-menu {
222 | padding: $sidebar-icon-only-submenu-padding;
223 | .nav-item {
224 | padding: 0 1.25rem 0 1.25rem;
225 | .nav-link {
226 | text-align: left;
227 | padding-left: 20px;
228 | }
229 | }
230 | @at-root #{selector-append(".rtl", &)} {
231 | .nav-item {
232 | margin-right: auto;
233 | margin-left: 0;
234 | .nav-link {
235 | text-align: right;
236 | &:before {
237 | left: 0;
238 | right: unset;
239 | }
240 | }
241 | }
242 | }
243 | }
244 | }
245 | .sidebar-actions {
246 | display: none;
247 | }
248 | }
249 | .page-body-wrapper {
250 | transition: all $action-transition-duration
251 | $action-transition-timing-function;
252 | -webkit-transition: all $action-transition-duration
253 | $action-transition-timing-function;
254 | -moz-transition: all $action-transition-duration
255 | $action-transition-timing-function;
256 | -ms-transition: all $action-transition-duration
257 | $action-transition-timing-function;
258 | }
259 | .main-panel {
260 | width: 100%;
261 | }
262 | }
263 | }
264 |
265 | // Hidden Sidebar
266 | .sidebar-hidden {
267 | @media (min-width: 992px) {
268 | .navbar {
269 | left: 0;
270 | .navbar-menu-wrapper {
271 | width: 100%;
272 | }
273 | }
274 | .sidebar {
275 | width: 0;
276 | .sidebar-brand-wrapper {
277 | width: $sidebar-width-icon;
278 | }
279 | }
280 | .page-body-wrapper {
281 | width: 100%;
282 | }
283 | .main-panel {
284 | width: 100%;
285 | }
286 | }
287 | }
288 |
289 | // Absolute sidebar with overlay to content
290 | .sidebar-absolute {
291 | @media (min-width: 992px) {
292 | .page-body-wrapper {
293 | position: relative;
294 | width: 100%;
295 | .sidebar {
296 | transition: none;
297 | height: 100%;
298 | }
299 | }
300 |
301 | &:not(.sidebar-hidden) {
302 | .sidebar {
303 | position: absolute;
304 | }
305 | .page-body-wrapper {
306 | width: 100%;
307 | }
308 | }
309 |
310 | .main-panel {
311 | width: 100%;
312 | transition: none;
313 | }
314 | }
315 | }
316 |
317 | //Fixed sidebar
318 | .sidebar-fixed {
319 | @media (min-width: 992px) {
320 | .sidebar {
321 | position: fixed;
322 | max-height: auto;
323 |
324 | .nav {
325 | max-height: calc(100vh - #{$navbar-height});
326 | overflow: auto;
327 | position: relative;
328 |
329 | &.sub-menu {
330 | max-height: none;
331 | }
332 | }
333 | }
334 |
335 | .page-body-wrapper {
336 | width: 100%;
337 | margin-left: $sidebar-width-lg;
338 | }
339 |
340 | &.sidebar-icon-only {
341 | .page-body-wrapper {
342 | margin-left: $sidebar-width-icon;
343 | }
344 | }
345 | }
346 | }
347 |
348 | //Boxed layout
349 | .boxed-layout {
350 | @media (min-width: 992px) {
351 | .container-scroller {
352 | background: $boxed-layout-bg;
353 | padding: 0 calc((100% - #{$boxed-container-width}) / 2);
354 | }
355 | .navbar {
356 | &.fixed-top {
357 | @media (min-width: 1200px) {
358 | margin: 0 calc((100% - #{$boxed-container-width}) / 2);
359 | max-width: $boxed-container-width;
360 | }
361 | }
362 | }
363 | }
364 | }
365 |
366 | //RTL layout
367 | .rtl {
368 | direction: rtl;
369 | text-align: right;
370 |
371 | .sidebar {
372 | .nav {
373 | padding-right: 0;
374 | .nav-item {
375 | .nav-link {
376 | text-align: middle;
377 | }
378 | }
379 | }
380 | }
381 | .page-body-wrapper {
382 | transition: all $action-transition-duration
383 | $action-transition-timing-function;
384 | -webkit-transition: all $action-transition-duration
385 | $action-transition-timing-function;
386 | -moz-transition: all $action-transition-duration
387 | $action-transition-timing-function;
388 | -ms-transition: all $action-transition-duration
389 | $action-transition-timing-function;
390 | }
391 | .navbar {
392 | transition: all $action-transition-duration
393 | $action-transition-timing-function;
394 | -webkit-transition: all $action-transition-duration
395 | $action-transition-timing-function;
396 | -moz-transition: all $action-transition-duration
397 | $action-transition-timing-function;
398 | -ms-transition: all $action-transition-duration
399 | $action-transition-timing-function;
400 | right: $sidebar-width-lg;
401 | @media (max-width: 900px) {
402 | right: 0;
403 | }
404 | }
405 | .product-chart-wrapper,
406 | .settings-panel .tab-content .tab-pane .scroll-wrapper,
407 | .sidebar-fixed .nav,
408 | .table-responsive,
409 | ul.chats {
410 | &::-webkit-scrollbar {
411 | width: 0.5em;
412 | }
413 |
414 | &::-webkit-scrollbar-track {
415 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
416 | }
417 |
418 | &::-webkit-scrollbar-thumb {
419 | background-color: darkgrey;
420 | outline: 1px solid slategrey;
421 | }
422 | }
423 | &.sidebar-icon-only {
424 | .navbar {
425 | right: $sidebar-width-icon;
426 | left: 0;
427 | }
428 | }
429 | }
430 | a {
431 | text-decoration: none !important;
432 | }
433 |
--------------------------------------------------------------------------------
/src/assets/styles/_misc.scss:
--------------------------------------------------------------------------------
1 | /* Miscellanoeous */
2 | body,
3 | html {
4 | overflow-x: hidden;
5 | padding-right: 0; // resets padding right added by Bootstrap modal
6 | }
7 |
8 | body {
9 | background: $content-bg;
10 | }
11 |
12 | *:-moz-full-screen,
13 | *:-webkit-full-screen,
14 | *:fullscreen *:-ms-fullscreen {
15 | overflow: auto;
16 | }
17 |
18 | .page-body-wrapper {
19 | min-height: calc(100vh - #{$navbar-height});
20 | @include display-flex();
21 | @include flex-direction(row);
22 | padding-left: 0;
23 | padding-right: 0;
24 |
25 | &.full-page-wrapper {
26 | min-height: 100vh;
27 | padding-top: 0;
28 | .main-panel {
29 | width: 100%;
30 | transition: none;
31 | margin-top:-$navbar-height;
32 | .content-wrapper {
33 | padding: 0;
34 | > div {
35 | height: 100%;
36 | }
37 | }
38 | }
39 | }
40 | }
41 |
42 | .main-panel {
43 | transition: width $action-transition-duration $action-transition-timing-function, margin $action-transition-duration $action-transition-timing-function;
44 | width: calc(100% - #{$sidebar-width-lg});
45 | min-height: 100vh;
46 | padding-top: $navbar-height;
47 | @include display-flex();
48 | @include flex-direction(column);
49 | @media (max-width: 991px) {
50 | margin-left: 0;
51 | width: 100%;
52 | }
53 | &.main-panel-only {
54 | transition: none;
55 | }
56 | }
57 |
58 | .content-wrapper {
59 | background: $content-bg;
60 | padding: 1.5rem 1.7rem;
61 | width: 100%;
62 | @include flex-grow(1);
63 | @media (max-width: 991px) {
64 | padding: 2rem 2rem 0 2rem;
65 | }
66 | }
67 |
68 | .container-scroller {
69 | overflow: hidden;
70 | }
71 |
72 | pre {
73 | background: color(gray-lighter);
74 | padding: 15px;
75 | font-size: 14px;
76 | }
77 |
78 | code {
79 | padding: 5px;
80 | color: theme-color(danger);
81 | font-family: $type1;
82 | font-weight: 300;
83 | font-size: $default-font-size;
84 | border-radius: 4px;
85 | }
86 |
87 | .page-header {
88 | @extend .d-flex;
89 | @extend .justify-content-between;
90 | @extend .align-items-center;
91 | margin: 0 0 1.5rem 0;
92 | .breadcrumb {
93 | border: 0;
94 | margin-bottom: 0;
95 | }
96 | }
97 | .page-title {
98 | color: $black;
99 | font-size: 1.125rem;
100 | margin-bottom: 0;
101 | .page-title-icon {
102 | display: inline-block;
103 | width: 36px;
104 | height: 36px;
105 | border-radius: 4px;
106 | text-align: center;
107 | box-shadow: 0px 3px 8.3px 0.7px rgba(163, 93, 255, 0.35);
108 | i {
109 | font-size: .9375rem;
110 | line-height: 36px;
111 | }
112 | }
113 | }
114 | .dropdown-toggle {
115 | &.hide-carret {
116 | &:after {
117 | content: '';
118 | display: none;
119 | }
120 | }
121 | }
122 |
123 | .bg-transparent {
124 | background: transparent;
125 |
126 | }
127 | @each $color, $value in $social-colors {
128 | .text-#{$color} {
129 | @include text-color(social-color($color));
130 | }
131 | }
132 | /* inverse breadcrumb */
133 | @each $color, $value in $theme-colors {
134 | .bg-inverse-#{$color} {
135 | @include breadcrumb-inverse-variant($value);
136 | }
137 | }
--------------------------------------------------------------------------------
/src/assets/styles/_navbar.scss:
--------------------------------------------------------------------------------
1 | nav {
2 | position: fixed;
3 | width: 100%;
4 | line-height: 60px;
5 | user-select: none;
6 | background-color: white;
7 | z-index: 100;
8 | box-shadow: 0px 3px 6px #00000029;
9 | }
10 | nav img {
11 | width: 5%;
12 | }
13 | @media screen and (max-width: 800px) {
14 | nav img {
15 | width: 13%;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/assets/styles/_reset.scss:
--------------------------------------------------------------------------------
1 | /* Reset Styles */
2 |
3 | body {
4 | padding: 0;
5 | margin: 0;
6 | overflow-x: hidden;
7 | }
8 |
9 | .form-control,
10 | .form-control:focus {
11 | -webkit-box-shadow: none;
12 | -moz-box-shadow: none
13 | }
14 |
15 | .form-control {
16 | box-shadow: none
17 | }
18 |
19 | .form-control:focus {
20 | outline: 0;
21 | box-shadow: none
22 | }
23 |
24 | a,
25 | div,
26 | h1,
27 | h2,
28 | h3,
29 | h4,
30 | h5,
31 | p,
32 | span {
33 | text-shadow: none
34 | }
35 |
36 | [type=button]:focus,
37 | a:active,
38 | a:focus,
39 | a:visited,
40 | button::-moz-focus-inner,
41 | input[type=reset]::-moz-focus-inner,
42 | input[type=button]::-moz-focus-inner,
43 | input[type=submit]::-moz-focus-inner,
44 | input[type=file]>input[type=button]::-moz-focus-inner,
45 | select::-moz-focus-inner {
46 | outline: 0
47 | }
48 |
49 | input,
50 | .form-control:focus,
51 | input:focus,
52 | select:focus,
53 | textarea:focus,
54 | button:focus {
55 | outline: none;
56 | outline-width: 0;
57 | outline-color: transparent;
58 | box-shadow: none;
59 | outline-style: none;
60 | }
61 |
62 | textarea {
63 | resize: none;
64 | overflow-x: hidden;
65 | }
66 |
67 | .btn,
68 | .btn-group.open .dropdown-toggle,
69 | .btn:active,
70 | .btn:focus,
71 | .btn:hover,
72 | .btn:visited,
73 | a,
74 | a:active,
75 | a:checked,
76 | a:focus,
77 | a:hover,
78 | a:visited,
79 | body,
80 | button,
81 | button:active,
82 | button:hover,
83 | button:visited,
84 | div,
85 | input,
86 | input:active,
87 | input:focus,
88 | input:hover,
89 | input:visited,
90 | select,
91 | select:active,
92 | select:focus,
93 | select:visited,
94 | textarea,
95 | textarea:active,
96 | textarea:focus,
97 | textarea:hover,
98 | textarea:visited {
99 | -webkit-box-shadow: none;
100 | -moz-box-shadow: none;
101 | box-shadow: none
102 | }
103 |
104 | .btn.active.focus,
105 | .btn.active:focus,
106 | .btn.focus,
107 | .btn:active.focus,
108 | .btn:active:focus,
109 | .btn:focus,
110 | button,
111 | button:active,
112 | button:checked,
113 | button:focus,
114 | button:hover,
115 | button:visited {
116 | outline: 0;
117 | outline-offset: 0
118 | }
119 |
120 | .bootstrap-select .dropdown-toggle:focus {
121 | outline: 0;
122 | outline-offset: 0
123 | }
124 |
125 | .dropdown-menu>li>a:active,
126 | .dropdown-menu>li>a:focus,
127 | .dropdown-menu>li>a:hover,
128 | .dropdown-menu>li>a:visited {
129 | outline: 0
130 | }
131 |
132 | a:focus,
133 | input:focus {
134 | border-color: transparent;
135 | outline: none
136 | }
137 |
--------------------------------------------------------------------------------
/src/assets/styles/_responsive.scss:
--------------------------------------------------------------------------------
1 | @media (max-width: 991px) {
2 | .navbar {
3 | .navbar-brand-wrapper {
4 | .brand-logo {
5 | display: none;
6 | }
7 | .brand-logo-mini {
8 | display: inline-block;
9 | }
10 | }
11 | }
12 | }
13 | @media screen and (max-width: 991px) {
14 | .row-offcanvas {
15 | position: relative;
16 | -webkit-transition: all .25s ease-out;
17 | -o-transition: all .25s ease-out;
18 | transition: all .25s ease-out;
19 |
20 | &.row-offcanvas-right {
21 | right: 0;
22 |
23 | ::ng-deep .sidebar-offcanvas {
24 | right: -100%; // 12 columns
25 | }
26 |
27 | &.active {
28 | right: calc(50% + 30px); // 6 columns
29 |
30 | ::ng-deep .sidebar-offcanvas {
31 | right: calc(-50% - 15px); // 6 columns
32 | }
33 | }
34 | }
35 |
36 | &.row-offcanvas-left {
37 | left: 0;
38 |
39 | ::ng-deep .sidebar-offcanvas {
40 | left: -100%; // 12 columns
41 | }
42 |
43 | &.active {
44 | left: 50%; // 6 columns
45 |
46 | ::ng-deep .sidebar-offcanvas {
47 | left: -50%; // 6 columns
48 | }
49 | }
50 | }
51 |
52 | ::ng-deep .sidebar-offcanvas {
53 | position: absolute;
54 | top: 0;
55 | width: calc( 50% + 30px); // 6 columns
56 | }
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/assets/styles/_spinner.scss:
--------------------------------------------------------------------------------
1 | .main-spinner-wrapper {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: center;
5 | align-items: center;
6 | height: 100vh;
7 | background: #eee;
8 | .donut {
9 | width: 4rem;
10 | height: 4rem;
11 | border-radius: 50%;
12 | border: 0.3rem solid rgba(#979fd0, 0.3);
13 | border-top-color: #979fd0;
14 | animation: 1.5s spin infinite linear;
15 | }
16 | }
17 |
18 | @keyframes spin {
19 | to {
20 | transform: rotate(360deg);
21 | }
22 | }
--------------------------------------------------------------------------------
/src/assets/styles/_typography.scss:
--------------------------------------------------------------------------------
1 | /* Typography */
2 |
3 | body {
4 | font-size: 1rem;
5 | font-family: $type1;
6 | font-weight: initial;
7 | line-height: 1.5;
8 | -webkit-font-smoothing: antialiased;
9 | }
10 | .h1,
11 | .h2,
12 | .h3,
13 | .h4,
14 | .h5,
15 | .h6,
16 | h1,
17 | h2,
18 | h3,
19 | h4,
20 | h5,
21 | h6 {
22 | font-family: $type1;
23 | font-weight: normal;
24 | font-style: normal;
25 | font-stretch: normal;
26 | line-height: normal;
27 | }
28 |
29 | p,
30 | a:not([href]):not([tabindex]) {
31 | color: $body-color;
32 | font-size: $default-font-size;
33 | }
34 |
35 | .h1,
36 | h1 {
37 | font-size: 2.3125rem; //37px
38 | }
39 |
40 | .h2,
41 | h2 {
42 | font-size: 2rem; //32px
43 | }
44 |
45 | .h3,
46 | h3 {
47 | font-size: 1.6875rem; //27px
48 | }
49 |
50 | .h4,
51 | h4 {
52 | font-size: 1.25rem; //20px
53 | }
54 |
55 | .h5,
56 | h5 {
57 | font-size: 1.0625rem; //17px
58 | }
59 |
60 | .h6,
61 | h6 {
62 | font-size: 1rem; //16px
63 | }
64 |
65 | p {
66 | font-size: $default-font-size;
67 | }
68 |
69 | .display-1 {
70 | font-size: 3.75rem;
71 | @media (max-width: 991px) {
72 | font-size: 3rem;
73 | }
74 | }
75 | .display-2 {
76 | font-size: 3.125rem;
77 | @media (max-width: 991px) {
78 | font-size: 2.5rem;
79 | }
80 | }
81 | .display-3 {
82 | font-size: 2.5rem;
83 | @media (max-width: 991px) {
84 | font-size: 2rem;
85 | }
86 | }
87 | .display-4 {
88 | font-size: 1.875rem;
89 | @media (max-width: 991px) {
90 | font-size: 1.5rem;
91 | }
92 | }
93 | .display-5 {
94 | font-size: 1.25rem;
95 | @media (max-width: 991px) {
96 | font-size: 1rem;
97 | }
98 | }
99 | .blockquote {
100 | padding: 1.25rem;
101 | border: 1px solid $border-color;
102 | }
103 |
104 | address {
105 | p {
106 | margin-bottom: 0;
107 | }
108 | }
109 |
110 | //blockqoute color variations
111 | @each $color, $value in $theme-colors {
112 | .blockquote-#{$color} {
113 | @include blockquote($value);
114 | }
115 | }
116 | .error-page {
117 | h1 {
118 | font-size: 12rem;
119 | @media (max-width: 991px) {
120 | font-size: 8rem;
121 | }
122 | }
123 | }
124 | .icon-lg {
125 | font-size: 2.5rem;
126 | }
127 | .icon-md {
128 | font-size: 1.875rem;
129 | }
130 | .icon-sm {
131 | font-size: 1rem;
132 | }
133 |
--------------------------------------------------------------------------------
/src/assets/styles/_utilities.scss:
--------------------------------------------------------------------------------
1 | /* Utilities */
2 |
3 | .grid-margin {
4 | margin-bottom: $card-spacing-y;
5 | }
6 | .grid-margin-sm-0 {
7 | @media (min-width: 576px) {
8 | margin-bottom: 0;
9 | }
10 | }
11 | .grid-margin-md-0 {
12 | @media (min-width: 768px) {
13 | margin-bottom: 0;
14 | }
15 | }
16 | .grid-margin-lg-0 {
17 | @media (min-width: 992px) {
18 | margin-bottom: 0;
19 | }
20 | }
21 | .grid-margin-xl-0 {
22 | @media (min-width: 1200px) {
23 | margin-bottom: 0;
24 | }
25 | }
26 | .img-lg {
27 | width: 92px;
28 | height: 92px;
29 | }
30 | .img-sm {
31 | width: 43px;
32 | height: 43px;
33 | }
34 | .img-md {
35 | width: 35px;
36 | height: 35px;
37 | }
38 | .img-xs {
39 | width: 32px;
40 | height: 32px;
41 | }
42 | .img-ss {
43 | width: 26px;
44 | height: 26px;
45 | }
46 | .stretch-card {
47 | @include display-flex;
48 | @include align-items(stretch);
49 | @include justify-content(stretch);
50 | >.card{
51 | width: 100%;
52 | min-width: 100%;
53 | }
54 | }
55 |
56 | .border-right-sm {
57 | @media (min-width: 576px) {
58 | border-right: $border-width solid $border-color;
59 | }
60 | }
61 | .border-right-md {
62 | @media (min-width: 768px) {
63 | border-right: $border-width solid $border-color;
64 | }
65 | }
66 | .border-right-lg {
67 | @media (min-width: 992px) {
68 | border-right: $border-width solid $border-color;
69 | }
70 | }
71 |
72 | .border-left-sm {
73 | @media (min-width: 576px) {
74 | border-left: $border-width solid $border-color;
75 | }
76 | }
77 | .border-left-md {
78 | @media (min-width: 768px) {
79 | border-left: $border-width solid $border-color;
80 | }
81 | }
82 | .border-left-lg {
83 | @media (min-width: 992px) {
84 | border-left: $border-width solid $border-color;
85 | }
86 | }
87 |
88 | .text-gray {
89 | color: #212529;
90 | }
91 |
92 | .text-black {
93 | color: $black;
94 | }
95 |
96 | .text-small,
97 | small {
98 | font-size: 12px;
99 | }
100 |
101 | .flex-grow {
102 | flex-grow: 1;
103 | }
104 |
105 | .font-weight-light {
106 | font-family: $type1;
107 | font-weight: 300;
108 | }
109 |
110 | .font-weight-bold {
111 | font-family: $type1;
112 | font-weight: 700;
113 | }
114 |
115 | .font-weight-normal {
116 | font-family: $type1;
117 | font-weight: 400;
118 | }
119 |
120 | .cursor-pointer {
121 | cursor: pointer;
122 | }
123 | .image-grouped {
124 | display: flex;
125 |
126 | .text-avatar,
127 | img {
128 | @extend .img-md;
129 | border-radius: 100%;
130 | margin-left: -10px;
131 | z-index: 0;
132 | border: 4px solid $card-bg;
133 | transform: scale(1);
134 | transition-duration: 0.3s;
135 | transition-timing-function: ease;
136 | transition-property: "box-shadow", "z-index", "transform", "border-width";
137 |
138 | &:first-child {
139 | margin-left: 0;
140 | }
141 |
142 | &:hover {
143 | z-index: 1;
144 | box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.5);
145 | transform: scale(1.05);
146 | border-width: 0;
147 |
148 | }
149 | }
150 |
151 | .text-avatar {
152 | @extend .bg-inverse-primary;
153 | color: theme-color(primary);
154 | font-size: 11px;
155 | font-weight: 600;
156 | }
157 | }
158 | .dot-indicator {
159 | width: 10px;
160 | height: 10px;
161 | border-radius: 100%;
162 | }
163 | .img-avatar {
164 | display: inline-block!important;
165 | width: 64px;
166 | height: 64px;
167 | border-radius: 50%;
168 | &.img-avatar48 {
169 | width: 48px;
170 | height: 48px;
171 | }
172 | &.img-avatar-thumb {
173 | margin: .25rem;
174 | box-shadow: 0 0 0 0.25rem rgba(255,255,255,.3);
175 | }
176 | }
177 | .font-weight-light {
178 | font-family: $type1;
179 | font-weight: 300;
180 | }
181 |
182 | .font-weight-medium {
183 | font-family: $type1;
184 | font-weight: 500;
185 | }
186 | .aligner-wrapper {
187 | position: relative;
188 |
189 | .absolute {
190 | position: absolute;
191 |
192 | &.absolute-center {
193 | top: 50%;
194 | transform: translateY(-50%);
195 | bottom: 0;
196 | right: 0;
197 | left: 0;
198 | margin: auto;
199 | }
200 |
201 | &.left {
202 | left: 0;
203 | }
204 |
205 | &.right {
206 | right: 0;
207 | }
208 |
209 | &.bottom {
210 | bottom: 0;
211 | }
212 |
213 | &.top {
214 | top: 0;
215 | }
216 | }
217 | }
218 | .v-strock-2 {
219 | width: 3px;
220 | }
221 | @media (min-width: 992px) {
222 | .modal-lg,
223 | .modal-xl {
224 | max-width: 100%;
225 | }
226 | }
227 | .status-indicator {
228 | border-width: 2px;
229 | border-style: solid;
230 | border-color: #ffaf00;
231 | border-radius: 100%;
232 | display: inline-block;
233 | height: 8px;
234 | width: 8px;
235 | &.online {
236 | border-color: theme-color(success);
237 | }
238 |
239 | &.offline {
240 | border-color: theme-color(primary);
241 | }
242 |
243 | &.away {
244 | border-color: theme-color(warning);
245 | }
246 | }
--------------------------------------------------------------------------------
/src/assets/styles/_variables.scss:
--------------------------------------------------------------------------------
1 |
2 | ////////// COLOR SYSTEM //////////
3 |
4 | $blue: #5E50F9;
5 | $indigo: #6610f2;
6 | $purple: #6a008a;
7 | $pink: #E91E63;
8 | $red: #f96868;
9 | $orange: #f2a654;
10 | $yellow: #f6e84e;
11 | $green: #46c35f;
12 | $teal: #58d8a3;
13 | $cyan: #57c7d4;
14 | $black: #000;
15 | $white: #ffffff;
16 | $white-smoke: #f2f7f8;
17 | $violet: #41478a;
18 | $darkslategray : #2e383e;
19 | $dodger-blue : #3498db;
20 |
21 |
22 | $colors: (
23 | blue: $blue,
24 | indigo: $indigo,
25 | purple: $purple,
26 | pink: $pink,
27 | red: $red,
28 | orange: $orange,
29 | yellow: $yellow,
30 | green: $green,
31 | teal: $teal,
32 | cyan: $cyan,
33 | white: $white,
34 | gray: #434a54,
35 | gray-light: #aab2bd,
36 | gray-lighter: #e8eff4,
37 | gray-lightest: #e6e9ed,
38 | gray-dark: #0f1531,
39 | black: #000000
40 | );
41 |
42 |
43 | $theme-colors: (
44 | primary: #2196f3,
45 | secondary: #dde4eb,
46 | success: #19d895,
47 | info: #8862e0,
48 | warning: #ffaf00,
49 | danger: #FF0017,
50 | light: #fbfbfb,
51 | dark: #252C46
52 | );
53 |
54 | $theme-gradient-colors: (
55 | primary: linear-gradient(to right, #da8cff, #9a55ff),
56 | secondary: linear-gradient(to right, #e7ebf0, #868e96),
57 | success: linear-gradient(to right, #84d9d2, #07cdae),
58 | info: linear-gradient(to right, #90caf9, #047edf 99%),
59 | warning: linear-gradient(to right, #f6e384, #ffd500),
60 | danger: linear-gradient(to right, #ffbf96, #fe7096),
61 | light: linear-gradient(to bottom, #f4f4f4, #e4e4e9),
62 | dark: linear-gradient(89deg, #5e7188, #3e4b5b)
63 | );
64 |
65 |
66 | ////////// COLOR SYSTEM //////////
67 |
68 | ////////// COLOR VARIABLES //////////
69 | $content-bg: #f3f4fa;
70 | $footer-bg: $content-bg;
71 | $footer-color: color(dark);
72 | $border-color: #dee2e6;
73 | $circle-border:$white;
74 |
75 | ////////// COLOR VARIABLES //////////
76 |
77 |
78 |
79 | ////////// SOCIAL COLORS //////////
80 |
81 | $social-colors: (
82 | twitter: #2caae1,
83 | facebook: #3b579d,
84 | google: #dc4a38,
85 | linkedin: #0177b5,
86 | pinterest: #cc2127,
87 | youtube: #e52d27,
88 | github: #333333,
89 | behance: #1769ff,
90 | dribbble: #ea4c89,
91 | reddit: #ff4500
92 | );
93 |
94 | ////////// SOCIAL COLORS //////////
95 |
96 | ////////// FONTS//
97 |
98 | $type1: 'Roboto', sans-serif;
99 |
100 | $default-font-size: .875rem; // 14px as base font size
101 |
102 | $text-muted: #6c7293;
103 | $body-color: #343a40;
104 |
105 | ////////// FONT VARIABLES //////////
106 |
107 | ////////// SIDEBAR ////////
108 | $sidebar-width-lg: 255px;
109 | $sidebar-width-mini: 185px;
110 | $sidebar-width-icon: 70px;
111 |
112 | $sidebar-light-bg: #fff;
113 | $sidebar-light-menu-color: #4a4a4a;
114 | $sidebar-light-submenu-color: $sidebar-light-menu-color;
115 | $sidebar-light-menu-active-bg: #fafbfc;
116 | $sidebar-light-menu-active-color:theme-color(primary);
117 | $sidebar-light-menu-hover-bg: $sidebar-light-menu-active-bg;
118 | $sidebar-light-menu-hover-color: $sidebar-light-menu-color;
119 | $sidebar-light-submenu-hover-bg: initial;
120 | $sidebar-light-submenu-hover-color: #000;
121 | $sidebar-light-icon-active-color: theme-color(success);
122 | $sidebar-light-menu-icon-color: $sidebar-light-menu-color;
123 | $sidebar-light-menu-arrow-color: #9e9da0;
124 | $sidebar-light-menu-border-color: #c0bfcf;
125 | $sidebar-light-category-color: #999999;
126 | $sidebar-light-profile-name-color: #404852;
127 | $sidebar-light-profile-title-color: #8d9498;
128 |
129 |
130 |
131 |
132 |
133 | $sidebar-dark-bg: #18151e;
134 | $sidebar-dark-menu-color: $white;
135 | $sidebar-dark-menu-active-bg: #282037;
136 | $sidebar-dark-menu-active-color: darken($white, 30%);
137 | $sidebar-dark-menu-hover-bg: lighten($sidebar-dark-bg, 10%);
138 | $sidebar-dark-menu-hover-color: color(white);
139 | $sidebar-dark-submenu-color: $sidebar-dark-menu-color;
140 | $sidebar-dark-submenu-hover-bg: initial;
141 | $sidebar-dark-submenu-hover-color: darken($sidebar-dark-submenu-color, 30%);
142 | $sidebar-dark-icon-bg: rgba(194,244,219,.12);
143 | $sidebar-dark-icon-color: #33c92d;
144 | $sidebar-dark-action-border: rgba(151,151,151,.27);
145 | $sidebar-dark-menu-icon-color: #bba8bff5;
146 | $sidebar-dark-menu-arrow-color: #9e9da0;
147 |
148 | $sidebar-dark-profile-name-color: #404852;
149 | $sidebar-dark-profile-title-color: #8d9498;
150 |
151 | $sidebar-menu-font-size: 12px;
152 | $sidebar-menu-padding-y: 12px;
153 | $sidebar-menu-padding-x: 2.25rem;
154 |
155 | $sidebar-menu-padding: 16px 35px;
156 | $sidebar-icon-size: 16px;
157 |
158 | $sidebar-submenu-font-size: .75rem;
159 | $sidebar-submenu-item-padding: .75rem 1rem .75rem 1rem;
160 | $sidebar-submenu-padding: 0 0 0 4rem;
161 |
162 | $sidebar-icon-font-size: 20px;
163 | $sidebar-arrow-font-size: .625rem;
164 |
165 | $sidebar-profile-bg: transparent;
166 | $sidebar-profile-padding: .75rem 1.625rem .75rem 1.188rem;
167 |
168 | $sidebar-mini-menu-padding: .8125rem 1rem .8125rem 1rem;
169 |
170 | $sidebar-icon-only-menu-padding: .5rem 1.625rem .5rem 1.188rem;
171 | $sidebar-icon-only-submenu-padding: 0 0 0 1.5rem;
172 |
173 | $icon-only-collapse-width: 190px;
174 | $icon-only-menu-bg-light: $sidebar-light-bg;
175 | $icon-only-menu-bg-dark: $sidebar-dark-bg;
176 |
177 | ///////// SIDEBAR ////////
178 |
179 | ///////// NAVBAR ////////
180 |
181 | $navbar-height: 63px;
182 | $navbar-bg: linear-gradient(120deg, #2f78e9, #128bfc, #18bef1);
183 | $navbar-menu-color: #fff;
184 | $navbar-font-size: 12px;
185 | $navbar-icon-font-size: 1.25rem;
186 | $nvabar-brand-bg: #000000;
187 | $nvabar-toggler-color: #8e94a9;
188 | $navbar-search-bg: #eef0fa;
189 | $nvabar-search-icon-color: #8e94a9;
190 | $nav-dropdown-color: #111111;
191 | $navbar-item-bg: #3f3f40;
192 | $navbar-item-light-bg: #e6e5f2;
193 | $light-color-icon-bg: #f2f2f2;
194 | $nav-link-height: 52px;
195 |
196 | ///////// NAVBAR ////////
197 |
198 |
199 |
200 | ///////// BUTTONS ////////
201 |
202 | $button-fixed-width: 120px;
203 | $btn-padding-y: 0.4rem;
204 | $btn-padding-x: 1rem;
205 | $btn-line-height: 1;
206 | $btn-padding-y-xs: .5rem;
207 | $btn-padding-x-xs: .75rem;
208 | $btn-padding-y-sm: 0.5rem;
209 | $btn-padding-x-sm: .95rem;
210 | $btn-padding-y-lg: 0.94rem;
211 | $btn-padding-x-lg: 1.94rem;
212 | $btn-font-size: .875rem;
213 | $btn-font-size-xs: .625rem;
214 | $btn-font-size-sm: .875rem;
215 | $btn-font-size-lg: .875rem;
216 | $btn-border-radius: .1875rem;
217 | $btn-border-radius-xs: .1875rem;
218 | $btn-border-radius-sm: .1875rem;
219 | $btn-border-radius-lg: .1875rem;
220 | $social-btn-padding: 13px;
221 | $social-btn-icon-size: 1rem;
222 |
223 | ///////// BUTTONS ////////
224 |
225 |
226 |
227 | ////////// TOOLTIP VARIABLES //////////
228 |
229 | //default styles
230 | $tooltip-font-size: .75rem;
231 | $tooltip-padding-y: .4rem;
232 | $tooltip-padding-x: .75rem;
233 | $tooltip-border-radius: .375rem;
234 |
235 | ////////// TOOLTIP VARIABLES //////////
236 |
237 |
238 |
239 | ///////// FORMS /////////
240 |
241 | $input-bg: color(white);
242 | $input-border-radius: 2px;
243 | $input-placeholder-color: #b9b8b8;
244 | $input-font-size: 0.75rem;
245 |
246 | $input-padding-y: .875rem;
247 | $input-padding-x: 1.375rem;
248 | $input-line-height: 1;
249 |
250 | $input-padding-y-xs: .5rem;
251 | $input-padding-x-xs: .75rem;
252 |
253 | $input-padding-y-sm: .50rem;
254 | $input-padding-x-sm: .81rem;
255 |
256 | $input-padding-y-lg: .94rem;
257 | $input-padding-x-lg: 1.94rem;
258 |
259 | $input-height: 2.875rem;
260 | $input-height-sm: 2.575rem;
261 | $input-height-lg: 3.175rem;
262 |
263 | ///////// FORMS /////////
264 |
265 | //////// DROPDOWNS ///////
266 |
267 | $dropdown-border-color: $border-color;
268 | $dropdown-divider-bg: $border-color;
269 | $dropdown-link-color: $body-color;
270 | $dropdown-header-color: $body-color;
271 | //////// DROPDOWNS ///////
272 |
273 | //////// TABLES ////////
274 | $table-accent-bg: rgba(0, 0, 0, 0.05);
275 | $table-hover-bg: $content-bg;
276 | $table-cell-padding: .9375rem;
277 | $table-border-color: $border-color;
278 |
279 | $table-inverse-bg: #2a2b32;
280 | $table-inverse-color: color(white);
281 |
282 | //////// TABLES ////////
283 |
284 |
285 |
286 | ////////// MEASUREMENT AND PROPERTY VARIABLES //////////
287 | $card-bg: #fff;
288 | $card-title-color: $body-color;
289 | $border-property: 1px solid $border-color;
290 | $border-property: 1px solid $border-color;
291 | $card-spacing-y: 25px;
292 | $card-padding-y: 1.88rem;
293 | $card-padding-x: 1.81rem;
294 | $card-border-radius: 3px;
295 | $card-border-color: #e6e6e6;
296 | $grid-gutter-width: 25px;
297 | $action-transition-duration: 0.25s;
298 | $action-transition-timing-function: ease;
299 | $card-description-color: #76838f;
300 | $card-bg-varient: #fff;
301 | $card-shadow-color: 0px 0px 8px 6px rgba(0, 0, 0, 0.02);
302 | $list-card-bg: $white;
303 | ////////// OTHER VARIABLES //////////
304 |
305 |
306 |
307 | ////////// BREAD CRUMBS VARIABLES //////////
308 |
309 | // default styles
310 | $breadcrumb-padding-y: 0.56rem;
311 | $breadcrumb-padding-x: 1.13rem;
312 | $breadcrumb-item-padding: .5rem;
313 | $breadcrumb-margin-bottom: 1rem;
314 | $breadcrumb-font-size: $default-font-size;
315 | $breadcrumb-bg: transparent;
316 | $breadcrumb-border-color: $border-color;
317 | $breadcrumb-divider-color: $gray-600;
318 | $breadcrumb-active-color: $gray-700;
319 | $breadcrumb-divider: "/";
320 |
321 | // custom styles
322 | $breadcrumb-custom-padding-y: 0;
323 | $breadcrumb-custom-padding-x: 0;
324 | $breadcrumb-custom-item-padding-y: 0.56rem;
325 | $breadcrumb-custom-item-padding-x: 10px;
326 | $breadcrumb-custom-item-color: $black;
327 | $breadcrumb-item-bg: #dbe3e6;
328 |
329 | ////////// BREAD CRUMBS VARIABLES //////////
330 |
331 |
332 |
333 | ////////// MODALS VARIABLES //////////
334 |
335 | $modal-inner-padding: 15px;
336 | $modal-dialog-margin: 10px;
337 | $modal-dialog-margin-y-sm-up: 30px;
338 | $modal-title-line-height: $line-height-base;
339 | $modal-content-bg: $content-bg;
340 | $modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5);
341 | $modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5);
342 |
343 | $modal-backdrop-bg: $black;
344 | $modal-backdrop-opacity: .5;
345 |
346 | $modal-header-border-color: $border-color;
347 | $modal-content-border-color: $border-color;
348 | $modal-footer-border-color: $border-color;
349 |
350 | $modal-header-border-width: $border-width;
351 | $modal-content-border-width: $border-width;
352 | $modal-footer-border-width: $border-width;
353 |
354 | $modal-header-padding-x: 26px;
355 | $modal-header-padding-y: 25px;
356 |
357 | $modal-body-padding-x: 26px;
358 | $modal-body-padding-y: 35px;
359 |
360 | $modal-footer-padding-x: 31px;
361 | $modal-footer-padding-y: 15px;
362 |
363 | $modal-lg: 90%;
364 | $modal-md: 500px;
365 | $modal-sm: 300px;
366 | $modal-transition: transform .4s ease;
367 |
368 | ////////// MODALS VARIABLES //////////
369 |
370 | ///////// TABS VARIABLES //////////
371 | $nav-tabs-border-color: #ebedf2;
372 | $nav-tabs-link-bg: #f6f8fa;
373 | $nav-tabs-link-color: #000000;
374 | $nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-border-color;
375 | $nav-tabs-link-active-color: $body-color;
376 | $nav-tabs-link-active-bg: $white;
377 | $nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-link-active-bg;
378 | $nav-pills-custom-bg: #fcfcfd;
379 | $text-gray:gray;
380 | $circle-img-border: $white;
381 | //////// TABS VARIABLES /////////
382 |
383 | //////// CALENDAR //////////////
384 | $fullcalendar-color: #a8b2b9;
385 | //////// CALENDAR //////////////
386 |
387 | ///////// SETTINGS PANEL ////////
388 | $settings-panel-width: 300px;
389 | ///////// SETTINGS PANEL ////////
390 |
391 | ////////// Vendor file asset path //////////
392 | $mdi-font-path: "~@mdi/font/fonts";
393 | $fa-font-path : '~font-awesome/fonts/';
394 | $flag-icon-css-path : '~flag-icon-css/flags/';
395 | $simple-line-font-path : '~simple-line-icons/fonts/';
396 |
397 |
398 | ///////// BOXED LAYOUT ///////
399 | $boxed-container-width: 1200px;
400 | $boxed-layout-bg: #c6c8ca;
401 | ///////// BOXED LAYOUT ///////
402 |
403 | ///////// TICKETS-TAB ///////
404 | $tab-head-bg: darken(#f2edf3, 2%);
405 | $accent-color: $white;
406 | ///////// TICKETS-TAB ///////
407 |
408 | ///////// LANDING PAGE ///////
409 | $landing-bg:#1a142dfa;
410 | $landing-bg-color: $white;
411 | ///////// LANDING PAGE ///////
412 |
413 | ///////// CHATS ///////
414 | $chat-container-height:100%;
415 | $chat-bottom-btn: $white;
416 | $form-focus-bg: $white;
417 | ///////// CHATS ///////
418 |
419 | ///////// KANBAN ///////
420 | $private-btn-bg:#eae2ec;
421 | ///////// KANBAN ///////
422 |
423 | $bullet-line-list-shape-bg: color(white) !default;
424 |
425 | $card-mixed-danger :linear-gradient(to bottom, #d41459 , #911a6c);
426 |
427 |
428 | $survey-head-color: #a7afb7;
429 | $list-border-bg: #e8e8e8;
430 |
431 | $accordian-head-color: $black;
432 | $datepicker-arrow-bg: #eef1f2;
--------------------------------------------------------------------------------
/src/assets/styles/components/_spinner.scss:
--------------------------------------------------------------------------------
1 | .spinner-wrapper {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: calc(100vh - #{$navbar-height} - 5.5rem);
6 | position: fixed;
7 | width: 100%;
8 | @media (max-width: 991px) {
9 | width: 100%;
10 | }
11 | .donut {
12 | width: 4rem;
13 | height: 4rem;
14 | border-radius: 50%;
15 | border: 0.3rem solid lighten(theme-color(primary), 30%);
16 | border-top-color: lighten(theme-color(primary), 10%);
17 | animation: 1.5s spin infinite linear;
18 | }
19 | }
20 |
21 | :host-context(.sidebar-icon-only) {
22 | .spinner-wrapper {
23 | width: 100%;
24 | }
25 | }
26 |
27 | :host-context(.sidebar-mini) {
28 | .spinner-wrapper {
29 | width: 1000%;
30 | }
31 | }
32 |
33 | @keyframes spin {
34 | to {
35 | transform: rotate(360deg);
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/assets/styles/mixins/_animation.scss:
--------------------------------------------------------------------------------
1 | /* Animation Mixins */
2 | @keyframes dropdownAnimation {
3 | from {
4 | opacity: 0;
5 | -webkit-transition: all .3s;
6 | -moz-transition: all .3s;
7 | -ms-transition: all .3s;
8 | -o-transition: all .3s;
9 | transition: all .3s;
10 | }
11 |
12 | to {
13 | opacity: 1;
14 | -webkit-transition: all .3s;
15 | -moz-transition: all .3s;
16 | -ms-transition: all .3s;
17 | -o-transition: all .3s;
18 | transition: all .3s;
19 | }
20 | }
21 |
22 | .dropdownAnimation {
23 | animation-name: dropdownAnimation;
24 | @include animation-duration($action-transition-duration);
25 | @include animation-fill-mode(both);
26 | }
27 | @mixin transition($settings) {
28 | -webkit-transition: $settings;
29 | -moz-transition: $settings;
30 | -ms-transition: $settings;
31 | -o-transition: $settings;
32 | transition: $settings;
33 | }
34 | @keyframes fadeOut {
35 | from {
36 | opacity: 1;
37 | }
38 |
39 | to {
40 | opacity: 0;
41 | }
42 | }
43 |
44 | .fadeOut {
45 | animation-name: fadeOut;
46 | }
47 |
48 | .infinite-spin {
49 | @keyframes spin {
50 | from {
51 | transform: rotate(0deg);
52 | }
53 |
54 | to {
55 | transform: rotate(360deg);
56 | }
57 | }
58 | animation-name: spin;
59 | animation-duration: 3s;
60 | animation-iteration-count: infinite;
61 | animation-timing-function: linear;
62 | }
63 | @keyframes fadeInUp {
64 | from {
65 | opacity: 0;
66 | transform: translate3d(0, 100%, 0);
67 | }
68 |
69 | to {
70 | opacity: 1;
71 | transform: none;
72 | }
73 | }
74 |
75 | .fadeInUp {
76 | animation-name: fadeInUp;
77 | }
--------------------------------------------------------------------------------
/src/assets/styles/mixins/_badges.scss:
--------------------------------------------------------------------------------
1 | //Badge Mixins
2 |
3 | //Badge vriations
4 | @mixin badge-variations($color) {
5 | border: 1px solid $color;
6 | color: $white;
7 | }
8 | // Badge outlined variations
9 | @mixin badge-outline-variations($color) {
10 | color: $color;
11 | border: 1px solid $color;
12 | }
13 | @mixin badge-inverse-variations($color) {
14 | background: rgba($color, 0.3);
15 | color: $color;
16 | }
--------------------------------------------------------------------------------
/src/assets/styles/mixins/_blockqoute.scss:
--------------------------------------------------------------------------------
1 | // BlockQuote Mixins //
2 |
3 | @mixin blockquote($color) {
4 | border-color: $color;
5 | .blockquote-footer {
6 | color: $color;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/assets/styles/mixins/_buttons.scss:
--------------------------------------------------------------------------------
1 | @mixin social-button($color) {
2 | background: $color;
3 | color: color(white);
4 |
5 | &:hover {
6 | background: darken($color, 10%);
7 | }
8 |
9 | &.btn-link {
10 | background: none;
11 | color: $color;
12 |
13 | &:hover {
14 | color: darken($color, 10%);
15 | }
16 | }
17 | }
18 |
19 | @mixin btn-social-outline-variant($color) {
20 | background: transparent;
21 | border-color: $color;
22 | color: $color;
23 |
24 | &:hover {
25 | background: rgba($color, 0.2);
26 | }
27 | }
28 |
29 | @mixin button-inverse-variant($color, $color-hover: $white) {
30 | color: $color;
31 | background-color: rgba($color, 0.2);
32 | background-image: none;
33 | border-color: rgba($color, 0);
34 |
35 | @include hover {
36 | color: $color-hover;
37 | background-color: $color;
38 | border-color: $color;
39 | }
40 |
41 | &.disabled,
42 | &:disabled {
43 | color: $color;
44 | background-color: transparent;
45 | }
46 |
47 | &.active,
48 | &:active,
49 | .show>&.dropdown-toggle {
50 | color: $color-hover;
51 | background-color: $color;
52 | border-color: $color;
53 | }
54 | }
55 |
56 | @mixin button-inverse-outline-variant($color, $color-hover: $white) {
57 | color: $color;
58 | background-image: none;
59 | background: transparent;
60 | border-color: rgba($color, 0.2);
61 |
62 | @include hover {
63 | color: $color;
64 | background-color: rgba($color, 0.2);
65 | border-color: rgba($color, 0.2);
66 | }
67 |
68 | &.focus,
69 | &:focus {
70 | box-shadow: 0 0 0 3px rgba($color, .5);
71 | }
72 |
73 | &.disabled,
74 | &:disabled {
75 | color: $color;
76 | background-color: transparent;
77 | }
78 |
79 | &.active,
80 | &:active,
81 | .show>&.dropdown-toggle {
82 | color: $color-hover;
83 | border-color: $color;
84 | }
85 | }
--------------------------------------------------------------------------------
/src/assets/styles/mixins/_cards.scss:
--------------------------------------------------------------------------------
1 | // Cards Mixins
2 |
3 | @mixin card-inverse-variant($bg, $border, $color) {
4 | background: $bg;
5 | border: 1px solid $border;
6 | color: $color;
7 | }
8 | @mixin bg-inverse-icon($color) {
9 | background: darken($color, 24%);
10 | border-color: $color;
11 |
12 | .bg-item {
13 | color: $color;
14 |
15 | &:before {
16 | color: inherit;
17 | }
18 |
19 | a {
20 | color: inherit;
21 | }
22 | }
23 |
24 | &.bg-custom {
25 | background: transparent;
26 |
27 | .bg-item {
28 | background: lighten($color, 25%);
29 |
30 | a {
31 | color: $color;
32 | border: none;
33 |
34 | &:before {
35 | border-left-color: lighten($color, 25%);
36 | }
37 | }
38 |
39 | span {
40 | color: $color;
41 | }
42 |
43 | &:last-child {
44 | background: transparent;
45 | }
46 | }
47 | }
48 | }// Background Mixins //
49 |
--------------------------------------------------------------------------------
/src/assets/styles/mixins/_color-functions.scss:
--------------------------------------------------------------------------------
1 | // Color Functions Mixins
2 |
3 | // Solid tab variations
4 | @mixin tab-solid-variant($color) {
5 | .nav-link {
6 | &.active {
7 | background: $color;
8 | }
9 | }
10 | }
11 | // Minimal tab variations
12 | @mixin tab-minimal-variant($color) {
13 | .nav-tabs {
14 | .nav-item {
15 | .nav-link {
16 | &.active {
17 | color: $color;
18 | }
19 | }
20 | }
21 | }
22 | }
23 | // Sider color variations
24 | @mixin slider-color-variant($color) {
25 | .noUi-base {
26 | .noUi-connect {
27 | background: $color;
28 | }
29 |
30 | .noUi-origin {
31 | background: $color;
32 |
33 | .noUi-handle {
34 | &:after {
35 | background: $color;
36 | }
37 |
38 | .noUi-tooltip {
39 | background: $color;
40 | color: $white;
41 | }
42 | }
43 | }
44 | }
45 | }
46 | // Breadcrumb color variations
47 | @mixin breadcrumb-inverse-variant($color) {
48 | background: lighten($color, 25%);
49 | border-color: $color;
50 |
51 | .breadcrumb-item {
52 | color: $color;
53 |
54 | &:before {
55 | color: inherit;
56 | }
57 |
58 | a {
59 | color: inherit;
60 | }
61 | }
62 |
63 | &.breadcrumb-custom {
64 | background: transparent;
65 |
66 | .breadcrumb-item {
67 | background: lighten($color, 25%);
68 |
69 | a {
70 | color: $color;
71 | border: none;
72 |
73 | &:before {
74 | border-left-color: lighten($color, 25%);
75 | }
76 | }
77 |
78 | span {
79 | color: $color;
80 | }
81 |
82 | &:last-child {
83 | background: transparent;
84 | }
85 | }
86 | }
87 | }
88 | // Pagination variations
89 | @mixin pagination-variants($color) {
90 | .page-item {
91 | &.active {
92 | .page-link {
93 | background: $color;
94 | border-color: $color;
95 | }
96 | }
97 |
98 | .page-link {
99 | &:hover {
100 | background: lighten($color,5%);
101 | border-color: $color;
102 | color: $white;
103 | }
104 | }
105 | }
106 | }
107 | // Accordion Inverse variations
108 | @mixin accordion-inverse-variant($color) {
109 | .card {
110 | background: rgba($color, 0.16);
111 | color: $color;
112 | border: none;
113 |
114 | .card-header {
115 | color: $color;
116 | border: none;
117 |
118 | a,
119 | h1,
120 | h2,
121 | h3,
122 | h4,
123 | h5,
124 | h6,
125 | p,
126 | span {
127 | color: $color;
128 | }
129 |
130 | a {
131 | border-color: $color;
132 |
133 | &:before {
134 | color: $color;
135 | }
136 |
137 | &[aria-expanded="true"] {
138 | border-bottom: 1px solid rgba($color, 0.16);
139 | }
140 |
141 | &[aria-expanded="false"] {
142 | border-bottom: 1px solid transparent;
143 | }
144 | }
145 | }
146 | }
147 | }
148 |
--------------------------------------------------------------------------------
/src/assets/styles/mixins/_misc.scss:
--------------------------------------------------------------------------------
1 | /* Miscellaneous Mixins */
2 |
3 | // general transform
4 | @mixin transform($transforms) {
5 | -moz-transform: $transforms;
6 | -o-transform: $transforms;
7 | -ms-transform: $transforms;
8 | -webkit-transform: $transforms;
9 | transform: $transforms;
10 | }
11 |
12 | // rotate
13 | @mixin rotate ($deg) {
14 | @include transform(rotate(#{$deg}deg));
15 | }
16 |
17 | // scale
18 | @mixin scale($scale) {
19 | @include transform(scale($scale));
20 | }
21 | // translate
22 | @mixin translate ($x, $y) {
23 | @include transform(translate($x, $y));
24 | }
25 | // skew
26 | @mixin skew ($x, $y) {
27 | @include transform(skew(#{$x}deg, #{$y}deg));
28 | }
29 | //transform origin
30 | @mixin transform-origin ($origin) {
31 | moz-transform-origin: $origin;
32 | -o-transform-origin: $origin;
33 | -ms-transform-origin: $origin;
34 | -webkit-transform-origin: $origin;
35 | transform-origin: $origin;
36 | }
37 | //Ellipsis
38 | %ellipsor{
39 | text-overflow: ellipsis;
40 | overflow: hidden;
41 | max-width:100%;
42 | white-space: nowrap;
43 | }
44 |
45 | @mixin ellipsor {
46 | text-overflow: ellipsis;
47 | overflow: hidden;
48 | max-width: 100%;
49 | white-space: nowrap;
50 | }
51 |
52 | // Placeholder
53 | @mixin placeholder {
54 | &::-webkit-input-placeholder {
55 | @content
56 | }
57 | &:-moz-placeholder {
58 | @content
59 | }
60 | &::-moz-placeholder {
61 | @content
62 | }
63 | &:-ms-input-placeholder {
64 | @content
65 | }
66 | }
67 | @mixin text-color($color) {
68 | color: $color;
69 | line-height: 1;
70 | }
--------------------------------------------------------------------------------
/src/assets/styles/mixins/_no-ui-slider.scss:
--------------------------------------------------------------------------------
1 |
2 | // Sider color variations
3 | @mixin slider-color-variant($color) {
4 | .noUi-base {
5 | .noUi-connect {
6 | background: $color;
7 | }
8 |
9 | .noUi-origin {
10 | background: $color;
11 |
12 | .noUi-handle {
13 | &:after {
14 | background: $color;
15 | }
16 |
17 | .noUi-tooltip {
18 | background: $color;
19 | color: $white;
20 | }
21 | }
22 | }
23 | }
24 | }
--------------------------------------------------------------------------------
/src/assets/styles/mixins/_popovers.scss:
--------------------------------------------------------------------------------
1 | // popover color variations //
2 |
3 | @mixin popover-variant($color) {
4 | border-color: $color;
5 | .popover-header {
6 | background: theme-color($color);
7 | color: $white;
8 | border-bottom: 0;
9 | }
10 | &.bs-popover-top {
11 | .arrow {
12 | &:before,
13 | &:after {
14 | border-top-color: theme-color($color);
15 | }
16 | }
17 | }
18 | &.bs-popover-right {
19 | .arrow {
20 | &:before,
21 | &:after {
22 | border-right-color: theme-color($color);
23 | }
24 | }
25 | }
26 | &.bs-popover-bottom {
27 | .arrow {
28 | &:before,
29 | &:after {
30 | border-bottom-color: theme-color($color);
31 | }
32 | }
33 | }
34 | &.bs-popover-left {
35 | .arrow {
36 | &:before,
37 | &:after {
38 | border-left-color: theme-color($color);
39 | }
40 | }
41 | }
42 | }
--------------------------------------------------------------------------------
/src/assets/styles/mixins/_tooltips.scss:
--------------------------------------------------------------------------------
1 | // Tooltip color variations
2 |
3 | @mixin tooltip-variant($color) {
4 | .tooltip-inner {
5 | background: theme-color($color);
6 | color: $white;
7 | }
8 | &.bs-tooltip-top {
9 | .arrow::before {
10 | border-top-color: theme-color($color);
11 | }
12 | }
13 | &.bs-tooltip-right {
14 | .arrow::before {
15 | border-right-color: theme-color($color);
16 | }
17 | }
18 | &.bs-tooltip-bottom {
19 | .arrow::before {
20 | border-bottom-color: theme-color($color);
21 | }
22 | }
23 | &.bs-tooltip-left {
24 | .arrow::before {
25 | border-left-color: theme-color($color);
26 | }
27 | }
28 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { BrowserRouter } from 'react-router-dom';
4 | import App from './app/App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(
8 |
9 |
10 |
11 | , document.getElementById('root'));
12 |
13 | serviceWorker.unregister();
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------