spiderly 19.3.0 → 19.4.0-preview.0

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.
Files changed (31) hide show
  1. package/README.md +17 -17
  2. package/fesm2022/spiderly.mjs +122 -85
  3. package/fesm2022/spiderly.mjs.map +1 -1
  4. package/lib/components/layout/layout.component.d.ts +5 -1
  5. package/lib/components/spiderly-data-table/spiderly-data-table.component.d.ts +14 -1
  6. package/package.json +1 -1
  7. package/styles/components/info-card/info-card.component.scss +60 -60
  8. package/styles/components/layout/profile-avatar/profile-avatar.component.scss +8 -8
  9. package/styles/components/layout/topbar/topbar.component.scss +38 -38
  10. package/styles/components/spiderly-data-table/spiderly-data-table.component.scss +48 -48
  11. package/styles/components/spiderly-data-view/spiderly-data-view.component.scss +55 -55
  12. package/styles/components/spiderly-panels/panel-body/panel-body.component.scss +8 -8
  13. package/styles/components/spiderly-panels/panel-footer/panel-footer.component.scss +16 -16
  14. package/styles/components/spiderly-panels/spiderly-panel/spiderly-panel.component.scss +87 -87
  15. package/styles/controls/base-controls.scss +16 -16
  16. package/styles/controls/spiderly-checkbox/spiderly-checkbox.component.scss +22 -22
  17. package/styles/styles/layout/_content.scss +14 -14
  18. package/styles/styles/layout/_footer.scss +11 -11
  19. package/styles/styles/layout/_main.scss +34 -34
  20. package/styles/styles/layout/_menu.scss +137 -137
  21. package/styles/styles/layout/_mixins.scss +13 -13
  22. package/styles/styles/layout/_preloading.scss +47 -47
  23. package/styles/styles/layout/_responsive.scss +102 -102
  24. package/styles/styles/layout/_spiderly-controls.scss +14 -14
  25. package/styles/styles/layout/_topbar.scss +235 -235
  26. package/styles/styles/layout/_typography.scss +63 -63
  27. package/styles/styles/layout/_utils.scss +19 -19
  28. package/styles/styles/layout/_variables.scss +908 -908
  29. package/styles/styles/layout/layout.scss +11 -11
  30. package/styles/styles/shared.scss +483 -483
  31. package/styles/styles/styles.scss +2 -2
