spiderly 19.3.1 → 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 (29) hide show
  1. package/README.md +17 -17
  2. package/fesm2022/spiderly.mjs +85 -85
  3. package/fesm2022/spiderly.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/styles/components/info-card/info-card.component.scss +60 -60
  6. package/styles/components/layout/profile-avatar/profile-avatar.component.scss +8 -8
  7. package/styles/components/layout/topbar/topbar.component.scss +38 -38
  8. package/styles/components/spiderly-data-table/spiderly-data-table.component.scss +48 -48
  9. package/styles/components/spiderly-data-view/spiderly-data-view.component.scss +55 -55
  10. package/styles/components/spiderly-panels/panel-body/panel-body.component.scss +8 -8
  11. package/styles/components/spiderly-panels/panel-footer/panel-footer.component.scss +16 -16
  12. package/styles/components/spiderly-panels/spiderly-panel/spiderly-panel.component.scss +87 -87
  13. package/styles/controls/base-controls.scss +16 -16
  14. package/styles/controls/spiderly-checkbox/spiderly-checkbox.component.scss +22 -22
  15. package/styles/styles/layout/_content.scss +14 -14
  16. package/styles/styles/layout/_footer.scss +11 -11
  17. package/styles/styles/layout/_main.scss +34 -34
  18. package/styles/styles/layout/_menu.scss +137 -137
  19. package/styles/styles/layout/_mixins.scss +13 -13
  20. package/styles/styles/layout/_preloading.scss +47 -47
  21. package/styles/styles/layout/_responsive.scss +102 -102
  22. package/styles/styles/layout/_spiderly-controls.scss +14 -14
  23. package/styles/styles/layout/_topbar.scss +235 -235
  24. package/styles/styles/layout/_typography.scss +63 -63
  25. package/styles/styles/layout/_utils.scss +19 -19
  26. package/styles/styles/layout/_variables.scss +908 -908
  27. package/styles/styles/layout/layout.scss +11 -11
  28. package/styles/styles/shared.scss +483 -483
  29. package/styles/styles/styles.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spiderly",
3
- "version": "19.3.1",
3
+ "version": "19.4.0-preview.0",
4
4
  "author": "Filip Trivan",
5
5
  "license": "MIT",
6
6
  "description": "Spiderly Angular Library to use in combination with Spiderly.",
