/
index.js
102 lines (90 loc) · 2.45 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import {
colorsBlue,
colorsWhite,
colorsBackgroundDark,
colorsBackgroundLight,
colorsTextIcon,
layout,
type
} from '@pluralsight/ps-design-system-core'
import { names as themeNames } from '@pluralsight/ps-design-system-theme'
export default {
'.psds-radio-group': {
'&:focus': { outline: 'none' }
},
'.psds-radio-group--disabled': {
opacity: '0.5'
},
'.psds-radio-group__button-container': {
padding: `${layout.spacingXXSmall} 0`
},
'.psds-radio-group__label': {
color: colorsTextIcon.highOnDark,
fontSize: type.fontSizeXSmall,
fontWeight: type.fontWeightMedium,
marginBottom: layout.spacingXXSmall
},
[`.psds-radio-group__label.psds-theme--${themeNames.light}`]: {
color: colorsTextIcon.highOnLight
},
'.psds-radio-group__sub-label': {
color: colorsTextIcon.lowOnDark,
fontSize: type.fontSizeXSmall,
fontWeight: type.fontWeightBook,
marginTop: layout.spacingXXSmall
},
[`.psds-radio-group__sub-label.psds-theme--${themeNames.light}`]: {
color: colorsTextIcon.lowOnLight
},
'.psds-radio-button': {
display: 'flex',
alignItems: 'center',
padding: `${layout.spacingXXSmall} 0`,
cursor: 'pointer'
},
'.psds-radio-button__halo': {
transform: 'translateY(3px)'
},
'.psds-radio-button__circle-outer': {
width: '16px',
marginRight: layout.spacingSmall
},
'.psds-radio-button__circle': {
position: 'relative',
display: 'inline-block',
height: '16px',
width: '16px',
borderRadius: '50%',
border: `2px solid ${colorsTextIcon.lowOnDark}`,
background: colorsBackgroundDark[1],
'&:focus': { outline: 'none' }
},
[`.psds-radio-button__circle.psds-theme--${themeNames.light}`]: {
background: colorsBackgroundLight[3],
borderColor: colorsTextIcon.lowOnLight
},
'.psds-radio-button__circle--checked': {
borderColor: colorsBlue.base,
background: colorsBlue.base
},
'.psds-radio-button__circle-inner': {
display: 'block',
height: 'calc(100% - 6px)',
width: 'calc(100% - 6px)',
margin: '3px',
borderRadius: '50%',
background: colorsWhite
},
'.psds-radio-button__input': {
display: 'none'
},
'.psds-radio-button__label': {
color: colorsTextIcon.highOnDark,
fontSize: type.fontSizeSmall,
lineHeight: type.lineHeightStandard,
fontWeight: type.fontWeightBook
},
[`.psds-radio-button__label.psds-theme--${themeNames.light}`]: {
color: colorsTextIcon.highOnLight
}
}