@dative-gpi/foundation-shared-components 1.0.163 → 1.0.164-card

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 (28) hide show
  1. package/components/FSButton.vue +43 -89
  2. package/components/FSCard.vue +201 -100
  3. package/components/FSCardPlaceholder.vue +29 -25
  4. package/components/FSChip.vue +54 -127
  5. package/components/FSChipGroup.vue +3 -3
  6. package/components/FSClickable.vue +24 -326
  7. package/components/FSDialogContent.vue +35 -28
  8. package/components/FSEditImageUI.vue +19 -30
  9. package/components/FSImageCard.vue +4 -4
  10. package/components/FSLink.vue +1 -13
  11. package/components/FSOptionItem.vue +4 -4
  12. package/components/FSOptionsMenu.vue +6 -6
  13. package/components/FSPlayButtons.vue +8 -8
  14. package/components/FSRouterLink.vue +70 -14
  15. package/components/agenda/FSAgendaHorizontalEvent.vue +4 -4
  16. package/components/agenda/FSAgendaVerticalEvent.vue +4 -4
  17. package/components/deviceOrganisations/FSStatusRichCard.vue +2 -7
  18. package/components/lists/FSFilterButton.vue +11 -8
  19. package/components/lists/FSHeaderButton.vue +6 -3
  20. package/components/tiles/FSTile.vue +31 -65
  21. package/models/index.ts +2 -1
  22. package/models/variants.ts +7 -0
  23. package/package.json +4 -4
  24. package/styles/components/fs_button.scss +2 -7
  25. package/styles/components/fs_card.scss +75 -4
  26. package/styles/components/fs_chip.scss +0 -29
  27. package/styles/components/index.scss +0 -1
  28. package/styles/components/fs_clickable.scss +0 -69
package/styles/components/fs_chip.scss CHANGED
@@ -1,32 +1,3 @@
1
- .fs-chip-container {
2
- text-decoration: none;
3
- }
4
-
5
1
  .fs-chip {
6
2
  user-select: none;
7
- transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
8
- background-color: var(--fs-chip-background-color) !important;
9
- border: 1px solid var(--fs-chip-border-color) !important;
10
- height: var(--fs-chip-height) !important;
11
- color: var(--fs-chip-color) !important;
12
- border-radius: 50px !important;
13
- padding: 2px 20px !important;
14
- }
15
-
16
- .fs-chip-clickable {
17
- cursor: pointer !important;
18
-
19
- &:active {
20
- background-color: var(--fs-chip-active-background-color) !important;
21
- border-color: var(--fs-chip-active-border-color) !important;
22
- color: var(--fs-chip-active-color) !important;
23
- }
24
-
25
- @include clickscreen {
26
- &:hover {
27
- background-color: var(--fs-chip-hover-background-color) !important;
28
- border-color: var(--fs-chip-hover-border-color) !important;
29
- color: var(--fs-chip-hover-color) !important;
30
- }
31
- }
32
3
  }
package/styles/components/index.scss CHANGED
@@ -12,7 +12,6 @@
12
12
  @import "fs_card.scss";
13
13
  @import "fs_checkbox.scss";
14
14
  @import "fs_chip.scss";
15
- @import "fs_clickable.scss";
16
15
  @import "fs_clock.scss";
17
16
  @import "fs_col.scss";
18
17
  @import "fs_color_field.scss";
package/styles/components/fs_clickable.scss DELETED
@@ -1,69 +0,0 @@
1
- .fs-clickable {
2
- border: var(--fs-clickable-border-size) var(--fs-clickable-border-style) !important;
3
- border-radius: var(--fs-clickable-border-radius) !important;
4
- transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
5
- cursor: pointer;
6
-
7
- background-color: var(--fs-clickable-background-color) !important;
8
- border-color: var(--fs-clickable-border-color) !important;
9
- color: var(--fs-clickable-color) !important;
10
-
11
- &.fs-clickable-disabled {
12
- cursor: default;
13
- }
14
-
15
- &:not(.fs-clickable-disabled):active:not(:has( .fs-stopclick:hover)) {
16
- background-color: var(--fs-clickable-active-background-color) !important;
17
- border-color: var(--fs-clickable-active-border-color) !important;
18
- color: var(--fs-clickable-active-color) !important;
19
-
20
- & .fs-card-clickable {
21
- transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
22
- background-color: var(--fs-clickable-active-background-color);
23
- }
24
- }
25
-
26
- @include clickscreen {
27
- &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
28
- background-color: var(--fs-clickable-hover-background-color) !important;
29
- border-color: var(--fs-clickable-hover-border-color) !important;
30
- color: var(--fs-clickable-hover-color) !important;
31
-
32
- & .fs-card-clickable {
33
- transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
34
- background-color: var(--fs-clickable-hover-background-color);
35
- }
36
- }
37
- }
38
- }
39
-
40
- a:has(.fs-clickable) {
41
- position: relative !important;
42
- text-decoration: none;
43
- padding: 0 !important;
44
- height: var(--fs-clickable-height);
45
- width: var(--fs-clickable-width);
46
- }
47
-
48
- button:has(.fs-clickable) {
49
- position: relative;
50
- height: var(--fs-clickable-height);
51
- width: var(--fs-clickable-width);
52
- }
53
-
54
- .fs-clickable-load {
55
- cursor: default;
56
- position: absolute !important;
57
- height: 100% !important;
58
- width: 100% !important;
59
- left: 0;
60
- top: 0;
61
-
62
- & > svg {
63
- height: 24px !important;
64
- }
65
- }
66
-
67
- *:has(~ .fs-clickable-load) > * {
68
- opacity: 0;
69
- }