package/styles/styles/layout/_preloading.scss CHANGED
@@ -1,47 +1,47 @@
1
- .preloader {
2
- position: fixed;
3
- z-index: 999999;
4
- background: #edf1f5;
5
- width: 100%;
6
- height: 100%;
7
- }
8
- .preloader-content {
9
- border: 0 solid transparent;
10
- border-radius: 50%;
11
- width: 150px;
12
- height: 150px;
13
- position: absolute;
14
- top: calc(50vh - 75px);
15
- left: calc(50vw - 75px);
16
- }
17
-
18
- .preloader-content:before, .preloader-content:after{
19
- content: '';
20
- border: 1em solid var(--p-primary-color);
21
- border-radius: 50%;
22
- width: inherit;
23
- height: inherit;
24
- position: absolute;
25
- top: 0;
26
- left: 0;
27
- animation: loader 2s linear infinite;
28
- opacity: 0;
29
- }
30
-
31
- .preloader-content:before{
32
- animation-delay: 0.5s;
33
- }
34
-
35
- @keyframes loader{
36
- 0%{
37
- transform: scale(0);
38
- opacity: 0;
39
- }
40
- 50%{
41
- opacity: 1;
42
- }
43
- 100%{
44
- transform: scale(1);
45
- opacity: 0;
46
- }
47
- }
1
+ .preloader {
2
+ position: fixed;
3
+ z-index: 999999;
4
+ background: #edf1f5;
5
+ width: 100%;
6
+ height: 100%;
7
+ }
8
+ .preloader-content {
9
+ border: 0 solid transparent;
10
+ border-radius: 50%;
11
+ width: 150px;
12
+ height: 150px;
13
+ position: absolute;
14
+ top: calc(50vh - 75px);
15
+ left: calc(50vw - 75px);
16
+ }
17
+
18
+ .preloader-content:before, .preloader-content:after{
19
+ content: '';
20
+ border: 1em solid var(--p-primary-color);
21
+ border-radius: 50%;
22
+ width: inherit;
23
+ height: inherit;
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ animation: loader 2s linear infinite;
28
+ opacity: 0;
29
+ }
30
+
31
+ .preloader-content:before{
32
+ animation-delay: 0.5s;
33
+ }
34
+
35
+ @keyframes loader{
36
+ 0%{
37
+ transform: scale(0);
38
+ opacity: 0;
39
+ }
40
+ 50%{
41
+ opacity: 1;
42
+ }
43
+ 100%{
44
+ transform: scale(1);
45
+ opacity: 0;
46
+ }
47
+ }
package/styles/styles/layout/_responsive.scss CHANGED
@@ -1,102 +1,102 @@
1
- @use './_variables' as *;
2
-
3
- @media screen and (min-width: 1960px) {
4
- .layout-main, .landing-wrapper {
5
- width: 1504px;
6
- margin-left: auto !important;
7
- margin-right: auto !important;
8
- }
9
-
10
- }
11
-
12
- @media (min-width: 992px) {
13
- .layout-wrapper {
14
- &.layout-overlay {
15
- .layout-main-container {
16
- margin-left: 0;
17
- padding-left: 2rem;
18
- }
19
-
20
- .layout-sidebar {
21
- transform: translateX(-100%);
22
- left: 0;
23
- top: 0;
24
- height: 100vh;
25
- border-top-left-radius: 0;
26
- border-bottom-left-radius: 0;
27
- }
28
-
29
- &.layout-overlay-active {
30
- .layout-sidebar {
31
- transform: translateX(0);
32
- }
33
- }
34
- }
35
-
36
- &.layout-static {
37
- .layout-main-container {
38
- margin-left: 300px;
39
- }
40
-
41
- &.layout-static-inactive {
42
- .layout-sidebar {
43
- transform: translateX(-100%);
44
- left: 0;
45
- }
46
-
47
- .layout-main-container {
48
- margin-left: 0;
49
- padding-left: 2rem;
50
- }
51
- }
52
- }
53
-
54
- .layout-mask {
55
- display: none;
56
- }
57
- }
58
- }
59
-
60
- @media (max-width: 991px) {
61
- .blocked-scroll {
62
- overflow: hidden;
63
- }
64
-
65
- .layout-wrapper {
66
- .layout-main-container {
67
- margin-left: 0;
68
- padding-left: 2rem;
69
- }
70
-
71
- .layout-sidebar {
72
- transform: translateX(-100%);
73
- left: 0;
74
- top: 0;
75
- height: 100vh;
76
- border-top-left-radius: 0;
77
- border-bottom-left-radius: 0;
78
- }
79
-
80
- .layout-mask {
81
- display: none;
82
- position: fixed;
83
- top: 0;
84
- left: 0;
85
- z-index: 998;
86
- width: 100%;
87
- height: 100%;
88
- background-color: var(--maskbg);
89
- }
90
-
91
- &.layout-mobile-active {
92
- .layout-sidebar {
93
- transform: translateX(0);
94
- }
95
-
96
- .layout-mask {
97
- display: block;
98
- animation: fadein $transitionDuration;
99
- }
100
- }
101
- }
102
- }
1
+ @use './_variables' as *;
2
+
3
+ @media screen and (min-width: 1960px) {
4
+ .layout-main, .landing-wrapper {
5
+ width: 1504px;
6
+ margin-left: auto !important;
7
+ margin-right: auto !important;
8
+ }
9
+
10
+ }
11
+
12
+ @media (min-width: 992px) {
13
+ .layout-wrapper {
14
+ &.layout-overlay {
15
+ .layout-main-container {
16
+ margin-left: 0;
17
+ padding-left: 2rem;
18
+ }
19
+
20
+ .layout-sidebar {
21
+ transform: translateX(-100%);
22
+ left: 0;
23
+ top: 0;
24
+ height: 100vh;
25
+ border-top-left-radius: 0;
26
+ border-bottom-left-radius: 0;
27
+ }
28
+
29
+ &.layout-overlay-active {
30
+ .layout-sidebar {
31
+ transform: translateX(0);
32
+ }
33
+ }
34
+ }
35
+
36
+ &.layout-static {
37
+ .layout-main-container {
38
+ margin-left: 300px;
39
+ }
40
+
41
+ &.layout-static-inactive {
42
+ .layout-sidebar {
43
+ transform: translateX(-100%);
44
+ left: 0;
45
+ }
46
+
47
+ .layout-main-container {
48
+ margin-left: 0;
49
+ padding-left: 2rem;
50
+ }
51
+ }
52
+ }
53
+
54
+ .layout-mask {
55
+ display: none;
56
+ }
57
+ }
58
+ }
59
+
60
+ @media (max-width: 991px) {
61
+ .blocked-scroll {
62
+ overflow: hidden;
63
+ }
64
+
65
+ .layout-wrapper {
66
+ .layout-main-container {
67
+ margin-left: 0;
68
+ padding-left: 2rem;
69
+ }
70
+
71
+ .layout-sidebar {
72
+ transform: translateX(-100%);
73
+ left: 0;
74
+ top: 0;
75
+ height: 100vh;
76
+ border-top-left-radius: 0;
77
+ border-bottom-left-radius: 0;
78
+ }
79
+
80
+ .layout-mask {
81
+ display: none;
82
+ position: fixed;
83
+ top: 0;
84
+ left: 0;
85
+ z-index: 998;
86
+ width: 100%;
87
+ height: 100%;
88
+ background-color: var(--maskbg);
89
+ }
90
+
91
+ &.layout-mobile-active {
92
+ .layout-sidebar {
93
+ transform: translateX(0);
94
+ }
95
+
96
+ .layout-mask {
97
+ display: block;
98
+ animation: fadein $transitionDuration;
99
+ }
100
+ }
101
+ }
102
+ }
package/styles/styles/layout/_spiderly-controls.scss CHANGED
@@ -1,14 +1,14 @@
1
- @use './_variables' as *;
2
-
3
- .spiderly-tooltip-invalid.p-tooltip .p-tooltip-text {
4
- background-color: $errorColorLight !important;
5
- color: $errorColor !important;
6
- }
7
-
8
- .spiderly-tooltip-invalid.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
9
- border-bottom-color: $errorColorLight;
10
- }
11
-
12
- .spiderly-tooltip-invalid.p-tooltip.p-tooltip-top .p-tooltip-arrow {
13
- border-top-color: $errorColorLight;
14
- }
1
+ @use './_variables' as *;
2
+
3
+ .spiderly-tooltip-invalid.p-tooltip .p-tooltip-text {
4
+ background-color: $errorColorLight !important;
5
+ color: $errorColor !important;
6
+ }
7
+
8
+ .spiderly-tooltip-invalid.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
9
+ border-bottom-color: $errorColorLight;
10
+ }
11
+
12
+ .spiderly-tooltip-invalid.p-tooltip.p-tooltip-top .p-tooltip-arrow {
13
+ border-top-color: $errorColorLight;
14
+ }