@dative-gpi/foundation-shared-components 1.0.189-update-fs-card → 1.0.190-feat-time-normalization

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/components/FSButton.vue +89 -43
  2. package/components/FSCard.vue +100 -201
  3. package/components/FSCardPlaceholder.vue +25 -29
  4. package/components/FSChip.vue +127 -54
  5. package/components/FSChipGroup.vue +3 -3
  6. package/components/FSClickable.vue +326 -24
  7. package/components/FSDialogContent.vue +28 -35
  8. package/components/FSDialogFormBody.vue +1 -0
  9. package/components/FSEditImageUI.vue +30 -19
  10. package/components/FSImageCard.vue +4 -4
  11. package/components/FSLink.vue +13 -1
  12. package/components/FSOptionItem.vue +4 -4
  13. package/components/FSOptionsMenu.vue +6 -6
  14. package/components/FSPlayButtons.vue +8 -8
  15. package/components/FSRouterLink.vue +14 -84
  16. package/components/agenda/FSAgendaHorizontalEvent.vue +4 -4
  17. package/components/agenda/FSAgendaVerticalEvent.vue +4 -4
  18. package/components/deviceOrganisations/FSStatusRichCard.vue +7 -2
  19. package/components/lists/FSFilterButton.vue +8 -11
  20. package/components/lists/FSHeaderButton.vue +3 -6
  21. package/components/tiles/FSTile.vue +65 -31
  22. package/models/index.ts +1 -2
  23. package/package.json +4 -4
  24. package/styles/components/fs_button.scss +7 -2
  25. package/styles/components/fs_card.scss +4 -75
  26. package/styles/components/fs_chip.scss +29 -0
  27. package/styles/components/fs_clickable.scss +69 -0
  28. package/styles/components/index.scss +1 -0
  29. package/models/variants.ts +0 -7
package/styles/components/fs_chip.scss CHANGED
@@ -1,3 +1,32 @@
1
+ .fs-chip-container {
2
+ text-decoration: none;
3
+ }
4
+
1
5
  .fs-chip {
2
6
  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
+ }
3
32
  }
package/styles/components/fs_clickable.scss ADDED
@@ -0,0 +1,69 @@
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
+ }
package/styles/components/index.scss CHANGED
@@ -12,6 +12,7 @@
12
12
  @import "fs_card.scss";
13
13
  @import "fs_checkbox.scss";
14
14
  @import "fs_chip.scss";
15
+ @import "fs_clickable.scss";
15
16
  @import "fs_clock.scss";
16
17
  @import "fs_col.scss";
17
18
  @import "fs_color_field.scss";
package/models/variants.ts DELETED
@@ -1,7 +0,0 @@
1
- export type CardVariant = "background" | "standard" | "full" | "gradient";
2
- export enum CardVariants {
3
- Background = "background",
4
- Standard = "standard",
5
- Full = "full",
6
- Gradient = "gradient"
7
- }