Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit cdd338c

Browse files
mydearxymmydearxym
committed
global style wrapper for dierent usage
1 parent 8678a6e commit cdd338c

File tree

4 files changed

+100
-90
lines changed

4 files changed

+100
-90
lines changed

‎containers/ThemeWrapper/AntOverWrite.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import styled from 'styled-components'
2+
import { theme } from '../../utils/themes'
3+
4+
const AntOverWrite = styled.div`
5+
.ant-btn-background-ghost.ant-btn-primary {
6+
color: ${theme('button.primary')};
7+
border-color: ${theme('button.primary')};
8+
}
9+
10+
.ant-btn:focus,
11+
.ant-btn:hover {
12+
background-color: ${theme('button.hoverBg')};
13+
}
14+
.ant-btn:active {
15+
background-color: ${theme('button.activeBg')};
16+
}
17+
18+
.ant-btn-primary {
19+
color: ${theme('button.fg')};
20+
background-color: ${theme('button.primary')};
21+
border-color: ${theme('button.primary')};
22+
}
23+
24+
.ant-btn-clicked:after {
25+
border: ${theme('button.clicked')};
26+
}
27+
28+
.ant-tabs-bar {
29+
border-bottom: ${theme('taber.baseline')};
30+
}
31+
.ant-tabs-ink-bar {
32+
background-color: ${theme('taber.bottom_bar')};
33+
}
34+
.ant-tabs-nav .ant-tabs-tab {
35+
color: ${theme('taber.normalText')};
36+
}
37+
.ant-tabs-nav .ant-tabs-tab-active {
38+
color: ${theme('taber.activeText')};
39+
font-weight: bold;
40+
}
41+
`
42+
43+
export default AntOverWrite

‎containers/ThemeWrapper/BasicOverWrite.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import styled from 'styled-components'
2+
import { theme } from '../../utils/themes'
3+
4+
const BasicOverWrite = styled.div`
5+
*::-moz-selection {
6+
background-color: ${theme('selection_bg')};
7+
}
8+
9+
*::selection {
10+
background-color: ${theme('selection_bg')};
11+
}
12+
13+
a:hover {
14+
color: ${theme('a.hover')};
15+
}
16+
a:active {
17+
color: ${theme('a.active')};
18+
}
19+
`
20+
21+
export default BasicOverWrite
22+
23+
/*
24+
*::selection {
25+
background-color: ${theme('selection_bg')};
26+
}
27+
28+
::-moz-selection {
29+
background-color: ${theme('selection_bg')};
30+
}
31+
32+
::-o-selection {
33+
background-color: ${theme('selection_bg')};
34+
}
35+
36+
::-ms-selection {
37+
background-color: ${theme('selection_bg')};
38+
}
39+
40+
*::-webkit-selection {
41+
background-color: ${theme('selection_bg')};
42+
}
43+
*/

‎utils/global_styles.js renamed to ‎containers/ThemeWrapper/NormalizeStyle.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*
55
*/
66

7-
const globalStyles = `
7+
const NormalizeStyle = `
88
html {
99
line-height: 1.15; /* 1 */
1010
-ms-text-size-adjust: 100%; /* 2 */
@@ -182,4 +182,4 @@ const globalStyles = `
182182
}
183183
`
184184

185-
export default globalStyles
185+
export default NormalizeStyle

‎containers/ThemeWrapper/index.js

Lines changed: 12 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -6,100 +6,24 @@
66

77
import React from 'react'
88
import { inject, observer } from 'mobx-react'
9-
import styled, { ThemeProvider } from 'styled-components'
10-
11-
// import { selection } from 'polished'
9+
import { ThemeProvider } from 'styled-components'
1210

1311
import { storeSelector } from '../../utils/functions'
14-
import { theme } from '../../utils/themes'
15-
import globalStyles from '../../utils/global_styles'
16-
// import observer from '../../utils/mobx_utils'
17-
18-
/*
19-
*::selection {
20-
background-color: ${theme('selection_bg')};
21-
}
22-
23-
::-moz-selection {
24-
background-color: ${theme('selection_bg')};
25-
}
26-
27-
::-o-selection {
28-
background-color: ${theme('selection_bg')};
29-
}
30-
31-
::-ms-selection {
32-
background-color: ${theme('selection_bg')};
33-
}
34-
35-
*::-webkit-selection {
36-
background-color: ${theme('selection_bg')};
37-
}
38-
*/
39-
40-
// ${selection({ backgroundColor: 'tomato' }, '*')};
41-
42-
const Container = styled.div`
43-
*::-moz-selection {
44-
background-color: ${theme('selection_bg')};
45-
}
46-
47-
*::selection {
48-
background-color: ${theme('selection_bg')};
49-
}
50-
51-
.ant-btn-background-ghost.ant-btn-primary {
52-
color: ${theme('button.primary')};
53-
border-color: ${theme('button.primary')};
54-
}
55-
56-
a:hover {
57-
color: ${theme('a.hover')};
58-
}
59-
a:active {
60-
color: ${theme('a.active')};
61-
}
62-
63-
.ant-btn:focus,
64-
.ant-btn:hover {
65-
background-color: ${theme('button.hoverBg')};
66-
}
67-
.ant-btn:active {
68-
background-color: ${theme('button.activeBg')};
69-
}
70-
71-
.ant-btn-primary {
72-
color: ${theme('button.fg')};
73-
background-color: ${theme('button.primary')};
74-
border-color: ${theme('button.primary')};
75-
}
7612

77-
.ant-btn-clicked:after {
78-
border: ${theme('button.clicked')};
79-
}
13+
import AntOverWrite from './AntOverWrite'
14+
import BasicOverWrite from './BasicOverWrite'
15+
import NormalizeStyle from './NormalizeStyle'
8016

81-
.ant-tabs-bar {
82-
border-bottom: ${theme('taber.baseline')};
83-
}
84-
.ant-tabs-ink-bar {
85-
background-color: ${theme('taber.bottom_bar')};
86-
}
87-
.ant-tabs-nav .ant-tabs-tab {
88-
color: ${theme('taber.normalText')};
89-
}
90-
.ant-tabs-nav .ant-tabs-tab-active {
91-
color: ${theme('taber.activeText')};
92-
font-weight: bold;
93-
}
94-
`
9517
const ThemeObserver = ({ children, theme }) => (
9618
<ThemeProvider theme={theme.themeData}>
97-
<Container>
98-
<style jsx global>
99-
{globalStyles}
100-
</style>
101-
<div>{children}</div>
102-
</Container>
19+
<BasicOverWrite>
20+
<AntOverWrite>
21+
<style jsx global>
22+
{NormalizeStyle}
23+
</style>
24+
<div>{children}</div>
25+
</AntOverWrite>
26+
</BasicOverWrite>
10327
</ThemeProvider>
10428
)
10529

0 commit comments

Comments
 (0)