@omniumretail/component-library 1.1.67 → 1.1.70
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/dist/bundle.js +1 -1
- package/dist/main.css +1 -1
- package/dist/types/components/CategoryResponse/index.d.ts +1 -1
- package/dist/types/components/Header/Header.data.d.ts +1 -1
- package/dist/types/components/Header/Header.types.d.ts +2 -0
- package/dist/types/components/Header/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/CategoryResponse/CategoryResponse.stories.tsx +6 -0
- package/src/components/CategoryResponse/index.tsx +10 -6
- package/src/components/Header/Header.data.ts +2 -1
- package/src/components/Header/Header.stories.tsx +12 -0
- package/src/components/Header/Header.types.ts +2 -0
- package/src/components/Header/index.tsx +19 -10
- package/src/components/Header/styles.module.scss +26 -10
package/dist/main.css
CHANGED
|
@@ -30,4 +30,4 @@
|
|
|
30
30
|
.nkyL3EtE9Zsnc5VOW43L{display:flex;flex-wrap:wrap;flex-direction:column}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{background-color:rgba(0,0,0,0);border:0px;color:var(--color-blue)}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th:before{display:none}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper{margin-bottom:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-cell{word-break:break-word}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr{cursor:pointer}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:last-child>td{border-bottom:1px solid var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:first-child>td{border-top:1px solid var(--color-blue) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:hover td{border-radius:0 !important;border-bottom-color:var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-space{align-self:flex-end}.nkyL3EtE9Zsnc5VOW43L .ant-select-selection-placeholder{color:var(--color-black)}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:hover,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:hover{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:calc(100% - 200px);margin-left:auto !important}.nkyL3EtE9Zsnc5VOW43L button[type=button].ant-pagination-item-link{margin-top:0 !important}.nkyL3EtE9Zsnc5VOW43L button[type=button]{margin-top:-50px}@media screen and (max-width: 1024px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:8px}}@media screen and (max-width: 767px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-content table{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-content{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-title,.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-header{word-break:break-all}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter{margin-inline-start:0px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-up{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-down{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:unset}}
|
|
31
31
|
.aZEBTQus3Y3MyodeDwkf{display:flex;flex-direction:column;align-items:center;justify-content:center}.cc1pbQlAgw2CmXVml3bs{height:300px;width:400px}.aTf_CXAsyp0tySsoZdD_{display:flex;justify-content:space-between;margin:10px 10px 0px 10px;font-size:20px}.kuu1hf_JTvYD55IW6Nxl{color:#ff4d4f}.N8ODEO3zDbY7gmecjTrp{color:#52c41a}.WIsL9Shu6c0mGJq9qSSz{margin-top:20px;border-radius:4px;overflow:hidden}.WIsL9Shu6c0mGJq9qSSz img{width:100%;height:auto}
|
|
32
32
|
.OJKeuXyOSPIeCCssVum2{display:flex;gap:32px}.jzxszvL7wzCV5nztJL0S{padding:12px}.OGA8oJw8RDyohcRftjmo{width:100%}.y2_7QVPOhjRZlAHCRWKf{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.Smkcs3LGp1uPuQge2GxE{margin-top:16px}Label{margin-bottom:8px}.djarlYFkE9Kb7wUjUnrY{height:36px}
|
|
33
|
-
:root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5
|
|
33
|
+
:root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5}.SF5f_Q_Ggz_4JHUHS2Xa{display:flex;align-items:center;padding:13px 20px;box-sizing:border-box;height:72px}.SF5f_Q_Ggz_4JHUHS2Xa *{box-sizing:border-box}.gSVYvBn1sLbcMsGI32b9{display:flex;flex-grow:1;align-items:flex-end;justify-content:center}.gSVYvBn1sLbcMsGI32b9 img{max-width:196px}.gSVYvBn1sLbcMsGI32b9 .fVSt3bSZBcJGsOdA5nIN{font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--color-black)}.BIBQmS_NwoMw2Ncq5yuN{cursor:pointer;padding:4px 4px 4px 0;font-size:20px}.ZinSgUtysxITkbGRKdux{position:fixed;top:0;left:-100%;bottom:0;width:100%;max-width:430px;background-color:var(--color-white);padding-inline:15px;z-index:999;box-shadow:0 3px 12px rgba(0,0,0,.45);transition:.6s ease-out}.ZinSgUtysxITkbGRKdux.FW1pOdad0uN5LO9h5PgQ{left:0;transition:.3s ease-in}.ZfA8OEmbRzRsNqLAmdtn{background-color:rgba(0,0,0,.3);backdrop-filter:blur(1px);position:absolute;left:0;top:0;right:0;bottom:0;z-index:998;pointer-events:none;opacity:0;transition:.3s}.ZfA8OEmbRzRsNqLAmdtn.FW1pOdad0uN5LO9h5PgQ{opacity:1;pointer-events:all}.YKSQJmdRP_7tKwvQpeuV{width:calc(100% + 30px);margin-left:-15px;background-color:var(--color-orange);display:flex;align-items:center;justify-content:center}.ISssYC5Uz452JVWP0xDc img{max-width:160px}.E6YZPpa60LxA7qqIW7jQ{position:absolute;top:23px;right:15px;font-size:25px;cursor:pointer;color:var(--color-white)}.YYp3pzktjEDEyW8knAZQ{overflow-y:auto;height:calc(100% - 51px);margin:0;padding:0}.u7k2VQ30AQDk6mKA22GX{height:60px;padding:10px;display:flex;align-items:center;border-bottom:1px solid var(--color-black);cursor:pointer;transition:.3s;text-transform:uppercase;width:100%}.u7k2VQ30AQDk6mKA22GX:hover{background-color:var(--color-grey);color:var(--color-black)}.QQoDB9XPcAK18l2DIym4{list-style:none}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN{height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-bottom:0}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX{position:relative}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa{position:absolute;width:60px;height:100%;background:var(--color-black);right:0;display:flex;align-items:center;justify-content:center}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa:hover{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .zo7CFksIKx7Fahu4e4S_{color:var(--color-white)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E{background:var(--color-grey)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .NytmT59TmaWHc4FLM2wa{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .uLgjMU9sbvfaa0qKEguP{height:auto;opacity:1}.uLgjMU9sbvfaa0qKEguP{padding:0;width:100%;margin:0;background-color:var(--color-orange);color:var(--color-white);height:0;opacity:0;overflow:hidden;transition:height .3s ease,opacity .3s ease}.uLgjMU9sbvfaa0qKEguP .u7k2VQ30AQDk6mKA22GX{min-height:60px;height:auto;padding-inline:40px}.efnjUnudkE0UTVQ6wrgH{cursor:pointer}.u7k2VQ30AQDk6mKA22GX .fjNRYZMP1O0pTvBDBB3L span{margin-left:8px;transform:translateY(-2px);display:inline-block;font-size:var(--font-size-body-3);text-transform:capitalize}
|
|
@@ -6,7 +6,7 @@ interface CategoryResponse {
|
|
|
6
6
|
onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
|
|
7
7
|
onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
|
|
8
8
|
selectYesNoOption?: any;
|
|
9
|
-
addAction?: () => void;
|
|
9
|
+
addAction?: (questionId: string, questionAnswerId: string) => void;
|
|
10
10
|
addButtons?: boolean;
|
|
11
11
|
fileList?: React.Dispatch<React.SetStateAction<Record<string, UploadFile<any>[]>>>;
|
|
12
12
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { MenuItem } from './Header.types';
|
|
2
2
|
export declare const getMenuTopList: (onHome: () => void) => MenuItem[];
|
|
3
|
-
export declare const getMenuBottomList: (onProfile: () => void, onLogout: () => void) => MenuItem[];
|
|
3
|
+
export declare const getMenuBottomList: (onProfile: () => void, onLogout: () => void, userName?: string) => MenuItem[];
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { HeaderProps } from './Header.types';
|
|
2
|
-
export declare const Header: ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const Header: ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage, userName, pageTitle }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Header;
|
package/package.json
CHANGED
|
@@ -32,6 +32,11 @@ const Template: Story<any> = (args) => {
|
|
|
32
32
|
(categoryResponseRef.current as any).handlePreviousClick();
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
const handleAddAction = (questionId: string) => {
|
|
36
|
+
console.log(`Ação adicionada para a pergunta com ID: ${questionId}`);
|
|
37
|
+
// Sua lógica para adicionar a ação, como uma chamada de API ou atualização de estado
|
|
38
|
+
};
|
|
39
|
+
|
|
35
40
|
useEffect(() => {
|
|
36
41
|
// console.log(serverData);
|
|
37
42
|
}, [serverData])
|
|
@@ -47,6 +52,7 @@ const Template: Story<any> = (args) => {
|
|
|
47
52
|
onPreviousCategoryAvailabilityChange={handlePreviousCategoryAvailabilityChange}
|
|
48
53
|
addButtons
|
|
49
54
|
fileList={setFileLists}
|
|
55
|
+
addAction={handleAddAction}
|
|
50
56
|
>
|
|
51
57
|
</CategoryResponse>
|
|
52
58
|
</div>
|
|
@@ -16,7 +16,7 @@ interface CategoryResponse {
|
|
|
16
16
|
onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
|
|
17
17
|
onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
|
|
18
18
|
selectYesNoOption?: any;
|
|
19
|
-
addAction?: () => void;
|
|
19
|
+
addAction?: (questionId: string, questionAnswerId:string) => void;
|
|
20
20
|
addButtons?: boolean;
|
|
21
21
|
fileList?: React.Dispatch<React.SetStateAction<Record<string, UploadFile<any>[]>>>;
|
|
22
22
|
};
|
|
@@ -162,6 +162,12 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
|
|
|
162
162
|
imgWindow?.document.write(image.outerHTML);
|
|
163
163
|
};
|
|
164
164
|
|
|
165
|
+
const handleAddAction = (questionId: string, questionAnswerId: string) => {
|
|
166
|
+
if (props.addAction) {
|
|
167
|
+
props.addAction(questionId, questionAnswerId);
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
|
|
165
171
|
const onFinish = (values: any) => {
|
|
166
172
|
const updatedQuestions = initialValues.Questions.map((question: any, index: number) => {
|
|
167
173
|
return {
|
|
@@ -250,10 +256,6 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
|
|
|
250
256
|
props.onPreviousCategoryAvailabilityChange(hasPrevious);
|
|
251
257
|
}, [currentKey, localData.CategoryAnswers, props]);
|
|
252
258
|
|
|
253
|
-
const questionWrapper = classNames({
|
|
254
|
-
[styles.questionWrapperOpenAnswer]: (selectedCategory.Data.OpenAnswer),
|
|
255
|
-
}, [styles.questionWrapper]);
|
|
256
|
-
|
|
257
259
|
// This gets the scale we use for each select from the database using a key based variable,if
|
|
258
260
|
// any new generalEvaluationLevel is added to the backend we need to update our own without
|
|
259
261
|
// deleting any of the previous so we dont mess up the project history.
|
|
@@ -343,7 +345,9 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
|
|
|
343
345
|
{form.getFieldValue(`Questions`)?.[index].Note ? t('components.categoryResponse.editNote') : t('components.categoryResponse.addNote')}
|
|
344
346
|
</Button>
|
|
345
347
|
|
|
346
|
-
<Button customClass={styles.actionsButtons} onClick={
|
|
348
|
+
<Button customClass={styles.actionsButtons} onClick={() => handleAddAction(question.QuestionId, question.Id)}>
|
|
349
|
+
{t('components.categoryResponse.createAction')}
|
|
350
|
+
</Button>
|
|
347
351
|
</div>
|
|
348
352
|
</>
|
|
349
353
|
}
|
|
@@ -12,9 +12,10 @@ export const getMenuTopList = (
|
|
|
12
12
|
export const getMenuBottomList= (
|
|
13
13
|
onProfile: () => void,
|
|
14
14
|
onLogout: () => void,
|
|
15
|
+
userName?: string,
|
|
15
16
|
): MenuItem[] => [
|
|
16
17
|
{
|
|
17
|
-
name:
|
|
18
|
+
name: `Profile${userName ? ` <span>(${userName})</span>` : ''}`,
|
|
18
19
|
action: onProfile,
|
|
19
20
|
},
|
|
20
21
|
{
|
|
@@ -37,6 +37,16 @@ const mockMenu = [
|
|
|
37
37
|
action: () => mockAction(),
|
|
38
38
|
targetRoute: "reports",
|
|
39
39
|
dropdownMenu: [
|
|
40
|
+
{
|
|
41
|
+
name: "Análises",
|
|
42
|
+
action: () => mockAction(),
|
|
43
|
+
targetRoute: "analyse",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "Análises2",
|
|
47
|
+
action: () => mockAction(),
|
|
48
|
+
targetRoute: "analyse2",
|
|
49
|
+
}
|
|
40
50
|
]
|
|
41
51
|
}
|
|
42
52
|
];
|
|
@@ -47,5 +57,7 @@ Primary.args = {
|
|
|
47
57
|
logout: () => console.log('Logout'), // in here logout from auth0 should be passed
|
|
48
58
|
homeUrl: homeUrl,
|
|
49
59
|
profileUrl: profileUrl,
|
|
60
|
+
userName: 'Diogo Carvalho',
|
|
61
|
+
pageTitle: 'Page Title',
|
|
50
62
|
};
|
|
51
63
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { useRef, useState } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DownOutlined, UpOutlined, BarsOutlined, CloseOutlined } from '@ant-design/icons';
|
|
3
3
|
import omniumIcon from '../../assets/images/omnium-retail-logo.png';
|
|
4
|
+
import omniumWhiteIcon from '../../assets/images/omnium-retail-logo-white.png';
|
|
4
5
|
import styles from './styles.module.scss';
|
|
5
6
|
import classNames from 'classnames';
|
|
6
7
|
import { HeaderProps, MenuItem } from './Header.types';
|
|
7
8
|
import { getMenuTopList, getMenuBottomList } from './Header.data';
|
|
8
9
|
|
|
9
|
-
export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage }: HeaderProps) => {
|
|
10
|
+
export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage, userName, pageTitle }: HeaderProps) => {
|
|
10
11
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
11
12
|
const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
|
|
12
13
|
const headerRef = useRef<HTMLDivElement>(null);
|
|
@@ -34,7 +35,8 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
|
|
|
34
35
|
|
|
35
36
|
const menuBottomList = getMenuBottomList(
|
|
36
37
|
onProfile,
|
|
37
|
-
onLogout
|
|
38
|
+
onLogout,
|
|
39
|
+
userName
|
|
38
40
|
);
|
|
39
41
|
|
|
40
42
|
const combinedMenuList = [...menuTopList, ...(menuList || []), ...menuBottomList];
|
|
@@ -68,13 +70,16 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
|
|
|
68
70
|
}
|
|
69
71
|
}}
|
|
70
72
|
>
|
|
71
|
-
|
|
73
|
+
<p
|
|
74
|
+
className={ styles.name }
|
|
75
|
+
dangerouslySetInnerHTML={{ __html: link.name }}></p>
|
|
76
|
+
|
|
72
77
|
{
|
|
73
78
|
link.dropdownMenu && link.dropdownMenu.length > 0 && <div className={styles.arrow} onClick={(event) => handleDropdownClick(event, index)}>
|
|
74
79
|
{
|
|
75
80
|
activeDropdown === index ?
|
|
76
|
-
<
|
|
77
|
-
<
|
|
81
|
+
<UpOutlined className={styles.arrowIcon} /> :
|
|
82
|
+
<DownOutlined className={styles.arrowIcon} />
|
|
78
83
|
}
|
|
79
84
|
</div>
|
|
80
85
|
}
|
|
@@ -105,13 +110,17 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
|
|
|
105
110
|
<BarsOutlined onClick={onToggleMenu} className={ styles.toggleMenuOpen } />
|
|
106
111
|
|
|
107
112
|
<div className={styles.logoContainer}>
|
|
108
|
-
|
|
113
|
+
{
|
|
114
|
+
pageTitle
|
|
115
|
+
? <p className={ styles.title}>{pageTitle}</p>
|
|
116
|
+
: <img src={omniumIcon} alt="Omnium Retail Blue Logo" />
|
|
117
|
+
}
|
|
109
118
|
</div>
|
|
110
119
|
|
|
111
120
|
<div className={classNames(styles.menu, { [styles.active]: isMenuOpen })}>
|
|
112
|
-
<div className={styles.
|
|
113
|
-
<p className={styles.
|
|
114
|
-
|
|
121
|
+
<div className={styles.head}>
|
|
122
|
+
<p className={styles.logoWrapper}>
|
|
123
|
+
<img src={omniumWhiteIcon} alt="Omnium Retail White Logo" />
|
|
115
124
|
</p>
|
|
116
125
|
<CloseOutlined color={'#FFFFFF'} className={styles.toggleMenuClose} onClick={onToggleMenu} />
|
|
117
126
|
</div>
|
|
@@ -2,16 +2,14 @@
|
|
|
2
2
|
:root {
|
|
3
3
|
--color-grey: #e4e4e4;
|
|
4
4
|
--color-grey-100: #E5E5E5;
|
|
5
|
-
--color-white: #FFFFFF;
|
|
6
|
-
--color-black: #2C2D2E;
|
|
7
5
|
}
|
|
8
6
|
|
|
9
7
|
.header {
|
|
10
8
|
display: flex;
|
|
11
9
|
align-items: center;
|
|
12
10
|
padding: 13px 20px;
|
|
13
|
-
border-bottom: 2px solid var(--color-grey-100);
|
|
14
11
|
box-sizing: border-box;
|
|
12
|
+
height: 72px;
|
|
15
13
|
|
|
16
14
|
* {
|
|
17
15
|
box-sizing: border-box;
|
|
@@ -27,6 +25,12 @@
|
|
|
27
25
|
img {
|
|
28
26
|
max-width: 196px;
|
|
29
27
|
}
|
|
28
|
+
|
|
29
|
+
.title {
|
|
30
|
+
font-weight: var(--font-weight-semibold);
|
|
31
|
+
text-transform: uppercase;
|
|
32
|
+
color: var(--color-black);
|
|
33
|
+
}
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
.toggleMenuOpen {
|
|
@@ -41,7 +45,7 @@
|
|
|
41
45
|
left: -100%;
|
|
42
46
|
bottom: 0;
|
|
43
47
|
width: 100%;
|
|
44
|
-
max-width:
|
|
48
|
+
max-width: 430px;
|
|
45
49
|
background-color: var(--color-white);
|
|
46
50
|
padding-inline: 15px;
|
|
47
51
|
z-index: 999;
|
|
@@ -73,7 +77,7 @@
|
|
|
73
77
|
}
|
|
74
78
|
}
|
|
75
79
|
|
|
76
|
-
.
|
|
80
|
+
.head {
|
|
77
81
|
width: calc(100% + 30px);
|
|
78
82
|
margin-left: -15px;
|
|
79
83
|
background-color: var(--color-orange);
|
|
@@ -82,15 +86,15 @@
|
|
|
82
86
|
justify-content: center;
|
|
83
87
|
}
|
|
84
88
|
|
|
85
|
-
.
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
+
.logoWrapper {
|
|
90
|
+
img {
|
|
91
|
+
max-width: 160px;
|
|
92
|
+
}
|
|
89
93
|
}
|
|
90
94
|
|
|
91
95
|
.toggleMenuClose {
|
|
92
96
|
position: absolute;
|
|
93
|
-
top:
|
|
97
|
+
top: 23px;
|
|
94
98
|
right: 15px;
|
|
95
99
|
font-size: 25px;
|
|
96
100
|
cursor: pointer;
|
|
@@ -191,3 +195,15 @@
|
|
|
191
195
|
.actionButton {
|
|
192
196
|
cursor: pointer;
|
|
193
197
|
}
|
|
198
|
+
|
|
199
|
+
.listName {
|
|
200
|
+
.name {
|
|
201
|
+
span {
|
|
202
|
+
margin-left: 8px;
|
|
203
|
+
transform: translateY(-2px);
|
|
204
|
+
display: inline-block;
|
|
205
|
+
font-size: var(--font-size-body-3);
|
|
206
|
+
text-transform: capitalize;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|