@seamly/web-ui 21.0.5-beta.1 → 21.0.5-beta.2

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 (16) hide show
  1. package/build/dist/lib/index.debug.js +1 -1
  2. package/build/dist/lib/index.debug.min.js +1 -1
  3. package/build/dist/lib/index.js +1 -1
  4. package/build/dist/lib/index.min.js +1 -1
  5. package/build/dist/lib/standalone.js +1 -1
  6. package/build/dist/lib/standalone.min.js +1 -1
  7. package/build/dist/lib/style-guide.js +1 -1
  8. package/build/dist/lib/style-guide.min.js +1 -1
  9. package/build/dist/lib/styles.css +1 -1
  10. package/build/dist/lib/utils.js +1 -1
  11. package/build/dist/lib/utils.min.js +1 -1
  12. package/package.json +1 -1
  13. package/src/stylesheets/5-components/_chat-status.scss +37 -26
  14. package/src/stylesheets/5-components/_conversation.scss +33 -0
  15. package/src/stylesheets/styles.scss +0 -1
  16. package/src/stylesheets/5-components/_unread-messages.scss +0 -33
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seamly/web-ui",
3
- "version": "21.0.5-beta.1",
3
+ "version": "21.0.5-beta.2",
4
4
  "main": "build/dist/lib/index.js",
5
5
  "types": "build/src/javascripts/index.d.ts",
6
6
  "module": "",
package/src/stylesheets/5-components/_chat-status.scss CHANGED
@@ -1,7 +1,10 @@
1
1
  .#{$n}-chat-status {
2
2
  display: flex;
3
- align-items: flex-start;
4
- gap: $spacer * 0.5;
3
+ z-index: 1;
4
+ top: $spacer;
5
+ right: 0;
6
+ left: 0;
7
+ align-items: center;
5
8
  width: 100%;
6
9
  min-height: $buttonsize;
7
10
  margin: $spacer;
@@ -11,31 +14,44 @@
11
14
  box-shadow: $boxshadow;
12
15
 
13
16
  &--condensed {
14
- align-items: center;
15
- padding: $spacer * 0.25 $spacer * 0.5 $spacer * 0.25 $spacer * 0.25;
17
+ padding: $spacer * 0.25;
18
+
19
+ .#{$n}-chat-status__title {
20
+ padding-left: $spacer * 0.25;
21
+ }
22
+
23
+ .#{$n}-chat-status__close {
24
+ min-height: $buttonsize-small;
25
+ padding-right: $spacer * 0.25;
26
+ }
16
27
  }
17
28
  }
18
29
 
19
- .#{$n}-chat--layout-window .#{$n}-chat-status {
20
- margin-right: $buttonsize + $spacer * 2;
30
+ .#{$n}-chat--layout-window {
31
+ .#{$n}-chat-status {
32
+ margin-right: $buttonsize + $spacer * 2;
33
+ }
21
34
  }
22
35
 
23
36
  .#{$n}-chat-status__body {
24
37
  display: flex;
25
- flex: 1 1 auto;
26
- flex-wrap: wrap;
27
- gap: $spacer * 0.5;
28
- align-items: center;
38
+ flex-direction: column;
39
+ flex-grow: 1;
40
+ align-items: flex-start;
29
41
  justify-content: flex-start;
30
42
  }
31
43
 
32
44
  .#{$n}-chat-status__title {
33
45
  display: flex;
34
- margin: 0;
46
+ margin: 0 $spacer * 0.5 0 0;
35
47
  color: $grey-e;
36
48
  font-size: $fontsize-medium;
37
49
  font-weight: $fontweight-bold;
38
50
  line-height: 1.25;
51
+
52
+ + .#{$n}-chat-status__button {
53
+ margin-top: $spacer * 0.5;
54
+ }
39
55
  }
40
56
 
41
57
  .#{$n}-chat-status .#{$n}-icon {
@@ -51,33 +67,28 @@
51
67
  min-height: $buttonsize-small;
52
68
  padding: $spacer * 0.25 $spacer * 0.5;
53
69
  color: $white;
54
- }
55
70
 
56
- .#{$n}-chat-status__button .#{$n}-icon {
57
- svg {
58
- width: 100%;
59
- height: 100%;
71
+ .#{$n}-icon {
72
+ margin-right: $spacer * 0.25;
73
+
74
+ svg {
75
+ width: 100%;
76
+ height: 100%;
60
77
 
61
- path {
62
- fill: $white;
78
+ path {
79
+ fill: $white;
80
+ }
63
81
  }
64
82
  }
65
83
  }
66
84
 
67
85
  .#{$n}-chat-status__close {
68
86
  display: inline-flex;
69
- flex: 0 0 auto;
87
+ align-self: flex-start;
70
88
  justify-content: center;
71
- min-width: $buttonsize-small - $spacer * 0.5;
72
89
  min-height: $buttonsize-small - $spacer * 0.5;
73
90
  color: $brand3;
74
91
 
75
- &:has(.#{$n}-icon) {
76
- flex: 0 0 $buttonsize-small - $spacer * 0.5;
77
- width: $buttonsize-small - $spacer * 0.5;
78
- padding: 0;
79
- }
80
-
81
92
  .#{$n}-icon {
82
93
  align-self: center;
83
94
  }
package/src/stylesheets/5-components/_conversation.scss CHANGED
@@ -67,3 +67,36 @@
67
67
  }
68
68
  }
69
69
 
70
+ .#{$n}-unread-messages {
71
+ display: none;
72
+ position: absolute;
73
+ bottom: 0;
74
+ align-items: center;
75
+ justify-content: center;
76
+ margin: $spacer;
77
+ opacity: 0;
78
+
79
+ > .#{$n}-button {
80
+ display: flex;
81
+ align-items: center;
82
+
83
+ > .#{$n}-icon {
84
+ width: $spacer;
85
+ height: $spacer;
86
+ margin-left: calc($spacer / 2);
87
+
88
+ svg path {
89
+ fill: $white;
90
+ }
91
+ }
92
+ }
93
+ }
94
+
95
+ .#{$n}-unread-messages.#{$n}-transition--visible {
96
+ display: flex;
97
+ }
98
+
99
+ .#{$n}-unread-messages.#{$n}-transition--in {
100
+ transition: opacity $transition 1000ms;
101
+ opacity: 1;
102
+ }
package/src/stylesheets/styles.scss CHANGED
@@ -45,7 +45,6 @@
45
45
  @import '5-components/window-open-button';
46
46
  @import '5-components/pre-chat-messages';
47
47
  @import '5-components/unstarted';
48
- @import '5-components/unread-messages';
49
48
  }
50
49
 
51
50
  .#{$n}-app,
package/src/stylesheets/5-components/_unread-messages.scss DELETED
@@ -1,33 +0,0 @@
1
- .#{$n}-unread-messages {
2
- display: none;
3
- position: absolute;
4
- bottom: $spacer;
5
- align-items: center;
6
- justify-content: center;
7
- margin: 0;
8
- opacity: 0;
9
-
10
- &.#{$n}-transition--visible {
11
- display: flex;
12
- }
13
-
14
- &.#{$n}-transition--in {
15
- transition: opacity $transition 1s;
16
- opacity: 1;
17
- }
18
-
19
- .#{$n}-button {
20
- display: flex;
21
- align-items: center;
22
- gap: $spacer * 0.5;
23
- }
24
-
25
- .#{$n}-icon {
26
- width: $spacer;
27
- height: $spacer;
28
-
29
- svg path {
30
- fill: $white;
31
- }
32
- }
33
- }