Skip to content

Commit 2da2ccb

Browse files
aehmtaehmt
committed
removing global styling
1 parent f7c46be commit 2da2ccb

File tree

7 files changed

+64
-66
lines changed

7 files changed

+64
-66
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@
3535
"lottie-web": "^5.5.5",
3636
"node-sass": "^4.12.0",
3737
"prop-types": "^15.7.2",
38-
"react": "^16.8.2",
38+
"react": "^16.8.6",
3939
"react-animate-height": "^2.0.15",
4040
"react-apollo": "^2.5.8",
4141
"react-day-picker": "^7.3.0",
4242
"react-detect-offline": "^2.3.0",
43-
"react-dom": "^16.8.2",
43+
"react-dom": "^16.8.6",
4444
"react-if": "^3.4.0",
4545
"react-loadable": "^5.5.0"
4646
},

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<!-- Global site tag (gtag.js) - Google Analytics -->
4242

4343
</head>
44-
<body>
44+
<body class="hypertrack-react-views-body">
4545
<noscript>You need to enable JavaScript to run this app.</noscript>
4646
<div id="root"></div>
4747
<!--

‎sample/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"antd": "^3.21.4",
77
"gh-pages": "^2.1.1",
88
"hypertrack-views-react": "^1.1.26",
9-
"react": "^16.8.2",
10-
"react-dom": "^16.8.2",
9+
"react": "^16.8.6",
10+
"react-dom": "^16.8.6",
1111
"react-scripts": "3.0.1",
1212
"react-syntax-highlighter": "^11.0.2"
1313
},

‎src/pages/AccountLiveLocation/components/DeviceList.module.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -94,18 +94,6 @@
9494
}
9595
}
9696

97-
:global(.accordion_item_header) {
98-
@include setFont(s, regular);
99-
padding: $space $space--double;
100-
display: flex;
101-
align-items: center;
102-
// border-top: 1px solid setColor(grey, light);
103-
cursor: pointer;
104-
transition: 0.4s all ease-in-out;
105-
&:hover {
106-
background-color: setColor(grey, light);
107-
}
108-
}
10997
.searchAndFilterContainer {
11098
position: relative;
11199
display: flex;

‎src/pages/Generic/Accordion/accordion.module.scss‎

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,48 @@
11
@import './../../../theme/movement.scss';
22

3-
:global(.accordion .accordion_item .accordion_item_body) {
4-
height: 0;
5-
transition: max-height 0.4s linear;
6-
overflow: hidden;
3+
.accordion {
4+
.accordion_item {
5+
.accordion_item_body {
6+
height: 0;
7+
transition: max-height 0.4s linear;
8+
overflow: hidden;
9+
}
10+
}
711
}
812

9-
:global(.accordion .accordion_item.active .accordion_item_body) {
10-
height: auto;
13+
.accordion {
14+
15+
height: auto;
16+
.accordion_item.active {
17+
height: auto;
18+
.accordion_item_body {
19+
height: auto;
20+
}
21+
}
1122
}
1223

13-
:global(.accordion
14-
.accordion_item
15-
.accordion_item_header
16-
.accordion_item_title) {
17-
flex: auto;
24+
.accordion {
25+
.accordion_item {
26+
.accordion_item_header {
27+
@include setFont(s, regular);
28+
padding: $space $space--double;
29+
display: flex;
30+
align-items: center;
31+
// border-top: 1px solid setColor(grey, light);
32+
cursor: pointer;
33+
transition: 0.4s all ease-in-out;
34+
&:hover {
35+
background-color: setColor(grey, light);
36+
}
37+
.accordion_item_title {
38+
flex: auto;
39+
40+
}
41+
}
42+
}
1843
}
1944

20-
:global(.accordion .accordion_item .accordion_item_status) {
45+
.accordion_item_status {
2146
height: $space;
2247
}
2348

‎src/pages/Generic/Accordion/index.js‎

Lines changed: 21 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styles from './accordion.module.scss'
1+
import styles from './Accordion.module.scss'
22
import Icon from '../Icon'
33
import React, { useEffect } from 'react'
44
import classNames from 'classnames'
@@ -7,27 +7,24 @@ const Accordion = props => {
77
const [activeItems, setActiveItem] = React.useState({})
88
const [firstRender, setFirstRender] = React.useState(true)
99

10-
useEffect(
11-
() => {
12-
if (props.children.length && firstRender) {
13-
let items = {}
14-
props.children.forEach(child => {
15-
items[child.props.listName] = child.props.active
16-
})
17-
setActiveItem(items)
18-
setFirstRender(false)
19-
}
20-
},
21-
[firstRender, props.children]
22-
)
10+
useEffect(() => {
11+
if (props.children.length && firstRender) {
12+
let items = {}
13+
props.children.forEach(child => {
14+
items[child.props.listName] = child.props.active
15+
})
16+
setActiveItem(items)
17+
setFirstRender(false)
18+
}
19+
}, [firstRender, props.children])
2320

2421
const onClick = (event, listName) => {
2522
setActiveItem({ ...activeItems, [listName]: !activeItems[listName] })
2623
event.preventDefault()
2724
}
2825

2926
return (
30-
<div className={classNames('accordion', styles.accordion)}>
27+
<div className={styles.accordion}>
3128
{props.children.map((child, index) => (
3229
<AccordionItem
3330
title={child.props.title}
@@ -46,35 +43,23 @@ const Accordion = props => {
4643
const AccordionItem = props => {
4744
const { title, active, onClick, listName } = props
4845

49-
let classes = classNames(
50-
styles.accordion_item,
51-
'accordion_item',
52-
active ? 'active' : ''
53-
)
54-
5546
const arrowIcon = active ? 'caret-down' : 'back-left'
5647
return (
57-
<div className={classes}>
48+
<div
49+
className={classNames(styles.accordion_item, {
50+
[styles.active]: active
51+
})}
52+
>
5853
<div
5954
onClick={event => {
6055
onClick(event, listName)
6156
}}
62-
className={classNames(
63-
'accordion_item_header',
64-
styles.accordion_item_header
65-
)}
66-
>
67-
<span className="accordion_item_title">{title}</span>
68-
<Icon variant={arrowIcon} className="accordion_item_status" />
69-
</div>
70-
<div
71-
className={classNames(
72-
'accordion_item_body',
73-
styles.accordion_item_body
74-
)}
57+
className={styles.accordion_item_header}
7558
>
76-
{props.children}
59+
<span className={styles.accordion_item_title}>{title}</span>
60+
<Icon variant={arrowIcon} className={styles.accordion_item_status} />
7761
</div>
62+
<div className={styles.accordion_item_body}>{props.children}</div>
7863
</div>
7964
)
8065
}

‎src/theme/movement.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ $font-families: (
8484
line-height: $line-height;
8585
}
8686

87-
body {
87+
.hypertrack-react-views-body {
8888
font-size: $base-font-size;
8989
margin: 0;
9090
@include setFont(n);

0 commit comments

Comments
 (0)