@visns-studio/visns-components 4.3.12 → 4.4.1

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.
@@ -0,0 +1,94 @@
1
+ .preloader {
2
+ width: max-content;
3
+ display: flex;
4
+ flex-wrap: nowrap;
5
+ align-items: center;
6
+ position: fixed;
7
+ bottom: 20px;
8
+ left: 20px;
9
+ background: var(--paragraph-color);
10
+ border-radius: 30px;
11
+ padding: 0.35em;
12
+ box-sizing: border-box;
13
+ z-index: 999;
14
+ transition: opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1);
15
+
16
+ span {
17
+ font-size: 0.675em;
18
+ display: block;
19
+ width: max-content;
20
+ color: var(--tertiary-color);
21
+ padding: 0 0.35em 0 0.85em;
22
+ letter-spacing: 0.035em;
23
+ }
24
+ }
25
+
26
+ .preloader__icn {
27
+ opacity: 1;
28
+ width: 14px;
29
+ height: 14px;
30
+ animation: clockwise 500ms linear infinite;
31
+ }
32
+
33
+ .preloader__cut {
34
+ position: relative;
35
+ width: 7px;
36
+ height: 14px;
37
+ overflow: hidden;
38
+ position: absolute;
39
+ top: 0;
40
+ left: 0;
41
+ }
42
+
43
+ .preloader__donut--fake {
44
+ box-sizing: border-box;
45
+ width: 14px;
46
+ height: 14px;
47
+ border: 2px solid red;
48
+ border-radius: 50%;
49
+ position: absolute;
50
+ top: 0;
51
+ left: 0;
52
+ background: none;
53
+ margin: 0;
54
+ }
55
+
56
+ .preloader__donut {
57
+ box-sizing: border-box;
58
+ width: 14px;
59
+ height: 14px;
60
+ border: 2px solid var(--tertiary-color);
61
+ border-radius: 50%;
62
+ border-left-color: transparent;
63
+ border-bottom-color: transparent;
64
+ position: absolute;
65
+ top: 0;
66
+ left: 0;
67
+ position: absolute;
68
+ top: 0;
69
+ left: 0;
70
+ background: none;
71
+ margin: 0;
72
+ animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
73
+ }
74
+
75
+ @keyframes clockwise {
76
+ 0% {
77
+ transform: rotate(0deg);
78
+ }
79
+ 100% {
80
+ transform: rotate(360deg);
81
+ }
82
+ }
83
+
84
+ @keyframes donut-rotate {
85
+ 0% {
86
+ transform: rotate(0);
87
+ }
88
+ 50% {
89
+ transform: rotate(-140deg);
90
+ }
91
+ 100% {
92
+ transform: rotate(0);
93
+ }
94
+ }
@@ -0,0 +1,12 @@
1
+ .visns__ms {
2
+ input {
3
+ &:hover {
4
+ box-shadow: none !important;
5
+ transition: box-shadow 0.15s linear !important;
6
+ }
7
+
8
+ &:focus {
9
+ box-shadow: none !important;
10
+ }
11
+ }
12
+ }
@@ -0,0 +1,260 @@
1
+ .hwrap {
2
+ width: 100%;
3
+ display: flex;
4
+ align-items: center;
5
+ }
6
+
7
+ .hwrap .logo {
8
+ width: 100px;
9
+ padding: 0 1rem 0 0.5rem;
10
+ margin: 0;
11
+ line-height: 1.45;
12
+ }
13
+
14
+ .hwrap .logo img {
15
+ width: 100%;
16
+ max-width: 80px;
17
+ height: auto;
18
+ display: block;
19
+ margin: 0 auto;
20
+ }
21
+
22
+ .branding {
23
+ margin: 0;
24
+ padding: 0;
25
+ font-weight: 700;
26
+ letter-spacing: -1px;
27
+ text-align: center;
28
+ }
29
+
30
+ .branding .highlight {
31
+ color: white;
32
+ }
33
+
34
+ .branding .light {
35
+ font-weight: 300;
36
+ color: var(--secondary-color);
37
+ }
38
+
39
+ .navwrap {
40
+ flex: 1;
41
+ }
42
+
43
+ .app-nav {
44
+ display: flex;
45
+ flex-wrap: nowrap;
46
+ flex-direction: row;
47
+ padding: 0.85rem 0;
48
+ margin: 0;
49
+ list-style: none;
50
+ align-items: center;
51
+ }
52
+
53
+ .nav-item {
54
+ cursor: pointer;
55
+ transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
56
+ box-sizing: border-box;
57
+ position: relative;
58
+ }
59
+
60
+ .nav-item a {
61
+ display: flex;
62
+ flex-wrap: nowrap;
63
+ align-items: center;
64
+ gap: 0.25rem;
65
+ color: var(--tertiary-color);
66
+ box-sizing: border-box;
67
+ padding: 0.5em;
68
+ margin: 0 0.25em;
69
+ text-decoration: none;
70
+ background: var(--primary-color);
71
+ outline: none;
72
+ border-radius: var(--br);
73
+ transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
74
+ }
75
+
76
+ .nav-item a svg {
77
+ color: var(--secondary-color);
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);
89
+ color: var(--tertiary-color);
90
+ }
91
+
92
+ .nav-item:hover a svg,
93
+ .nav-item.active a svg {
94
+ color: var(--secondary-color);
95
+ }
96
+
97
+ .nav-item:hover ul,
98
+ .nav-item.active ul {
99
+ opacity: 1;
100
+ }
101
+
102
+ .nav-item:hover ul {
103
+ display: block;
104
+ }
105
+
106
+ .nav-item.active a,
107
+ .nav-item.active span {
108
+ background: var(--primary-color-lighter);
109
+ color: var(--tertiary-color);
110
+ }
111
+
112
+ .nav-item span svg {
113
+ color: var(--secondary-color);
114
+ }
115
+
116
+ .nav-item.active a svg,
117
+ .nav-item.active span svg {
118
+ color: var(--secondary-color);
119
+ }
120
+
121
+ .nav-item span {
122
+ display: flex;
123
+ flex-wrap: nowrap;
124
+ align-items: center;
125
+ gap: 0.25rem;
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);
144
+ }
145
+
146
+ .nav-item ul {
147
+ width: 200px;
148
+ position: absolute;
149
+ height: auto;
150
+ margin: 0;
151
+ padding: 0;
152
+ list-style: none;
153
+ display: none;
154
+ opacity: 0;
155
+ background: rgba(var(--primary-color-rgb), 0.75);
156
+ border-radius: 5px;
157
+ }
158
+
159
+ .nav-item ul li {
160
+ display: block;
161
+ position: relative;
162
+ margin: 1px 0;
163
+ }
164
+
165
+ .nav-item ul li:last-of-type {
166
+ margin-bottom: 0;
167
+ }
168
+
169
+ .nav-item ul li a {
170
+ width: 100%;
171
+ padding: 8px 20px;
172
+ box-sizing: border-box;
173
+ display: block;
174
+ text-decoration: none;
175
+ background: rgba(var(--primary-color-rgb), 0.9);
176
+ color: var(--tertiary-color);
177
+ border-radius: 3px;
178
+ transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
179
+ outline: none;
180
+ margin: 0;
181
+ }
182
+
183
+ .nav-item ul li:hover a {
184
+ background: rgba(var(--primary-color-rgb), 0.8);
185
+ color: var(--highlight-color);
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);
192
+ }
193
+
194
+ .navscrolled .nav-item span {
195
+ padding: 0.25em 1em;
196
+ transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
197
+ }
198
+
199
+ .hactions > ul {
200
+ list-style: none;
201
+ display: flex;
202
+ padding: 0 1rem 0 0;
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;
212
+ }
213
+
214
+ .hactions > ul a {
215
+ color: var(--tertiary-color);
216
+ box-sizing: border-box;
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;
225
+ }
226
+
227
+ .hactions > ul a:hover {
228
+ background: var(--primary-color-lighter);
229
+ transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
230
+ }
231
+
232
+ .hactions > ul a:hover svg {
233
+ color: var(--highlight-color);
234
+ transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
235
+ }
236
+
237
+ .hactions button {
238
+ color: var(--tertiary-color);
239
+ box-sizing: border-box;
240
+ padding: 0.35rem;
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;
250
+ }
251
+
252
+ .hactions button:hover {
253
+ background: var(--primary-color-lighter);
254
+ transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
255
+ }
256
+
257
+ .hactions button:hover svg {
258
+ color: var(--highlight-color);
259
+ transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
260
+ }
@@ -0,0 +1,129 @@
1
+ .notibox {
2
+ background: #fff;
3
+ border: 1px solid var(--primary-color-lighter);
4
+ border-top-color: rgb(204, 204, 204);
5
+ border-right-color: rgb(204, 204, 204);
6
+ border-bottom-color: rgb(204, 204, 204);
7
+ border-left-color: rgb(204, 204, 204);
8
+ border-color: rgba(0, 0, 0, 0.2);
9
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
10
+ display: block;
11
+ opacity: 1;
12
+ outline: none;
13
+ overflow: hidden;
14
+ position: absolute;
15
+ padding: 6px;
16
+ border-radius: var(--br);
17
+ width: 550px;
18
+ overflow-y: scroll;
19
+ transform: translateX(-470px);
20
+ text-align: left;
21
+ color: var(--paragraph-color);
22
+ box-sizing: border-box;
23
+ transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
24
+ z-index: 999;
25
+ }
26
+
27
+ .notibox .notiscrollwrap {
28
+ max-height: 190px;
29
+ overflow-y: auto;
30
+ }
31
+
32
+ .notibox .notibox-item {
33
+ width: 100%;
34
+ display: block;
35
+ background: #f0f0f0;
36
+ border-radius: var(--br);
37
+ padding: 9px 36px 8px 6px;
38
+ box-sizing: border-box;
39
+ margin-bottom: 4px;
40
+ position: relative;
41
+ }
42
+
43
+ .notibox .notibox-item span {
44
+ color: var(--paragraph-color);
45
+ font-size: 80%;
46
+ }
47
+
48
+ .notibox .notibox-item > button {
49
+ position: absolute;
50
+ right: 6px;
51
+ top: 5px;
52
+ cursor: pointer;
53
+ padding: 0;
54
+ margin: 0;
55
+ outline: none;
56
+ background: none;
57
+ border: none;
58
+ }
59
+
60
+ .notibox .notibox-item > button svg {
61
+ width: 100%;
62
+ max-width: 20px;
63
+ }
64
+
65
+ .notibox .notibox-item .noti-read {
66
+ color: var(--primary-color);
67
+ }
68
+
69
+ .notibox .notibox-item .cis-bell-exclamation {
70
+ display: none;
71
+ visibility: hidden;
72
+ }
73
+
74
+ .notibox .notibox-actions {
75
+ width: 100%;
76
+ display: block;
77
+ border-top: 1px solid darken(#f0f0f0, 5%);
78
+ padding: 10px 0 5px 0;
79
+ margin-top: 10px;
80
+ }
81
+
82
+ .notibox .notibox-actions button {
83
+ display: inline-block;
84
+ border-radius: 6px;
85
+ border: 1px solid var(--primary-color-lighter);
86
+ margin-right: 5px;
87
+ padding: 8px;
88
+ font-size: 0.875em;
89
+ outline: none;
90
+ color: var(--tertiary-color);
91
+ background: var(--primary-color);
92
+ }
93
+
94
+ .notilink {
95
+ background: none;
96
+ padding: 0;
97
+ line-height: inherit;
98
+ border-radius: 0;
99
+ color: inherit;
100
+ display: inline;
101
+ text-decoration: underline;
102
+ border: none;
103
+ font-weight: 700;
104
+ text-decoration: none;
105
+ }
106
+
107
+ .notilink:hover {
108
+ background: none;
109
+ color: var(--secondary-color);
110
+ }
111
+
112
+ .noti {
113
+ animation: notification 1s infinite;
114
+ }
115
+
116
+ @keyframes notification {
117
+ 0% {
118
+ color: var(--secondary-color);
119
+ opacity: 0;
120
+ }
121
+ 50% {
122
+ color: #c0ff52;
123
+ opacity: 1;
124
+ }
125
+ 100% {
126
+ color: var(--secondary-color);
127
+ opacity: 0;
128
+ }
129
+ }
@@ -0,0 +1,87 @@
1
+ .gridtxt {
2
+ &__header {
3
+ width: 100%;
4
+ display: block;
5
+ background: rgba(var(--item-color-rgb), 1.05);
6
+ box-sizing: border-box;
7
+ padding: 10px 20px;
8
+ border-radius: 0;
9
+ margin-bottom: 0;
10
+ font-weight: 700;
11
+ text-align: center;
12
+ color: var(--paragraph-color);
13
+
14
+ span {
15
+ font-weight: 700;
16
+ }
17
+ }
18
+
19
+ > ul {
20
+ width: 100%;
21
+ display: flex;
22
+ justify-content: flex-start;
23
+ flex-direction: row;
24
+ flex-wrap: wrap;
25
+ list-style: none;
26
+ box-sizing: border-box;
27
+ padding: 0.85rem;
28
+ margin: 0;
29
+
30
+ li {
31
+ flex: 0 0 calc(50% - 10px);
32
+ padding: 0.85rem;
33
+ box-sizing: border-box;
34
+ border: 1px solid rgba(var(--primary-color-rgb), 0.15);
35
+ color: var(--paragraph-color);
36
+ background: rgba(var(--tertiary-color-rgb), 0.95);
37
+ margin: 5px;
38
+ border-radius: var(--br);
39
+ line-height: 1.45;
40
+ }
41
+
42
+ .fw-grid-item {
43
+ flex: 0 0 calc(100% - 10px);
44
+ }
45
+
46
+ .notecolor {
47
+ border: 1px solid var(--secondary-color);
48
+ }
49
+ }
50
+ }
51
+
52
+ .customer__overview {
53
+ width: 100%;
54
+ display: flex;
55
+ justify-content: flex-start;
56
+ flex-direction: row;
57
+ flex-wrap: wrap;
58
+ list-style: none;
59
+ box-sizing: border-box;
60
+ padding: 1em;
61
+ margin: 0;
62
+
63
+ li {
64
+ width: 49%;
65
+ padding: 1em;
66
+ box-sizing: border-box;
67
+ border: 1px solid rgba(var(--primary-color-rgb), 0.15);
68
+ color: var(--paragraph-color);
69
+ background: rgba(#f4f4f4, 0.65);
70
+ margin: 5px;
71
+ border-radius: 5px;
72
+ }
73
+ }
74
+
75
+ .polActions {
76
+ position: fixed;
77
+ bottom: 15px;
78
+ right: 20px;
79
+ width: auto;
80
+
81
+ button {
82
+ display: block;
83
+ float: left;
84
+ padding: 0.35em 1em;
85
+ margin: 0 0.15em;
86
+ }
87
+ }
@@ -0,0 +1,31 @@
1
+ textarea,
2
+ select,
3
+ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
4
+ .inovua-react-toolkit-numeric-input__input
5
+ ):not(.inovua-react-toolkit-combo-box__input):not(
6
+ .inovua-react-toolkit-date-input__input
7
+ ):not(.inovua-react-toolkit-text-input__input):not(
8
+ .inovua-react-toolkit-numeric-input__input
9
+ ) {
10
+ background: var(--item-color);
11
+ border-radius: var(--br);
12
+ border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
13
+ box-shadow: none;
14
+ padding: 1rem;
15
+ outline: none;
16
+ width: 100%;
17
+ box-sizing: border-box;
18
+ background: rgba(white, 0.5);
19
+ color: var(--paragraph-color);
20
+ transition: border 0.15s linear;
21
+ font-size: 1.25em;
22
+
23
+ &:hover {
24
+ border: 1px solid var(--primary-color);
25
+ transition: border 0.15s linear;
26
+ }
27
+
28
+ &:focus {
29
+ border: 1px solid var(--primary-color);
30
+ }
31
+ }
package/package.json CHANGED
@@ -57,7 +57,7 @@
57
57
  "react-dom": "^17.0.1"
58
58
  },
59
59
  "name": "@visns-studio/visns-components",
60
- "version": "4.3.12",
60
+ "version": "4.4.1",
61
61
  "description": "Various packages to assist in the development of our Custom Applications.",
62
62
  "main": "index.js",
63
63
  "scripts": {