@selfcommunity/react-theme-default 0.2.0-alpha.20 → 0.2.0-alpha.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/MuiAppBar.js +4 -3
- package/lib/cjs/components/SCBottomNavigation.js +5 -4
- package/lib/cjs/components/SCNavigationToolbar.d.ts +3 -1
- package/lib/cjs/components/SCNavigationToolbar.js +68 -62
- package/lib/cjs/components/SCSearchAutocomplete.d.ts +4 -0
- package/lib/cjs/components/SCSearchAutocomplete.js +29 -21
- package/lib/cjs/index.d.ts +7 -1
- package/lib/esm/components/MuiAppBar.js +4 -3
- package/lib/esm/components/SCBottomNavigation.js +5 -4
- package/lib/esm/components/SCNavigationToolbar.d.ts +3 -1
- package/lib/esm/components/SCNavigationToolbar.js +68 -62
- package/lib/esm/components/SCSearchAutocomplete.d.ts +4 -0
- package/lib/esm/components/SCSearchAutocomplete.js +29 -21
- package/lib/esm/index.d.ts +7 -1
- package/lib/umd/react-theme-default.js +2 -2
- package/package.json +4 -4
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const styles_1 = require("@mui/material/styles");
|
|
3
4
|
const Component = {
|
|
4
5
|
styleOverrides: {
|
|
5
6
|
root: ({ theme }) => {
|
|
6
|
-
var _a, _b;
|
|
7
|
+
var _a, _b, _c, _d;
|
|
7
8
|
return ({
|
|
8
|
-
color: theme.palette.text.primary,
|
|
9
|
-
backgroundColor: (
|
|
9
|
+
color: (0, styles_1.getContrastRatio)((_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main, '#fff') > 4.5 ? '#fff' : theme.palette.text.primary,
|
|
10
|
+
backgroundColor: (_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.navbar) === null || _d === void 0 ? void 0 : _d.main
|
|
10
11
|
});
|
|
11
12
|
}
|
|
12
13
|
}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const styles_1 = require("@mui/material/styles");
|
|
3
4
|
const Component = {
|
|
4
5
|
styleOverrides: {
|
|
5
6
|
root: ({ theme }) => {
|
|
6
|
-
var _a, _b;
|
|
7
|
+
var _a, _b, _c, _d;
|
|
7
8
|
return ({
|
|
8
9
|
backgroundColor: (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main,
|
|
9
10
|
'& .SCBottomNavigation-action': {
|
|
10
11
|
fontSize: '1.57rem',
|
|
11
|
-
color: theme.palette.primary.main,
|
|
12
|
+
color: (0, styles_1.getContrastRatio)((_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.navbar) === null || _d === void 0 ? void 0 : _d.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main,
|
|
12
13
|
borderTop: `1px solid transparent`,
|
|
13
14
|
minWidth: 56,
|
|
14
15
|
'&.Mui-selected, &:hover': {
|
|
@@ -19,8 +20,8 @@ const Component = {
|
|
|
19
20
|
'&.Mui-selected, &:hover': {
|
|
20
21
|
color: theme.palette.secondary.main,
|
|
21
22
|
borderTop: '0 none'
|
|
22
|
-
}
|
|
23
|
-
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
24
25
|
},
|
|
25
26
|
'&.SCBottomNavigation-ios': {
|
|
26
27
|
paddingBottom: '15px'
|
|
@@ -27,7 +27,6 @@ declare const Component: {
|
|
|
27
27
|
paddingRight: any;
|
|
28
28
|
paddingBottom: number;
|
|
29
29
|
margin: any;
|
|
30
|
-
color: any;
|
|
31
30
|
borderRadius: number;
|
|
32
31
|
borderBottom: string;
|
|
33
32
|
'&.SCNavigationToolbar-active, &:hover': {
|
|
@@ -67,6 +66,9 @@ declare const Component: {
|
|
|
67
66
|
'& .SCNavigationToolbar-settings': {
|
|
68
67
|
marginLeft: number;
|
|
69
68
|
};
|
|
69
|
+
'& .SCNavigationToolbar-composer:hover': {
|
|
70
|
+
color: any;
|
|
71
|
+
};
|
|
70
72
|
'& .MuiIconButton-root': {
|
|
71
73
|
color: any;
|
|
72
74
|
};
|
|
@@ -1,78 +1,84 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const styles_1 = require("@mui/material/styles");
|
|
3
4
|
const Component = {
|
|
4
5
|
styleOverrides: {
|
|
5
|
-
root: ({ theme }) =>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
'&
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
6
|
+
root: ({ theme }) => {
|
|
7
|
+
var _a, _b;
|
|
8
|
+
return ({
|
|
9
|
+
padding: theme.spacing(0, 1),
|
|
10
|
+
'& .SCNavigationToolbar-logo, & .SCNavigationToolbar-custom-item': {
|
|
11
|
+
marginRight: theme.spacing(2),
|
|
12
|
+
'& img': {
|
|
13
|
+
verticalAlign: 'middle',
|
|
14
|
+
maxHeight: theme.mixins.toolbar.minHeight - 20
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
'& .SCNavigationToolbar-navigation': {
|
|
18
|
+
flexGrow: 1,
|
|
19
|
+
textAlign: 'center',
|
|
20
|
+
alignSelf: 'end',
|
|
21
|
+
'& .SCNavigationToolbar-home, & .SCNavigationToolbar-explore, & .SCNavigationToolbar-groups, & .SCNavigationToolbar-events': {
|
|
22
|
+
paddingTop: 12,
|
|
23
|
+
paddingLeft: theme.spacing(1),
|
|
24
|
+
paddingRight: theme.spacing(1),
|
|
25
|
+
paddingBottom: 11,
|
|
26
|
+
margin: theme.spacing(0, 1),
|
|
27
|
+
borderRadius: 0,
|
|
28
|
+
borderBottom: `2px solid transparent`,
|
|
29
|
+
'&.SCNavigationToolbar-active, &:hover': {
|
|
30
|
+
color: theme.palette.secondary.main,
|
|
31
|
+
borderBottom: `2px solid ${theme.palette.secondary.main}`
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
'& .SCNavigationToolbar-search': {
|
|
36
|
+
flexGrow: 1,
|
|
37
|
+
textAlign: 'right',
|
|
38
|
+
marginRight: theme.spacing(1.5),
|
|
39
|
+
'& .MuiFormControl-root': {
|
|
40
|
+
width: 190,
|
|
41
|
+
[theme.breakpoints.up('lg')]: {
|
|
42
|
+
width: 300
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
'& .SCNavigationToolbar-profile, & .SCNavigationToolbar-notification, & .SCNavigationToolbar-messages': {
|
|
47
|
+
margin: theme.spacing(0, 0.5)
|
|
48
|
+
},
|
|
49
|
+
'& .SCNavigationToolbar-profile .MuiAvatar-root': {
|
|
50
|
+
width: theme.selfcommunity.user.avatar.sizeMedium,
|
|
51
|
+
height: theme.selfcommunity.user.avatar.sizeMedium
|
|
52
|
+
},
|
|
53
|
+
'& .SCNavigationToolbar-notification, & .SCNavigationToolbar-messages': {
|
|
19
54
|
paddingTop: 12,
|
|
20
|
-
|
|
21
|
-
paddingRight: theme.spacing(1),
|
|
22
|
-
paddingBottom: 11,
|
|
23
|
-
margin: theme.spacing(0, 1),
|
|
24
|
-
color: theme.palette.primary.main,
|
|
55
|
+
paddingBottom: 9,
|
|
25
56
|
borderRadius: 0,
|
|
26
57
|
borderBottom: `2px solid transparent`,
|
|
27
58
|
'&.SCNavigationToolbar-active, &:hover': {
|
|
28
59
|
color: theme.palette.secondary.main,
|
|
29
60
|
borderBottom: `2px solid ${theme.palette.secondary.main}`
|
|
30
61
|
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
'& .SCNavigationToolbar-profile .MuiAvatar-root': {
|
|
48
|
-
width: theme.selfcommunity.user.avatar.sizeMedium,
|
|
49
|
-
height: theme.selfcommunity.user.avatar.sizeMedium
|
|
50
|
-
},
|
|
51
|
-
'& .SCNavigationToolbar-notification, & .SCNavigationToolbar-messages': {
|
|
52
|
-
paddingTop: 12,
|
|
53
|
-
paddingBottom: 9,
|
|
54
|
-
borderRadius: 0,
|
|
55
|
-
borderBottom: `2px solid transparent`,
|
|
56
|
-
'&.SCNavigationToolbar-active, &:hover': {
|
|
57
|
-
color: theme.palette.secondary.main,
|
|
58
|
-
borderBottom: `2px solid ${theme.palette.secondary.main}`
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
'& .SCNavigationToolbar-settings': {
|
|
62
|
-
marginLeft: 0
|
|
63
|
-
},
|
|
64
|
-
'& .MuiIconButton-root': {
|
|
65
|
-
color: theme.palette.primary.main
|
|
66
|
-
},
|
|
67
|
-
[theme.breakpoints.up(950)]: {
|
|
68
|
-
padding: theme.spacing(0, 2),
|
|
69
|
-
'& .SCNavigationToolbar-navigation': {
|
|
70
|
-
'& .SCNavigationToolbar-home, & .SCNavigationToolbar-explore': {
|
|
71
|
-
margin: theme.spacing(0, 2)
|
|
62
|
+
},
|
|
63
|
+
'& .SCNavigationToolbar-settings': {
|
|
64
|
+
marginLeft: 0
|
|
65
|
+
},
|
|
66
|
+
'& .SCNavigationToolbar-composer:hover': {
|
|
67
|
+
color: theme.palette.secondary.main
|
|
68
|
+
},
|
|
69
|
+
'& .MuiIconButton-root': {
|
|
70
|
+
color: (0, styles_1.getContrastRatio)((_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main
|
|
71
|
+
},
|
|
72
|
+
[theme.breakpoints.up(950)]: {
|
|
73
|
+
padding: theme.spacing(0, 2),
|
|
74
|
+
'& .SCNavigationToolbar-navigation': {
|
|
75
|
+
'& .SCNavigationToolbar-home, & .SCNavigationToolbar-explore': {
|
|
76
|
+
margin: theme.spacing(0, 2)
|
|
77
|
+
}
|
|
72
78
|
}
|
|
73
79
|
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
80
|
+
});
|
|
81
|
+
},
|
|
76
82
|
skeletonRoot: ({ theme }) => ({
|
|
77
83
|
'& .SCNavigationToolbar-logo': {
|
|
78
84
|
width: 100,
|
|
@@ -1,31 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const system_1 = require("@mui/system");
|
|
4
|
+
const styles_1 = require("@mui/material/styles");
|
|
4
5
|
const Component = {
|
|
5
6
|
styleOverrides: {
|
|
6
|
-
root: ({ theme }) =>
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
borderColor: (0, system_1.alpha)(theme.palette.primary.main, theme.palette.action.disabledOpacity)
|
|
17
|
-
},
|
|
18
|
-
'&:hover fieldset': {
|
|
19
|
-
borderColor: theme.palette.primary.main
|
|
20
|
-
},
|
|
21
|
-
'&.Mui-focused fieldset': {
|
|
22
|
-
borderColor: theme.palette.secondary.main
|
|
7
|
+
root: ({ theme }) => {
|
|
8
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
9
|
+
return ({
|
|
10
|
+
'& .SCSearchAutocomplete-input': {
|
|
11
|
+
padding: theme.spacing(0, 2),
|
|
12
|
+
borderRadius: theme.shape.borderRadius,
|
|
13
|
+
'& .MuiAutocomplete-input': {
|
|
14
|
+
padding: theme.spacing(0.5, 1),
|
|
15
|
+
color: (0, styles_1.getContrastRatio)((_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main
|
|
16
|
+
}
|
|
23
17
|
},
|
|
24
|
-
'
|
|
25
|
-
|
|
18
|
+
'& .MuiInputBase-root': {
|
|
19
|
+
'& .MuiIcon-root': {
|
|
20
|
+
color: (0, styles_1.getContrastRatio)((_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.navbar) === null || _d === void 0 ? void 0 : _d.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main
|
|
21
|
+
},
|
|
22
|
+
'& fieldset': {
|
|
23
|
+
borderColor: (0, system_1.alpha)((0, styles_1.getContrastRatio)((_f = (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.navbar) === null || _f === void 0 ? void 0 : _f.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main, theme.palette.action.disabledOpacity)
|
|
24
|
+
},
|
|
25
|
+
'&:hover fieldset': {
|
|
26
|
+
borderColor: (0, styles_1.getContrastRatio)((_h = (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.navbar) === null || _h === void 0 ? void 0 : _h.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main
|
|
27
|
+
},
|
|
28
|
+
'&.Mui-focused fieldset': {
|
|
29
|
+
borderColor: (0, styles_1.getContrastRatio)((_k = (_j = theme.palette) === null || _j === void 0 ? void 0 : _j.navbar) === null || _k === void 0 ? void 0 : _k.main, '#fff') > 4.5 ? '#fff' : theme.palette.secondary.main
|
|
30
|
+
},
|
|
31
|
+
'&.Mui-focused .SCSearchAutocomplete-icon': {
|
|
32
|
+
color: (0, styles_1.getContrastRatio)((_m = (_l = theme.palette) === null || _l === void 0 ? void 0 : _l.navbar) === null || _m === void 0 ? void 0 : _m.main, '#fff') > 4.5 ? '#fff' : theme.palette.secondary.main
|
|
33
|
+
}
|
|
26
34
|
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
35
|
+
});
|
|
36
|
+
}
|
|
29
37
|
}
|
|
30
38
|
};
|
|
31
39
|
exports.default = Component;
|
package/lib/cjs/index.d.ts
CHANGED
|
@@ -4392,7 +4392,6 @@ declare const theme: {
|
|
|
4392
4392
|
paddingRight: any;
|
|
4393
4393
|
paddingBottom: number;
|
|
4394
4394
|
margin: any;
|
|
4395
|
-
color: any;
|
|
4396
4395
|
borderRadius: number;
|
|
4397
4396
|
borderBottom: string;
|
|
4398
4397
|
'&.SCNavigationToolbar-active, &:hover': {
|
|
@@ -4432,6 +4431,9 @@ declare const theme: {
|
|
|
4432
4431
|
'& .SCNavigationToolbar-settings': {
|
|
4433
4432
|
marginLeft: number;
|
|
4434
4433
|
};
|
|
4434
|
+
'& .SCNavigationToolbar-composer:hover': {
|
|
4435
|
+
color: any;
|
|
4436
|
+
};
|
|
4435
4437
|
'& .MuiIconButton-root': {
|
|
4436
4438
|
color: any;
|
|
4437
4439
|
};
|
|
@@ -6221,9 +6223,13 @@ declare const theme: {
|
|
|
6221
6223
|
borderRadius: any;
|
|
6222
6224
|
'& .MuiAutocomplete-input': {
|
|
6223
6225
|
padding: any;
|
|
6226
|
+
color: any;
|
|
6224
6227
|
};
|
|
6225
6228
|
};
|
|
6226
6229
|
'& .MuiInputBase-root': {
|
|
6230
|
+
'& .MuiIcon-root': {
|
|
6231
|
+
color: any;
|
|
6232
|
+
};
|
|
6227
6233
|
'& fieldset': {
|
|
6228
6234
|
borderColor: string;
|
|
6229
6235
|
};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { getContrastRatio } from '@mui/material/styles';
|
|
1
2
|
const Component = {
|
|
2
3
|
styleOverrides: {
|
|
3
4
|
root: ({ theme }) => {
|
|
4
|
-
var _a, _b;
|
|
5
|
+
var _a, _b, _c, _d;
|
|
5
6
|
return ({
|
|
6
|
-
color: theme.palette.text.primary,
|
|
7
|
-
backgroundColor: (
|
|
7
|
+
color: getContrastRatio((_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main, '#fff') > 4.5 ? '#fff' : theme.palette.text.primary,
|
|
8
|
+
backgroundColor: (_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.navbar) === null || _d === void 0 ? void 0 : _d.main
|
|
8
9
|
});
|
|
9
10
|
}
|
|
10
11
|
}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import { getContrastRatio } from '@mui/material/styles';
|
|
1
2
|
const Component = {
|
|
2
3
|
styleOverrides: {
|
|
3
4
|
root: ({ theme }) => {
|
|
4
|
-
var _a, _b;
|
|
5
|
+
var _a, _b, _c, _d;
|
|
5
6
|
return ({
|
|
6
7
|
backgroundColor: (_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main,
|
|
7
8
|
'& .SCBottomNavigation-action': {
|
|
8
9
|
fontSize: '1.57rem',
|
|
9
|
-
color: theme.palette.primary.main,
|
|
10
|
+
color: getContrastRatio((_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.navbar) === null || _d === void 0 ? void 0 : _d.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main,
|
|
10
11
|
borderTop: `1px solid transparent`,
|
|
11
12
|
minWidth: 56,
|
|
12
13
|
'&.Mui-selected, &:hover': {
|
|
@@ -17,8 +18,8 @@ const Component = {
|
|
|
17
18
|
'&.Mui-selected, &:hover': {
|
|
18
19
|
color: theme.palette.secondary.main,
|
|
19
20
|
borderTop: '0 none'
|
|
20
|
-
}
|
|
21
|
-
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
22
23
|
},
|
|
23
24
|
'&.SCBottomNavigation-ios': {
|
|
24
25
|
paddingBottom: '15px'
|
|
@@ -27,7 +27,6 @@ declare const Component: {
|
|
|
27
27
|
paddingRight: any;
|
|
28
28
|
paddingBottom: number;
|
|
29
29
|
margin: any;
|
|
30
|
-
color: any;
|
|
31
30
|
borderRadius: number;
|
|
32
31
|
borderBottom: string;
|
|
33
32
|
'&.SCNavigationToolbar-active, &:hover': {
|
|
@@ -67,6 +66,9 @@ declare const Component: {
|
|
|
67
66
|
'& .SCNavigationToolbar-settings': {
|
|
68
67
|
marginLeft: number;
|
|
69
68
|
};
|
|
69
|
+
'& .SCNavigationToolbar-composer:hover': {
|
|
70
|
+
color: any;
|
|
71
|
+
};
|
|
70
72
|
'& .MuiIconButton-root': {
|
|
71
73
|
color: any;
|
|
72
74
|
};
|
|
@@ -1,76 +1,82 @@
|
|
|
1
|
+
import { getContrastRatio } from '@mui/material/styles';
|
|
1
2
|
const Component = {
|
|
2
3
|
styleOverrides: {
|
|
3
|
-
root: ({ theme }) =>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
'&
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
4
|
+
root: ({ theme }) => {
|
|
5
|
+
var _a, _b;
|
|
6
|
+
return ({
|
|
7
|
+
padding: theme.spacing(0, 1),
|
|
8
|
+
'& .SCNavigationToolbar-logo, & .SCNavigationToolbar-custom-item': {
|
|
9
|
+
marginRight: theme.spacing(2),
|
|
10
|
+
'& img': {
|
|
11
|
+
verticalAlign: 'middle',
|
|
12
|
+
maxHeight: theme.mixins.toolbar.minHeight - 20
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
'& .SCNavigationToolbar-navigation': {
|
|
16
|
+
flexGrow: 1,
|
|
17
|
+
textAlign: 'center',
|
|
18
|
+
alignSelf: 'end',
|
|
19
|
+
'& .SCNavigationToolbar-home, & .SCNavigationToolbar-explore, & .SCNavigationToolbar-groups, & .SCNavigationToolbar-events': {
|
|
20
|
+
paddingTop: 12,
|
|
21
|
+
paddingLeft: theme.spacing(1),
|
|
22
|
+
paddingRight: theme.spacing(1),
|
|
23
|
+
paddingBottom: 11,
|
|
24
|
+
margin: theme.spacing(0, 1),
|
|
25
|
+
borderRadius: 0,
|
|
26
|
+
borderBottom: `2px solid transparent`,
|
|
27
|
+
'&.SCNavigationToolbar-active, &:hover': {
|
|
28
|
+
color: theme.palette.secondary.main,
|
|
29
|
+
borderBottom: `2px solid ${theme.palette.secondary.main}`
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
'& .SCNavigationToolbar-search': {
|
|
34
|
+
flexGrow: 1,
|
|
35
|
+
textAlign: 'right',
|
|
36
|
+
marginRight: theme.spacing(1.5),
|
|
37
|
+
'& .MuiFormControl-root': {
|
|
38
|
+
width: 190,
|
|
39
|
+
[theme.breakpoints.up('lg')]: {
|
|
40
|
+
width: 300
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
'& .SCNavigationToolbar-profile, & .SCNavigationToolbar-notification, & .SCNavigationToolbar-messages': {
|
|
45
|
+
margin: theme.spacing(0, 0.5)
|
|
46
|
+
},
|
|
47
|
+
'& .SCNavigationToolbar-profile .MuiAvatar-root': {
|
|
48
|
+
width: theme.selfcommunity.user.avatar.sizeMedium,
|
|
49
|
+
height: theme.selfcommunity.user.avatar.sizeMedium
|
|
50
|
+
},
|
|
51
|
+
'& .SCNavigationToolbar-notification, & .SCNavigationToolbar-messages': {
|
|
17
52
|
paddingTop: 12,
|
|
18
|
-
|
|
19
|
-
paddingRight: theme.spacing(1),
|
|
20
|
-
paddingBottom: 11,
|
|
21
|
-
margin: theme.spacing(0, 1),
|
|
22
|
-
color: theme.palette.primary.main,
|
|
53
|
+
paddingBottom: 9,
|
|
23
54
|
borderRadius: 0,
|
|
24
55
|
borderBottom: `2px solid transparent`,
|
|
25
56
|
'&.SCNavigationToolbar-active, &:hover': {
|
|
26
57
|
color: theme.palette.secondary.main,
|
|
27
58
|
borderBottom: `2px solid ${theme.palette.secondary.main}`
|
|
28
59
|
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
'& .SCNavigationToolbar-profile .MuiAvatar-root': {
|
|
46
|
-
width: theme.selfcommunity.user.avatar.sizeMedium,
|
|
47
|
-
height: theme.selfcommunity.user.avatar.sizeMedium
|
|
48
|
-
},
|
|
49
|
-
'& .SCNavigationToolbar-notification, & .SCNavigationToolbar-messages': {
|
|
50
|
-
paddingTop: 12,
|
|
51
|
-
paddingBottom: 9,
|
|
52
|
-
borderRadius: 0,
|
|
53
|
-
borderBottom: `2px solid transparent`,
|
|
54
|
-
'&.SCNavigationToolbar-active, &:hover': {
|
|
55
|
-
color: theme.palette.secondary.main,
|
|
56
|
-
borderBottom: `2px solid ${theme.palette.secondary.main}`
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
'& .SCNavigationToolbar-settings': {
|
|
60
|
-
marginLeft: 0
|
|
61
|
-
},
|
|
62
|
-
'& .MuiIconButton-root': {
|
|
63
|
-
color: theme.palette.primary.main
|
|
64
|
-
},
|
|
65
|
-
[theme.breakpoints.up(950)]: {
|
|
66
|
-
padding: theme.spacing(0, 2),
|
|
67
|
-
'& .SCNavigationToolbar-navigation': {
|
|
68
|
-
'& .SCNavigationToolbar-home, & .SCNavigationToolbar-explore': {
|
|
69
|
-
margin: theme.spacing(0, 2)
|
|
60
|
+
},
|
|
61
|
+
'& .SCNavigationToolbar-settings': {
|
|
62
|
+
marginLeft: 0
|
|
63
|
+
},
|
|
64
|
+
'& .SCNavigationToolbar-composer:hover': {
|
|
65
|
+
color: theme.palette.secondary.main
|
|
66
|
+
},
|
|
67
|
+
'& .MuiIconButton-root': {
|
|
68
|
+
color: getContrastRatio((_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main
|
|
69
|
+
},
|
|
70
|
+
[theme.breakpoints.up(950)]: {
|
|
71
|
+
padding: theme.spacing(0, 2),
|
|
72
|
+
'& .SCNavigationToolbar-navigation': {
|
|
73
|
+
'& .SCNavigationToolbar-home, & .SCNavigationToolbar-explore': {
|
|
74
|
+
margin: theme.spacing(0, 2)
|
|
75
|
+
}
|
|
70
76
|
}
|
|
71
77
|
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
78
|
+
});
|
|
79
|
+
},
|
|
74
80
|
skeletonRoot: ({ theme }) => ({
|
|
75
81
|
'& .SCNavigationToolbar-logo': {
|
|
76
82
|
width: 100,
|
|
@@ -1,29 +1,37 @@
|
|
|
1
1
|
import { alpha } from '@mui/system';
|
|
2
|
+
import { getContrastRatio } from '@mui/material/styles';
|
|
2
3
|
const Component = {
|
|
3
4
|
styleOverrides: {
|
|
4
|
-
root: ({ theme }) =>
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
borderColor: alpha(theme.palette.primary.main, theme.palette.action.disabledOpacity)
|
|
15
|
-
},
|
|
16
|
-
'&:hover fieldset': {
|
|
17
|
-
borderColor: theme.palette.primary.main
|
|
18
|
-
},
|
|
19
|
-
'&.Mui-focused fieldset': {
|
|
20
|
-
borderColor: theme.palette.secondary.main
|
|
5
|
+
root: ({ theme }) => {
|
|
6
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
7
|
+
return ({
|
|
8
|
+
'& .SCSearchAutocomplete-input': {
|
|
9
|
+
padding: theme.spacing(0, 2),
|
|
10
|
+
borderRadius: theme.shape.borderRadius,
|
|
11
|
+
'& .MuiAutocomplete-input': {
|
|
12
|
+
padding: theme.spacing(0.5, 1),
|
|
13
|
+
color: getContrastRatio((_b = (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.navbar) === null || _b === void 0 ? void 0 : _b.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main
|
|
14
|
+
}
|
|
21
15
|
},
|
|
22
|
-
'
|
|
23
|
-
|
|
16
|
+
'& .MuiInputBase-root': {
|
|
17
|
+
'& .MuiIcon-root': {
|
|
18
|
+
color: getContrastRatio((_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.navbar) === null || _d === void 0 ? void 0 : _d.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main
|
|
19
|
+
},
|
|
20
|
+
'& fieldset': {
|
|
21
|
+
borderColor: alpha(getContrastRatio((_f = (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.navbar) === null || _f === void 0 ? void 0 : _f.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main, theme.palette.action.disabledOpacity)
|
|
22
|
+
},
|
|
23
|
+
'&:hover fieldset': {
|
|
24
|
+
borderColor: getContrastRatio((_h = (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.navbar) === null || _h === void 0 ? void 0 : _h.main, '#fff') > 4.5 ? '#fff' : theme.palette.primary.main
|
|
25
|
+
},
|
|
26
|
+
'&.Mui-focused fieldset': {
|
|
27
|
+
borderColor: getContrastRatio((_k = (_j = theme.palette) === null || _j === void 0 ? void 0 : _j.navbar) === null || _k === void 0 ? void 0 : _k.main, '#fff') > 4.5 ? '#fff' : theme.palette.secondary.main
|
|
28
|
+
},
|
|
29
|
+
'&.Mui-focused .SCSearchAutocomplete-icon': {
|
|
30
|
+
color: getContrastRatio((_m = (_l = theme.palette) === null || _l === void 0 ? void 0 : _l.navbar) === null || _m === void 0 ? void 0 : _m.main, '#fff') > 4.5 ? '#fff' : theme.palette.secondary.main
|
|
31
|
+
}
|
|
24
32
|
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
27
35
|
}
|
|
28
36
|
};
|
|
29
37
|
export default Component;
|
package/lib/esm/index.d.ts
CHANGED
|
@@ -4392,7 +4392,6 @@ declare const theme: {
|
|
|
4392
4392
|
paddingRight: any;
|
|
4393
4393
|
paddingBottom: number;
|
|
4394
4394
|
margin: any;
|
|
4395
|
-
color: any;
|
|
4396
4395
|
borderRadius: number;
|
|
4397
4396
|
borderBottom: string;
|
|
4398
4397
|
'&.SCNavigationToolbar-active, &:hover': {
|
|
@@ -4432,6 +4431,9 @@ declare const theme: {
|
|
|
4432
4431
|
'& .SCNavigationToolbar-settings': {
|
|
4433
4432
|
marginLeft: number;
|
|
4434
4433
|
};
|
|
4434
|
+
'& .SCNavigationToolbar-composer:hover': {
|
|
4435
|
+
color: any;
|
|
4436
|
+
};
|
|
4435
4437
|
'& .MuiIconButton-root': {
|
|
4436
4438
|
color: any;
|
|
4437
4439
|
};
|
|
@@ -6221,9 +6223,13 @@ declare const theme: {
|
|
|
6221
6223
|
borderRadius: any;
|
|
6222
6224
|
'& .MuiAutocomplete-input': {
|
|
6223
6225
|
padding: any;
|
|
6226
|
+
color: any;
|
|
6224
6227
|
};
|
|
6225
6228
|
};
|
|
6226
6229
|
'& .MuiInputBase-root': {
|
|
6230
|
+
'& .MuiIcon-root': {
|
|
6231
|
+
color: any;
|
|
6232
|
+
};
|
|
6227
6233
|
'& fieldset': {
|
|
6228
6234
|
borderColor: string;
|
|
6229
6235
|
};
|