Skip to content

Commit 6c88c15

Browse files
prasanna1211prasanna1211
committed
modified many changes related to globals and removed some files
1 parent 518dcbe commit 6c88c15

File tree

14 files changed

+105
-601
lines changed

14 files changed

+105
-601
lines changed

‎src/button/theme.scss

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../globals/theme';
2+
13
:local(.button) {
24
align-content: center;
35
align-items: center;
@@ -63,55 +65,55 @@
6365
}
6466

6567
:local(.default) {
66-
color: #000;
67-
background-color: white;
68-
border-color: white;
68+
color: $original-black;
69+
background-color: $original-white;
70+
border-color: $original-white;
6971
}
7072

7173
:local(.primary) {
72-
color: #fff;
73-
background-color: #007bff;
74-
border-color: #007bff;
74+
color: $original-white;
75+
background-color: $secondary-violet;
76+
border-color: $secondary-violet;
7577
}
7678

7779
:local(.secondary) {
78-
color: #fff;
79-
background-color: #6c757d;
80-
border-color: #6c757d;
80+
color: $original-white;
81+
background-color: $secondary-grey;
82+
border-color: $secondary-grey;
8183
}
8284

8385
:local(.success) {
84-
color: #fff;
85-
background-color: #28a745;
86-
border-color: #28a745;
86+
color: $original-white;
87+
background-color: $secondary-green;
88+
border-color: $secondary-green;
8789
}
8890

8991
:local(.danger) {
90-
color: #fff;
91-
background-color: #dc3545;
92-
border-color: #dc3545;
92+
color: $original-white;
93+
background-color: $secondary-red;
94+
border-color: $secondary-red;
9395
}
9496

9597
:local(.warning) {
96-
color: #212529;
97-
background-color: #ffc107;
98-
border-color: #ffc107;
98+
color: $secondary-black;
99+
background-color: $secondary-yellow;
100+
border-color: $secondary-yellow;
99101
}
100102

101103
:local(.info) {
102-
color: #fff;
103-
background-color: #17a2b8;
104-
border-color: #17a2b8;
104+
color: $original-white;
105+
background-color: $secondary-blue;
106+
border-color: $secondary-blue;
105107
}
106108

107109
:local(.light) {
108-
color: #212529;
109-
background-color: #f8f9fa;
110-
border-color: #f8f9fa;
110+
color: $secondary-black;
111+
background-color: $secondary-white;
112+
border-color: $secondary-white;
111113
}
112114

113115
:local(.dark) {
114-
color: #fff;
115-
background-color: #343a40;
116-
border-color: #343a40;
116+
color: $original-white;
117+
background-color: $secondary-black;
118+
border-color: $secondary-black;
117119
}

‎src/card/theme.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
@import '../globals/theme';
2+
13
:local(.card) {
2-
background: #FFFFFF;
4+
background: $original-white;
35
border-radius: 3px;
46
padding: 10px;
57
margin: 5px;

‎src/checkbox/theme.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
@import '../globals/theme.scss';
2+
13
:local(.checkbox) {
2-
background-color: #ccc;
4+
background-color: $secondary-white;
35
padding: 2px;
6+
border: 1px solid $secondary-black;
47
&:hover {
58
cursor: pointer;
69
}
@@ -11,7 +14,7 @@
1114
}
1215

1316
:local(.checked) {
14-
background-color: #2196F3 !important;
17+
background-color: $secondary-blue !important;
1518
height: 200px;
1619
position: relative;
1720
.check-item {
@@ -22,7 +25,7 @@
2225
top: 10%;
2326
width: 5px;
2427
height: 10px;
25-
border: solid white;
28+
border: solid $original-white;
2629
border-width: 0 3px 3px 0;
2730
-webkit-transform: rotate(45deg);
2831
-ms-transform: rotate(45deg);

‎src/font_icon/FontIcon.js

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/font_icon/theme.scss

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/globals/_theme.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
$primary-color: #0073a6;
2+
3+
$original-white: #fff;
4+
$original-black: #000;
5+
6+
$secondary-violet: #007bff;
7+
$secondary-grey: #6c757d;
8+
$secondary-green: #28a745;
9+
$secondary-red: #dc3545;
10+
$secondary-yellow: #ffc107;
11+
$secondary-blue: #17a2b8;
12+
$secondary-white: #f8f9fa;
13+
$secondary-black: #343a40;
14+
15+

‎src/index.js

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,46 @@
1-
import Button from './button';
2-
import Card from './card';
3-
import Checkbox from './checkbox';
4-
import CheckboxGroup from './checkboxGroup';
5-
import Toggle from './toggle';
1+
// import Button from './button';
2+
// import Card from './card';
3+
// import Checkbox from './checkbox';
4+
// import CheckboxGroup from './checkboxGroup';
5+
// import Toggle from './toggle';
66

7-
export default {
8-
Button,
9-
Card,
10-
Checkbox,
11-
CheckboxGroup,
12-
Toggle,
13-
};
7+
// export default {
8+
// Button,
9+
// Card,
10+
// Checkbox,
11+
// CheckboxGroup,
12+
// Toggle,
13+
// };
1414

15-
// import React from 'react';
16-
// import ReactDOM from 'react-dom';
17-
// import Toggle from './toggle';
15+
import React from 'react';
16+
import ReactDOM from 'react-dom';
17+
import Toggle from './toggle';
18+
import themes from './theme.scss';
1819

19-
// class ToggleDisplay extends React.Component {
20-
// constructor(props) {
21-
// super(props);
20+
class ToggleDisplay extends React.Component {
21+
constructor(props) {
22+
super(props);
2223

23-
// this.state = {
24-
// toggled: false,
25-
// };
26-
// }
24+
this.state = {
25+
toggled: false,
26+
};
27+
}
2728

28-
// handleToggle = () => {
29-
// this.setState({
30-
// toggled: !this.state.toggled,
31-
// });
32-
// }
29+
handleToggle = () => {
30+
this.setState({
31+
toggled: !this.state.toggled,
32+
});
33+
}
3334

34-
// render() {
35-
// return (
36-
// <Toggle
37-
// toggled={this.state.toggled}
38-
// onClick={this.handleToggle}
39-
// />
40-
// );
41-
// }
42-
// }
35+
render() {
36+
return (
37+
<Toggle
38+
toggled={this.state.toggled}
39+
onClick={this.handleToggle}
40+
theme={themes}
41+
/>
42+
);
43+
}
44+
}
4345

44-
// ReactDOM.render(<ToggleDisplay />, document.getElementById('index'));
46+
ReactDOM.render(<ToggleDisplay />, document.getElementById('index'));

0 commit comments

Comments
 (0)