@visns-studio/visns-components 4.4.6 → 4.4.7
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 +28 -14
- package/components/crm/generic/GenericAuth.jsx +2 -0
- 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/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,9 @@ 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
|
|
65
|
+
? styles['navscrolled']
|
|
66
|
+
: styles['app-nav'];
|
|
67
67
|
|
|
68
68
|
const handleLogout = () => {
|
|
69
69
|
CustomFetch('/logout', 'GET', {}, () => {
|
|
@@ -161,21 +161,29 @@ function Navigation({
|
|
|
161
161
|
};
|
|
162
162
|
|
|
163
163
|
const IconComponent = iconComponents[n.icon];
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
)
|
|
164
|
+
let navItemClasses;
|
|
165
|
+
|
|
166
|
+
if (n.class.includes('active')) {
|
|
167
|
+
console.info(n);
|
|
168
|
+
navItemClasses =
|
|
169
|
+
themeType === 'alternate'
|
|
170
|
+
? `${styles['nav-item-alternate']} ${styles.active}`
|
|
171
|
+
: `${styles['nav-item']} ${styles.active}`;
|
|
172
|
+
} else {
|
|
173
|
+
navItemClasses =
|
|
174
|
+
themeType === 'alternate'
|
|
175
|
+
? styles['nav-item-alternate']
|
|
176
|
+
: styles['nav-item'];
|
|
177
|
+
}
|
|
167
178
|
|
|
168
179
|
const renderChildren = () => {
|
|
169
180
|
if (n.children && n.children.length > 0) {
|
|
170
181
|
return (
|
|
171
|
-
<ul
|
|
182
|
+
<ul>
|
|
172
183
|
{n.children.map(
|
|
173
184
|
(child, childKey) =>
|
|
174
185
|
child.permission === true && (
|
|
175
|
-
<li
|
|
176
|
-
className={styles['sub-nav-item']}
|
|
177
|
-
key={`nav-child-${childKey}`}
|
|
178
|
-
>
|
|
186
|
+
<li key={`nav-child-${childKey}`}>
|
|
179
187
|
<Link
|
|
180
188
|
to={child.url}
|
|
181
189
|
title={child.label}
|
|
@@ -302,7 +310,7 @@ function Navigation({
|
|
|
302
310
|
navUrl === currentUrl ||
|
|
303
311
|
(nav.children &&
|
|
304
312
|
nav.children.some(
|
|
305
|
-
(child) =>
|
|
313
|
+
(child) => child.url === `/${currentPage}`
|
|
306
314
|
))
|
|
307
315
|
) {
|
|
308
316
|
return { ...nav, class: 'nav-item active' };
|
|
@@ -409,7 +417,13 @@ function Navigation({
|
|
|
409
417
|
)}
|
|
410
418
|
</ul>
|
|
411
419
|
</div>
|
|
412
|
-
<div
|
|
420
|
+
<div
|
|
421
|
+
className={
|
|
422
|
+
themeType === 'alternate'
|
|
423
|
+
? styles['hactions-alternate']
|
|
424
|
+
: styles.hactions
|
|
425
|
+
}
|
|
426
|
+
>
|
|
413
427
|
<ul>
|
|
414
428
|
{navData.settings.map((setting, settingKey) =>
|
|
415
429
|
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();
|
|
@@ -123,6 +124,7 @@ const GenericAuth = ({
|
|
|
123
124
|
routeConfig={routeConfig}
|
|
124
125
|
setUserProfile={setUserProfile}
|
|
125
126
|
setSystemAuth={setIsAuthenticated}
|
|
127
|
+
themeType={themeType}
|
|
126
128
|
userProfile={userProfile}
|
|
127
129
|
/>
|
|
128
130
|
}
|
|
@@ -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