package/styles/components/info-card/info-card.component.scss CHANGED
@@ -1,61 +1,61 @@
1
- .info-card {
2
- background-color: var(--p-primary-100);
3
- position: relative;
4
- overflow: hidden;
5
-
6
- &__content {
7
- display: flex;
8
- align-items: center;
9
- gap: 21px;
10
- position: relative;
11
- z-index: 2;
12
- }
13
-
14
- &__icon {
15
- font-size: 21px;
16
- color: var(--p-primary-color);
17
- }
18
-
19
- &__header {
20
- display: flex;
21
- gap: 8px;
22
- color: var(--p-primary-color);
23
- font-weight: 600;
24
- text-align: left;
25
- font-size: 17.5px;
26
- }
27
-
28
- &__body {
29
- text-align: left;
30
- margin-top: 8px;
31
- }
32
-
33
- &__background-icon {
34
- text-align: center;
35
- transform: rotate(30deg);
36
- color: var(--p-primary-400);
37
- opacity: 0.2;
38
- position: absolute;
39
- overflow: hidden;
40
- right: -30px;
41
- top: -25px;
42
- z-index: 1;
43
-
44
- i {
45
- font-size: 270px;
46
- }
47
- }
48
- }
49
-
50
- ::ng-deep{
51
- html.dark .info-card {
52
- background-color: var(--p-primary-950);
53
-
54
- &__header {
55
- color: var(--p-primary-400);
56
- }
57
- &__icon {
58
- color: var(--p-primary-400);
59
- }
60
- }
1
+ .info-card {
2
+ background-color: var(--p-primary-100);
3
+ position: relative;
4
+ overflow: hidden;
5
+
6
+ &__content {
7
+ display: flex;
8
+ align-items: center;
9
+ gap: 21px;
10
+ position: relative;
11
+ z-index: 2;
12
+ }
13
+
14
+ &__icon {
15
+ font-size: 21px;
16
+ color: var(--p-primary-color);
17
+ }
18
+
19
+ &__header {
20
+ display: flex;
21
+ gap: 8px;
22
+ color: var(--p-primary-color);
23
+ font-weight: 600;
24
+ text-align: left;
25
+ font-size: 17.5px;
26
+ }
27
+
28
+ &__body {
29
+ text-align: left;
30
+ margin-top: 8px;
31
+ }
32
+
33
+ &__background-icon {
34
+ text-align: center;
35
+ transform: rotate(30deg);
36
+ color: var(--p-primary-400);
37
+ opacity: 0.2;
38
+ position: absolute;
39
+ overflow: hidden;
40
+ right: -30px;
41
+ top: -25px;
42
+ z-index: 1;
43
+
44
+ i {
45
+ font-size: 270px;
46
+ }
47
+ }
48
+ }
49
+
50
+ ::ng-deep{
51
+ html.dark .info-card {
52
+ background-color: var(--p-primary-950);
53
+
54
+ &__header {
55
+ color: var(--p-primary-400);
56
+ }
57
+ &__icon {
58
+ color: var(--p-primary-400);
59
+ }
60
+ }
61
61
  }
package/styles/components/layout/profile-avatar/profile-avatar.component.scss CHANGED
@@ -1,9 +1,9 @@
1
- .side-menu-profile-dialog {
2
- right: 26px;
3
- top: 60px;
4
- }
5
-
6
- .top-menu-profile-dialog {
7
- right: 0px;
8
- top: 40px;
1
+ .side-menu-profile-dialog {
2
+ right: 26px;
3
+ top: 60px;
4
+ }
5
+
6
+ .top-menu-profile-dialog {
7
+ right: 0px;
8
+ top: 40px;
9
9
  }
package/styles/components/layout/topbar/topbar.component.scss CHANGED
@@ -1,39 +1,39 @@
1
- .topbar-wrapper {
2
- background-color: var(--p-content-background);
3
- width: 100%;
4
- border-bottom: 1px solid var(--p-content-border-color);
5
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
6
- position: sticky;
7
- top: 0;
8
- left: 0;
9
- z-index: 1000;
10
- }
11
-
12
- .topbar {
13
- max-width: 1100px;
14
- margin: auto;
15
- }
16
-
17
- ::ng-deep{
18
- .show-hover-bg-on-root-items {
19
- .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
20
- background-color: transparent !important;
21
- }
22
- }
23
- .p-menubar-item-link {
24
- background-color: transparent !important;
25
- padding: 10px !important;
26
- font-size: 15px !important;
27
- .pi {
28
- font-size: 15px;
29
- }
30
- }
31
- .p-menubar-button {
32
- width: 35px !important;
33
- height: 35px !important;
34
- .p-icon {
35
- width: 16px;
36
- height: 16px;
37
- }
38
- }
1
+ .topbar-wrapper {
2
+ background-color: var(--p-content-background);
3
+ width: 100%;
4
+ border-bottom: 1px solid var(--p-content-border-color);
5
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
6
+ position: sticky;
7
+ top: 0;
8
+ left: 0;
9
+ z-index: 1000;
10
+ }
11
+
12
+ .topbar {
13
+ max-width: 1100px;
14
+ margin: auto;
15
+ }
16
+
17
+ ::ng-deep{
18
+ .show-hover-bg-on-root-items {
19
+ .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
20
+ background-color: transparent !important;
21
+ }
22
+ }
23
+ .p-menubar-item-link {
24
+ background-color: transparent !important;
25
+ padding: 10px !important;
26
+ font-size: 15px !important;
27
+ .pi {
28
+ font-size: 15px;
29
+ }
30
+ }
31
+ .p-menubar-button {
32
+ width: 35px !important;
33
+ height: 35px !important;
34
+ .p-icon {
35
+ width: 16px;
36
+ height: 16px;
37
+ }
38
+ }
39
39
  }
package/styles/components/spiderly-data-table/spiderly-data-table.component.scss CHANGED
@@ -1,49 +1,49 @@
1
- .table-header {
2
- display: flex;
3
- justify-content: space-between;
4
- align-items: center;
5
- }
6
-
7
- @media (max-width: 640px) {
8
- .table-header {
9
- display: flex;
10
- flex-direction: column;
11
- align-items: start;
12
- gap: 14px;
13
- }
14
- }
15
-
16
- .spiderly-table {
17
- .p-paginator {
18
- padding: 1rem;
19
- }
20
- .p-paginator-left-content {
21
- @media (min-width: 1400px) {
22
- position: absolute;
23
- padding: 14px;
24
- left: 0;
25
- }
26
- }
27
- .p-paginator-right-content {
28
- @media (min-width: 1400px) {
29
- position: absolute;
30
- padding: 14px;
31
- right: 0;
32
- }
33
- }
34
- }
35
-
36
- :host {
37
- ::ng-deep {
38
- .p-datatable-thead{
39
- position: unset !important;
40
- }
41
- .p-datatable-header{
42
- border-radius: 6px 6px 0 0;
43
- }
44
- .p-datatable {
45
- border-radius: var(--p-content-border-radius);
46
- border: 1px solid var(--p-datatable-border-color);
47
- }
48
- }
1
+ .table-header {
2
+ display: flex;
3
+ justify-content: space-between;
4
+ align-items: center;
5
+ }
6
+
7
+ @media (max-width: 640px) {
8
+ .table-header {
9
+ display: flex;
10
+ flex-direction: column;
11
+ align-items: start;
12
+ gap: 14px;
13
+ }
14
+ }
15
+
16
+ .spiderly-table {
17
+ .p-paginator {
18
+ padding: 1rem;
19
+ }
20
+ .p-paginator-left-content {
21
+ @media (min-width: 1400px) {
22
+ position: absolute;
23
+ padding: 14px;
24
+ left: 0;
25
+ }
26
+ }
27
+ .p-paginator-right-content {
28
+ @media (min-width: 1400px) {
29
+ position: absolute;
30
+ padding: 14px;
31
+ right: 0;
32
+ }
33
+ }
34
+ }
35
+
36
+ :host {
37
+ ::ng-deep {
38
+ .p-datatable-thead{
39
+ position: unset !important;
40
+ }
41
+ .p-datatable-header{
42
+ border-radius: 6px 6px 0 0;
43
+ }
44
+ .p-datatable {
45
+ border-radius: var(--p-content-border-radius);
46
+ border: 1px solid var(--p-datatable-border-color);
47
+ }
48
+ }
49
49
  }
package/styles/components/spiderly-data-view/spiderly-data-view.component.scss CHANGED
@@ -1,56 +1,56 @@
1
-
2
- ::ng-deep{
3
- .p-datatable-tbody {
4
- display: flex;
5
- flex-direction: column;
6
- gap: 18px;
7
- }
8
-
9
- .p-datatable-header {
10
- margin-bottom: 36px;
11
- border: 0 !important;
12
- padding: 0 !important;
13
- background-color: transparent !important;
14
- }
15
-
16
- .p-paginator {
17
- padding: 18px 9px 0px 9px !important;
18
- }
19
-
20
- .p-fluid {
21
- width: 100% !important;
22
- }
23
-
24
- .p-inputtext {
25
- width: 100% !important;
26
- }
27
-
28
- .p-inputnumber {
29
- width: 100% !important;
30
- }
31
-
32
- .p-datepicker {
33
- width: 100% !important;
34
- }
35
- }
36
-
37
-
38
- .data-view-grid {
39
- display: grid;
40
- gap: 18px;
41
- grid-template-columns: 1fr 1fr 1fr;
42
- margin-bottom: 18px;
43
- }
44
-
45
- @media (max-width: 1080px) {
46
- .data-view-grid {
47
- gap: 12px;
48
- grid-template-columns: 1fr 1fr;
49
- }
50
- }
51
-
52
- @media (max-width: 500px) {
53
- .data-view-grid {
54
- grid-template-columns: 1fr;
55
- }
1
+
2
+ ::ng-deep{
3
+ .p-datatable-tbody {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: 18px;
7
+ }
8
+
9
+ .p-datatable-header {
10
+ margin-bottom: 36px;
11
+ border: 0 !important;
12
+ padding: 0 !important;
13
+ background-color: transparent !important;
14
+ }
15
+
16
+ .p-paginator {
17
+ padding: 18px 9px 0px 9px !important;
18
+ }
19
+
20
+ .p-fluid {
21
+ width: 100% !important;
22
+ }
23
+
24
+ .p-inputtext {
25
+ width: 100% !important;
26
+ }
27
+
28
+ .p-inputnumber {
29
+ width: 100% !important;
30
+ }
31
+
32
+ .p-datepicker {
33
+ width: 100% !important;
34
+ }
35
+ }
36
+
37
+
38
+ .data-view-grid {
39
+ display: grid;
40
+ gap: 18px;
41
+ grid-template-columns: 1fr 1fr 1fr;
42
+ margin-bottom: 18px;
43
+ }
44
+
45
+ @media (max-width: 1080px) {
46
+ .data-view-grid {
47
+ gap: 12px;
48
+ grid-template-columns: 1fr 1fr;
49
+ }
50
+ }
51
+
52
+ @media (max-width: 500px) {
53
+ .data-view-grid {
54
+ grid-template-columns: 1fr;
55
+ }
56
56
  }
package/styles/components/spiderly-panels/panel-body/panel-body.component.scss CHANGED
@@ -1,9 +1,9 @@
1
- .non-grid-panel-bottom-padding{
2
- padding-bottom: 14px;
3
- }
4
-
5
- @media (max-width: 600px) {
6
- .non-grid-panel-bottom-padding{
7
- padding-bottom: 0px;
8
- }
1
+ .non-grid-panel-bottom-padding{
2
+ padding-bottom: 14px;
3
+ }
4
+
5
+ @media (max-width: 600px) {
6
+ .non-grid-panel-bottom-padding{
7
+ padding-bottom: 0px;
8
+ }
9
9
  }
package/styles/components/spiderly-panels/panel-footer/panel-footer.component.scss CHANGED
@@ -1,17 +1,17 @@
1
- .spiderly-panel-footer{
2
- display: flex;
3
- align-items: center;
4
- justify-content: space-between;
5
- gap: 10px;
6
- border-top: 1px solid var(--p-content-border-color);
7
- border-bottom-right-radius: var(--p-content-border-radius);
8
- border-bottom-left-radius: var(--p-content-border-radius);
9
- padding: 18px;
10
- }
11
-
12
- .buttons-wrapper{
13
- gap: 0.5rem;
14
- display: flex;
15
- align-items: center;
16
- flex-wrap: wrap;
1
+ .spiderly-panel-footer{
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: space-between;
5
+ gap: 10px;
6
+ border-top: 1px solid var(--p-content-border-color);
7
+ border-bottom-right-radius: var(--p-content-border-radius);
8
+ border-bottom-left-radius: var(--p-content-border-radius);
9
+ padding: 18px;
10
+ }
11
+
12
+ .buttons-wrapper{
13
+ gap: 0.5rem;
14
+ display: flex;
15
+ align-items: center;
16
+ flex-wrap: wrap;
17
17
  }
package/styles/components/spiderly-panels/spiderly-panel/spiderly-panel.component.scss CHANGED
@@ -1,88 +1,88 @@
1
- :host {
2
- ::ng-deep {
3
- .spiderly-panel{
4
- .p-panel-content{
5
- padding: 0;
6
- }
7
- }
8
- .p-panel{
9
- overflow: hidden;
10
- }
11
- .p-panel-icons{
12
- display: flex;
13
- align-items: center;
14
- }
15
-
16
- .panel-header-cursor-pointer {
17
- .p-panel-header {
18
- cursor: pointer !important;
19
- }
20
- }
21
- }
22
- }
23
-
24
- .multiple-panel-first-without-header{
25
- .p-panel {
26
- border-bottom-left-radius: 0px;
27
- border-bottom-right-radius: 0px;
28
- border-top: 1px solid var(--surface-border);
29
- border-top-left-radius: var(--p-content-border-radius);
30
- border-top-right-radius: var(--p-content-border-radius);
31
- border-bottom: none;
32
- }
33
- }
34
-
35
- .multiple-panel-middle-without-header{
36
- .p-panel {
37
- border-bottom-left-radius: 0px;
38
- border-bottom-right-radius: 0px;
39
- border-top: 1px solid var(--surface-border);
40
- border-top-left-radius: 0px;
41
- border-top-right-radius: 0px;
42
- border-bottom: none;
43
- }
44
- }
45
-
46
- .multiple-panel-last-without-header{
47
- .p-panel {
48
- border-bottom-left-radius: var(--p-content-border-radius);
49
- border-bottom-right-radius: var(--p-content-border-radius);
50
- border-top: 1px solid var(--surface-border);
51
- border-top-left-radius: 0px;
52
- border-top-right-radius: 0px;
53
- }
54
- }
55
-
56
- .multiple-panel-first{
57
- .p-panel {
58
- border-bottom-left-radius: 0px;
59
- border-bottom-right-radius: 0px;
60
- border-bottom: none;
61
- }
62
- }
63
-
64
- .panel-border{
65
- .p-panel {
66
- border-bottom-left-radius: var(--p-content-border-radius);
67
- border-bottom-right-radius: var(--p-content-border-radius);
68
- border-bottom: 1px solid var(--surface-border);
69
- }
70
- }
71
-
72
- .multiple-panel-middle {
73
- .p-panel {
74
- border-radius: 0px;
75
- border-bottom: none;
76
- }
77
- }
78
-
79
- .multiple-panel-last {
80
- .p-panel {
81
- border-top-left-radius: 0px;
82
- border-top-right-radius: 0px;
83
- }
84
- }
85
-
86
- .panel-body-wrapper{
87
- padding: 18px;
1
+ :host {
2
+ ::ng-deep {
3
+ .spiderly-panel{
4
+ .p-panel-content{
5
+ padding: 0;
6
+ }
7
+ }
8
+ .p-panel{
9
+ overflow: hidden;
10
+ }
11
+ .p-panel-icons{
12
+ display: flex;
13
+ align-items: center;
14
+ }
15
+
16
+ .panel-header-cursor-pointer {
17
+ .p-panel-header {
18
+ cursor: pointer !important;
19
+ }
20
+ }
21
+ }
22
+ }
23
+
24
+ .multiple-panel-first-without-header{
25
+ .p-panel {
26
+ border-bottom-left-radius: 0px;
27
+ border-bottom-right-radius: 0px;
28
+ border-top: 1px solid var(--surface-border);
29
+ border-top-left-radius: var(--p-content-border-radius);
30
+ border-top-right-radius: var(--p-content-border-radius);
31
+ border-bottom: none;
32
+ }
33
+ }
34
+
35
+ .multiple-panel-middle-without-header{
36
+ .p-panel {
37
+ border-bottom-left-radius: 0px;
38
+ border-bottom-right-radius: 0px;
39
+ border-top: 1px solid var(--surface-border);
40
+ border-top-left-radius: 0px;
41
+ border-top-right-radius: 0px;
42
+ border-bottom: none;
43
+ }
44
+ }
45
+
46
+ .multiple-panel-last-without-header{
47
+ .p-panel {
48
+ border-bottom-left-radius: var(--p-content-border-radius);
49
+ border-bottom-right-radius: var(--p-content-border-radius);
50
+ border-top: 1px solid var(--surface-border);
51
+ border-top-left-radius: 0px;
52
+ border-top-right-radius: 0px;
53
+ }
54
+ }
55
+
56
+ .multiple-panel-first{
57
+ .p-panel {
58
+ border-bottom-left-radius: 0px;
59
+ border-bottom-right-radius: 0px;
60
+ border-bottom: none;
61
+ }
62
+ }
63
+
64
+ .panel-border{
65
+ .p-panel {
66
+ border-bottom-left-radius: var(--p-content-border-radius);
67
+ border-bottom-right-radius: var(--p-content-border-radius);
68
+ border-bottom: 1px solid var(--surface-border);
69
+ }
70
+ }
71
+
72
+ .multiple-panel-middle {
73
+ .p-panel {
74
+ border-radius: 0px;
75
+ border-bottom: none;
76
+ }
77
+ }
78
+
79
+ .multiple-panel-last {
80
+ .p-panel {
81
+ border-top-left-radius: 0px;
82
+ border-top-right-radius: 0px;
83
+ }
84
+ }
85
+
86
+ .panel-body-wrapper{
87
+ padding: 18px;
88
88
  }