@visns-studio/visns-components 4.4.6 → 4.4.8
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/components/crm/Fetch.jsx +0 -2
- package/components/crm/Navigation.jsx +26 -14
- package/components/crm/auth/Login.jsx +0 -2
- package/components/crm/auth/styles/Login.module.css +1 -1
- package/components/crm/generic/GenericAuth.jsx +2 -2
- package/components/crm/generic/GenericDynamic.jsx +1 -3
- package/components/crm/generic/GenericFormBuilder.jsx +0 -2
- package/components/crm/generic/GenericMain.jsx +9 -1
- package/components/crm/generic/styles/GenericMain.module.css +10 -0
- package/components/crm/styles/Navigation.module.css +201 -122
- package/components/crm/styles/TableFilter.module.css +1 -1
- package/components/styles/global.css +1 -10
- package/package.json +1 -1
package/components/crm/Fetch.jsx
CHANGED
|
@@ -29,8 +29,6 @@ const CustomFetch = (
|
|
|
29
29
|
const payloadSize = new Blob([JSON.stringify(formData)]).size;
|
|
30
30
|
const totalRequestSize = payloadSize + headersSize + cookiesSize;
|
|
31
31
|
|
|
32
|
-
console.info(totalRequestSize);
|
|
33
|
-
|
|
34
32
|
if (totalRequestSize > MAX_PAYLOAD_SIZE) {
|
|
35
33
|
const errorMessage =
|
|
36
34
|
'The request is too large. Please try again with a smaller payload.';
|
|
@@ -42,7 +42,6 @@ import {
|
|
|
42
42
|
} from 'akar-icons';
|
|
43
43
|
import CustomFetch from './Fetch';
|
|
44
44
|
import Notification from './Notification';
|
|
45
|
-
import classNames from 'classnames';
|
|
46
45
|
import styles from './styles/Navigation.module.css';
|
|
47
46
|
|
|
48
47
|
function Navigation({
|
|
@@ -52,6 +51,7 @@ function Navigation({
|
|
|
52
51
|
navConfig,
|
|
53
52
|
searchComponent,
|
|
54
53
|
setSystemAuth,
|
|
54
|
+
themeType,
|
|
55
55
|
userProfile,
|
|
56
56
|
}) {
|
|
57
57
|
const location = useLocation();
|
|
@@ -61,9 +61,8 @@ function Navigation({
|
|
|
61
61
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
62
62
|
const [navData, setNavData] = useState(navConfig);
|
|
63
63
|
|
|
64
|
-
const appNavClasses =
|
|
65
|
-
|
|
66
|
-
});
|
|
64
|
+
// const appNavClasses = isScrolled ? styles['app-nav'] : styles['app-nav'];
|
|
65
|
+
const appNavClasses = styles['app-nav'];
|
|
67
66
|
|
|
68
67
|
const handleLogout = () => {
|
|
69
68
|
CustomFetch('/logout', 'GET', {}, () => {
|
|
@@ -161,21 +160,28 @@ function Navigation({
|
|
|
161
160
|
};
|
|
162
161
|
|
|
163
162
|
const IconComponent = iconComponents[n.icon];
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
)
|
|
163
|
+
let navItemClasses;
|
|
164
|
+
|
|
165
|
+
if (n.class.includes('active')) {
|
|
166
|
+
navItemClasses =
|
|
167
|
+
themeType === 'alternate'
|
|
168
|
+
? `${styles['nav-item-alternate']} ${styles.active}`
|
|
169
|
+
: `${styles['nav-item']} ${styles.active}`;
|
|
170
|
+
} else {
|
|
171
|
+
navItemClasses =
|
|
172
|
+
themeType === 'alternate'
|
|
173
|
+
? styles['nav-item-alternate']
|
|
174
|
+
: styles['nav-item'];
|
|
175
|
+
}
|
|
167
176
|
|
|
168
177
|
const renderChildren = () => {
|
|
169
178
|
if (n.children && n.children.length > 0) {
|
|
170
179
|
return (
|
|
171
|
-
<ul
|
|
180
|
+
<ul>
|
|
172
181
|
{n.children.map(
|
|
173
182
|
(child, childKey) =>
|
|
174
183
|
child.permission === true && (
|
|
175
|
-
<li
|
|
176
|
-
className={styles['sub-nav-item']}
|
|
177
|
-
key={`nav-child-${childKey}`}
|
|
178
|
-
>
|
|
184
|
+
<li key={`nav-child-${childKey}`}>
|
|
179
185
|
<Link
|
|
180
186
|
to={child.url}
|
|
181
187
|
title={child.label}
|
|
@@ -302,7 +308,7 @@ function Navigation({
|
|
|
302
308
|
navUrl === currentUrl ||
|
|
303
309
|
(nav.children &&
|
|
304
310
|
nav.children.some(
|
|
305
|
-
(child) =>
|
|
311
|
+
(child) => child.url === `/${currentPage}`
|
|
306
312
|
))
|
|
307
313
|
) {
|
|
308
314
|
return { ...nav, class: 'nav-item active' };
|
|
@@ -409,7 +415,13 @@ function Navigation({
|
|
|
409
415
|
)}
|
|
410
416
|
</ul>
|
|
411
417
|
</div>
|
|
412
|
-
<div
|
|
418
|
+
<div
|
|
419
|
+
className={
|
|
420
|
+
themeType === 'alternate'
|
|
421
|
+
? styles['hactions-alternate']
|
|
422
|
+
: styles.hactions
|
|
423
|
+
}
|
|
424
|
+
>
|
|
413
425
|
<ul>
|
|
414
426
|
{navData.settings.map((setting, settingKey) =>
|
|
415
427
|
setting.permission === true ? (
|
|
@@ -39,6 +39,7 @@ const GenericAuth = ({
|
|
|
39
39
|
providers,
|
|
40
40
|
navigation,
|
|
41
41
|
routeConfig,
|
|
42
|
+
themeType = 'primary',
|
|
42
43
|
}) => {
|
|
43
44
|
const navigate = useNavigate();
|
|
44
45
|
const location = useLocation();
|
|
@@ -61,8 +62,6 @@ const GenericAuth = ({
|
|
|
61
62
|
if (['Unauthenticatdata.'].includes(error)) {
|
|
62
63
|
const currentUrl = window.location.pathname;
|
|
63
64
|
|
|
64
|
-
console.info('aaa');
|
|
65
|
-
|
|
66
65
|
setIsAuthenticated(false);
|
|
67
66
|
navigate('/login', { state: { previousUrl: currentUrl } });
|
|
68
67
|
}
|
|
@@ -123,6 +122,7 @@ const GenericAuth = ({
|
|
|
123
122
|
routeConfig={routeConfig}
|
|
124
123
|
setUserProfile={setUserProfile}
|
|
125
124
|
setSystemAuth={setIsAuthenticated}
|
|
125
|
+
themeType={themeType}
|
|
126
126
|
userProfile={userProfile}
|
|
127
127
|
/>
|
|
128
128
|
}
|
|
@@ -41,14 +41,12 @@ const renderValue = (field, data) => {
|
|
|
41
41
|
if (field.dynamicfield && typeof field.dynamicfield === 'string') {
|
|
42
42
|
const [table, key] = field.dynamicfield.split('::');
|
|
43
43
|
|
|
44
|
-
console.info(data, table, key);
|
|
45
|
-
|
|
46
44
|
if (table && key) {
|
|
47
45
|
switch (table) {
|
|
48
46
|
case 'opportunities':
|
|
49
47
|
return data[table][key];
|
|
50
48
|
case 'clients':
|
|
51
|
-
return data['client'][key];
|
|
49
|
+
return data['client'] ? data['client'][key] : null;
|
|
52
50
|
default:
|
|
53
51
|
if (key === 'surname' && !data[key]) {
|
|
54
52
|
return data['lastname'] || '';
|
|
@@ -124,8 +124,6 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
124
124
|
const handleAddRowOption = (e) => {
|
|
125
125
|
e.preventDefault();
|
|
126
126
|
|
|
127
|
-
console.info(dataField);
|
|
128
|
-
|
|
129
127
|
// Initialize rows if it doesn't exist
|
|
130
128
|
if (!dataField.rows) {
|
|
131
129
|
setDataField((items) => ({
|
|
@@ -14,6 +14,7 @@ const GenericMain = ({
|
|
|
14
14
|
routeConfig,
|
|
15
15
|
setSystemAuth,
|
|
16
16
|
setUserProfile,
|
|
17
|
+
themeType,
|
|
17
18
|
userProfile,
|
|
18
19
|
}) => {
|
|
19
20
|
const [incomingCallData, setIncomingCallData] = useState({});
|
|
@@ -66,12 +67,19 @@ const GenericMain = ({
|
|
|
66
67
|
|
|
67
68
|
return (
|
|
68
69
|
<div>
|
|
69
|
-
<header
|
|
70
|
+
<header
|
|
71
|
+
className={
|
|
72
|
+
themeType === 'alternate'
|
|
73
|
+
? styles.headerAlternate
|
|
74
|
+
: styles.header
|
|
75
|
+
}
|
|
76
|
+
>
|
|
70
77
|
<Navigation
|
|
71
78
|
layout={layout}
|
|
72
79
|
logo={logo}
|
|
73
80
|
navConfig={navigation}
|
|
74
81
|
setSystemAuth={setSystemAuth}
|
|
82
|
+
themeType={themeType}
|
|
75
83
|
userProfile={userProfile}
|
|
76
84
|
/>
|
|
77
85
|
</header>
|
|
@@ -8,6 +8,16 @@
|
|
|
8
8
|
box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
.headerAlternate {
|
|
12
|
+
background: white;
|
|
13
|
+
color: var(--paragraph-color);
|
|
14
|
+
position: fixed;
|
|
15
|
+
top: 0;
|
|
16
|
+
width: 100%;
|
|
17
|
+
z-index: 995;
|
|
18
|
+
box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
|
|
19
|
+
}
|
|
20
|
+
|
|
11
21
|
.content {
|
|
12
22
|
display: flex;
|
|
13
23
|
flex: 1;
|
|
@@ -50,100 +50,84 @@
|
|
|
50
50
|
align-items: center;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
.nav-item
|
|
53
|
+
.app-nav .nav-item,
|
|
54
|
+
.app-nav .nav-item-alternate {
|
|
54
55
|
cursor: pointer;
|
|
55
56
|
transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
56
57
|
box-sizing: border-box;
|
|
57
58
|
position: relative;
|
|
58
59
|
}
|
|
59
60
|
|
|
60
|
-
.nav-item a
|
|
61
|
+
.app-nav .nav-item a,
|
|
62
|
+
.app-nav .nav-item-alternate a,
|
|
63
|
+
.app-nav .nav-item span,
|
|
64
|
+
.app-nav .nav-item-alternate span {
|
|
61
65
|
display: flex;
|
|
62
66
|
flex-wrap: nowrap;
|
|
63
67
|
align-items: center;
|
|
64
68
|
gap: 0.25rem;
|
|
65
|
-
color: var(--tertiary-color);
|
|
66
69
|
box-sizing: border-box;
|
|
67
70
|
padding: 0.5em;
|
|
68
|
-
margin: 0 0.25em;
|
|
69
71
|
text-decoration: none;
|
|
70
|
-
background: var(--primary-color);
|
|
71
72
|
outline: none;
|
|
72
73
|
border-radius: var(--br);
|
|
73
74
|
transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
74
75
|
}
|
|
75
76
|
|
|
76
|
-
.nav-item a
|
|
77
|
-
|
|
78
|
-
display: block;
|
|
79
|
-
width: 100%;
|
|
80
|
-
max-width: 15px;
|
|
81
|
-
height: auto;
|
|
82
|
-
position: relative;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.nav-item:hover a,
|
|
86
|
-
.nav-item.active a {
|
|
87
|
-
transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
88
|
-
background: var(--primary-color-lighter);
|
|
77
|
+
.app-nav .nav-item a,
|
|
78
|
+
.app-nav .nav-item span {
|
|
89
79
|
color: var(--tertiary-color);
|
|
80
|
+
background: var(--primary-color);
|
|
90
81
|
}
|
|
91
82
|
|
|
92
|
-
.nav-item
|
|
93
|
-
.nav-item
|
|
83
|
+
.app-nav .nav-item a svg,
|
|
84
|
+
.app-nav .nav-item span svg {
|
|
94
85
|
color: var(--secondary-color);
|
|
95
86
|
}
|
|
96
87
|
|
|
97
|
-
.nav-item
|
|
98
|
-
.nav-item
|
|
99
|
-
|
|
88
|
+
.app-nav .nav-item-alternate a,
|
|
89
|
+
.app-nav .nav-item-alternate span {
|
|
90
|
+
color: var(--paragraph-color);
|
|
91
|
+
background: white;
|
|
100
92
|
}
|
|
101
93
|
|
|
102
|
-
.nav-item
|
|
103
|
-
|
|
94
|
+
.app-nav .nav-item-alternate a svg,
|
|
95
|
+
.app-nav .nav-item-alternate span svg {
|
|
96
|
+
color: var(--highlight-color);
|
|
104
97
|
}
|
|
105
98
|
|
|
106
|
-
.nav-item
|
|
107
|
-
.nav-item.active
|
|
108
|
-
|
|
99
|
+
.app-nav .nav-item:hover a,
|
|
100
|
+
.app-nav .nav-item.active a,
|
|
101
|
+
.app-nav .nav-item:hover span,
|
|
102
|
+
.app-nav .nav-item.active span {
|
|
103
|
+
background: rgba(var(--primary-color-rgb), 0.97);
|
|
109
104
|
color: var(--tertiary-color);
|
|
110
105
|
}
|
|
111
106
|
|
|
112
|
-
.nav-item
|
|
107
|
+
.app-nav .nav-item:hover a svg,
|
|
108
|
+
.app-nav .nav-item.active a svg,
|
|
109
|
+
.app-nav .nav-item:hover span svg,
|
|
110
|
+
.app-nav .nav-item.active span svg {
|
|
113
111
|
color: var(--secondary-color);
|
|
114
112
|
}
|
|
115
113
|
|
|
116
|
-
.nav-item
|
|
117
|
-
.nav-item.active
|
|
118
|
-
|
|
114
|
+
.app-nav .nav-item-alternate:hover a,
|
|
115
|
+
.app-nav .nav-item-alternate.active a,
|
|
116
|
+
.app-nav .nav-item-alternate:hover span,
|
|
117
|
+
.app-nav .nav-item-alternate.active span {
|
|
118
|
+
background: rgba(238, 238, 238, 0.5);
|
|
119
|
+
color: var(--paragraph-color);
|
|
119
120
|
}
|
|
120
121
|
|
|
121
|
-
.nav-item
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
color: var(--tertiary-color);
|
|
127
|
-
box-sizing: border-box;
|
|
128
|
-
padding: 0.5em;
|
|
129
|
-
line-height: 1.25;
|
|
130
|
-
text-decoration: none;
|
|
131
|
-
background: var(--primary-color);
|
|
132
|
-
border-radius: var(--br);
|
|
133
|
-
transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.nav-item span:hover {
|
|
137
|
-
transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
138
|
-
background: var(--primary-color-lighter);
|
|
139
|
-
color: var(--tertiary-color);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.nav-item span:hover svg {
|
|
143
|
-
color: var(--secondary-color);
|
|
122
|
+
.app-nav .nav-item-alternate:hover a svg,
|
|
123
|
+
.app-nav .nav-item-alternate.active a svg,
|
|
124
|
+
.app-nav .nav-item-alternate:hover span svg,
|
|
125
|
+
.app-nav .nav-item-alternate.active span svg {
|
|
126
|
+
color: var(--highlight-color);
|
|
144
127
|
}
|
|
145
128
|
|
|
146
|
-
.nav-item ul
|
|
129
|
+
.app-nav .nav-item > ul,
|
|
130
|
+
.app-nav .nav-item-alternate > ul {
|
|
147
131
|
width: 200px;
|
|
148
132
|
position: absolute;
|
|
149
133
|
height: auto;
|
|
@@ -156,105 +140,200 @@
|
|
|
156
140
|
border-radius: 5px;
|
|
157
141
|
}
|
|
158
142
|
|
|
159
|
-
.nav-item ul li
|
|
143
|
+
.app-nav .nav-item > ul li,
|
|
144
|
+
.app-nav .nav-item-alternate > ul li {
|
|
160
145
|
display: block;
|
|
161
146
|
position: relative;
|
|
162
147
|
margin: 1px 0;
|
|
163
148
|
}
|
|
164
149
|
|
|
165
|
-
.nav-item ul li:last-of-type
|
|
150
|
+
.app-nav .nav-item > ul li:last-of-type,
|
|
151
|
+
.app-nav .nav-item-alternate > ul li:last-of-type {
|
|
166
152
|
margin-bottom: 0;
|
|
167
153
|
}
|
|
168
154
|
|
|
169
|
-
.nav-item ul li a
|
|
155
|
+
.app-nav .nav-item > ul li a,
|
|
156
|
+
.app-nav .nav-item-alternate > ul li a {
|
|
170
157
|
width: 100%;
|
|
171
158
|
padding: 8px 20px;
|
|
172
159
|
box-sizing: border-box;
|
|
173
160
|
display: block;
|
|
174
161
|
text-decoration: none;
|
|
175
|
-
background: rgba(var(--primary-color-rgb), 0.9);
|
|
176
|
-
color: var(--tertiary-color);
|
|
177
162
|
border-radius: 3px;
|
|
178
163
|
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
179
164
|
outline: none;
|
|
180
165
|
margin: 0;
|
|
181
166
|
}
|
|
182
167
|
|
|
183
|
-
.nav-item ul li
|
|
184
|
-
background: rgba(var(--primary-color-rgb), 0.
|
|
185
|
-
color: var(--
|
|
186
|
-
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.navscrolled .nav-item a {
|
|
190
|
-
padding: 0.25em 1em;
|
|
191
|
-
transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
168
|
+
.app-nav .nav-item > ul li a {
|
|
169
|
+
background: rgba(var(--primary-color-rgb), 0.9);
|
|
170
|
+
color: var(--tertiary-color);
|
|
192
171
|
}
|
|
193
172
|
|
|
194
|
-
.
|
|
195
|
-
|
|
196
|
-
|
|
173
|
+
.app-nav .nav-item-alternate > ul li a {
|
|
174
|
+
background: rgba(var(--alternate-background-color-rgb), 0.9);
|
|
175
|
+
color: var(--alternate-paragraph-color);
|
|
197
176
|
}
|
|
198
177
|
|
|
199
|
-
.
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
margin: 0;
|
|
204
|
-
flex-wrap: nowrap;
|
|
205
|
-
flex-direction: row;
|
|
206
|
-
align-items: center;
|
|
207
|
-
justify-content: center;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.hactions > ul li {
|
|
211
|
-
margin: 0 5px;
|
|
178
|
+
.app-nav .nav-item > ul li:hover a,
|
|
179
|
+
.app-nav .nav-item-alternate > ul li:hover a {
|
|
180
|
+
background: rgba(var(--primary-color-rgb), 1.05);
|
|
181
|
+
color: var(--highlight-color);
|
|
212
182
|
}
|
|
213
183
|
|
|
214
|
-
.
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
padding: 0.35rem;
|
|
218
|
-
text-decoration: none;
|
|
219
|
-
background: none;
|
|
220
|
-
border: 2px solid var(--primary-color-lighter);
|
|
221
|
-
border-radius: 100%;
|
|
222
|
-
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
223
|
-
display: flex;
|
|
224
|
-
align-items: center;
|
|
184
|
+
.app-nav .nav-item-alternate > ul li:hover a {
|
|
185
|
+
background: rgba(var(--alternate-background-color-rgb), 1.05);
|
|
186
|
+
color: var(--alternate-highlight-color);
|
|
225
187
|
}
|
|
226
188
|
|
|
227
|
-
.
|
|
228
|
-
|
|
229
|
-
transition: all 0.
|
|
189
|
+
.app-nav .nav-item > ul li:hover a svg,
|
|
190
|
+
.app-nav .nav-item-alternate > ul li:hover a svg {
|
|
191
|
+
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
230
192
|
}
|
|
231
193
|
|
|
232
|
-
.
|
|
233
|
-
|
|
234
|
-
|
|
194
|
+
.app-nav .nav-item::before,
|
|
195
|
+
.app-nav .nav-item a::before .navscrolled .nav-item a {
|
|
196
|
+
padding: 0.25em 1em;
|
|
197
|
+
transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
235
198
|
}
|
|
236
199
|
|
|
237
|
-
.
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
text-decoration: none;
|
|
242
|
-
background: none;
|
|
243
|
-
border: 1px solid var(--primary-color-lighter);
|
|
244
|
-
border-radius: 100%;
|
|
245
|
-
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
246
|
-
display: flex;
|
|
247
|
-
align-items: center;
|
|
248
|
-
outline: none;
|
|
249
|
-
appearance: none;
|
|
200
|
+
.app-nav .nav-item:hover > ul,
|
|
201
|
+
.app-nav .nav-item-alternate:hover > ul {
|
|
202
|
+
display: block;
|
|
203
|
+
opacity: 1;
|
|
250
204
|
}
|
|
251
205
|
|
|
252
|
-
.
|
|
253
|
-
|
|
254
|
-
transition: all 0.
|
|
206
|
+
.navscrolled .nav-item span {
|
|
207
|
+
padding: 0.25em 1em;
|
|
208
|
+
transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
255
209
|
}
|
|
256
210
|
|
|
257
|
-
.hactions
|
|
258
|
-
|
|
259
|
-
|
|
211
|
+
.hactions {
|
|
212
|
+
> ul {
|
|
213
|
+
list-style: none;
|
|
214
|
+
display: flex;
|
|
215
|
+
padding: 0 1rem 0 0;
|
|
216
|
+
margin: 0;
|
|
217
|
+
flex-wrap: nowrap;
|
|
218
|
+
flex-direction: row;
|
|
219
|
+
align-items: center;
|
|
220
|
+
justify-content: center;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
> ul li {
|
|
224
|
+
margin: 0 5px;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
> ul a {
|
|
228
|
+
color: var(--tertiary-color);
|
|
229
|
+
box-sizing: border-box;
|
|
230
|
+
padding: 0.35rem;
|
|
231
|
+
text-decoration: none;
|
|
232
|
+
background: none;
|
|
233
|
+
border: 2px solid var(--primary-color-lighter);
|
|
234
|
+
border-radius: 100%;
|
|
235
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
236
|
+
display: flex;
|
|
237
|
+
align-items: center;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
> ul a:hover {
|
|
241
|
+
background: var(--primary-color-lighter);
|
|
242
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
> ul a:hover svg {
|
|
246
|
+
color: var(--highlight-color);
|
|
247
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
button {
|
|
251
|
+
color: var(--tertiary-color);
|
|
252
|
+
box-sizing: border-box;
|
|
253
|
+
padding: 0.35rem;
|
|
254
|
+
text-decoration: none;
|
|
255
|
+
background: none;
|
|
256
|
+
border: 1px solid var(--primary-color-lighter);
|
|
257
|
+
border-radius: 100%;
|
|
258
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: center;
|
|
261
|
+
outline: none;
|
|
262
|
+
appearance: none;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
button:hover {
|
|
266
|
+
background: var(--primary-color-lighter);
|
|
267
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
button:hover svg {
|
|
271
|
+
color: var(--highlight-color);
|
|
272
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.hactions-alternate {
|
|
277
|
+
> ul {
|
|
278
|
+
list-style: none;
|
|
279
|
+
display: flex;
|
|
280
|
+
padding: 0 1rem 0 0;
|
|
281
|
+
margin: 0;
|
|
282
|
+
flex-wrap: nowrap;
|
|
283
|
+
flex-direction: row;
|
|
284
|
+
align-items: center;
|
|
285
|
+
justify-content: center;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
> ul li {
|
|
289
|
+
margin: 0 5px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
> ul a {
|
|
293
|
+
color: var(--paragraph-color);
|
|
294
|
+
box-sizing: border-box;
|
|
295
|
+
padding: 0.35rem;
|
|
296
|
+
text-decoration: none;
|
|
297
|
+
background: none;
|
|
298
|
+
border: 2px solid var(--primary-color-lighter);
|
|
299
|
+
border-radius: 100%;
|
|
300
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
301
|
+
display: flex;
|
|
302
|
+
align-items: center;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
> ul a:hover {
|
|
306
|
+
background: var(--primary-color-lighter);
|
|
307
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
> ul a:hover svg {
|
|
311
|
+
color: var(--highlight-color);
|
|
312
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
button {
|
|
316
|
+
color: var(--paragraph-color);
|
|
317
|
+
box-sizing: border-box;
|
|
318
|
+
padding: 0.35rem;
|
|
319
|
+
text-decoration: none;
|
|
320
|
+
background: none;
|
|
321
|
+
border: 1px solid var(--primary-color-lighter);
|
|
322
|
+
border-radius: 100%;
|
|
323
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
324
|
+
display: flex;
|
|
325
|
+
align-items: center;
|
|
326
|
+
outline: none;
|
|
327
|
+
appearance: none;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
button:hover {
|
|
331
|
+
background: var(--primary-color-lighter);
|
|
332
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
button:hover svg {
|
|
336
|
+
color: var(--highlight-color);
|
|
337
|
+
transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
338
|
+
}
|
|
260
339
|
}
|
|
@@ -65,18 +65,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
|
|
|
65
65
|
box-shadow: none;
|
|
66
66
|
padding: 1rem;
|
|
67
67
|
outline: none;
|
|
68
|
-
width: 100%;
|
|
68
|
+
/* width: 100%; */
|
|
69
69
|
box-sizing: border-box;
|
|
70
70
|
background: rgba(white, 0.5);
|
|
71
71
|
color: var(--paragraph-color);
|
|
72
72
|
transition: border 0.15s linear;
|
|
73
|
-
|
|
74
|
-
&:hover {
|
|
75
|
-
border: 1px solid var(--primary-color);
|
|
76
|
-
transition: border 0.15s linear;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
&:focus {
|
|
80
|
-
border: 1px solid var(--primary-color);
|
|
81
|
-
}
|
|
82
73
|
}
|
package/package.json
CHANGED