@jupyter/chat 0.16.0 → 0.18.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.
package/style/input.css CHANGED
@@ -3,34 +3,9 @@
3
3
  * Distributed under the terms of the Modified BSD License.
4
4
  */
5
5
 
6
- .jp-chat-input-toolbar {
7
- gap: 1px;
8
- }
9
-
10
- .jp-chat-input-toolbar .jp-chat-tooltipped-wrap button {
11
- border-radius: 0;
12
- min-width: unset;
13
- }
14
-
15
- .jp-chat-input-toolbar .jp-chat-tooltipped-wrap:first-child button {
16
- border-top-left-radius: 2px;
17
- border-bottom-left-radius: 2px;
18
- }
19
-
20
- .jp-chat-input-toolbar .jp-chat-tooltipped-wrap:last-child button {
21
- border-top-right-radius: 2px;
22
- border-bottom-right-radius: 2px;
23
- }
24
-
25
- .jp-chat-input-toolbar .jp-chat-attach-button,
26
- .jp-chat-input-toolbar .jp-chat-cancel-button {
27
- padding: 4px;
28
- }
29
-
30
- .jp-chat-input-toolbar .jp-chat-send-include-opener {
31
- padding: 4px 0;
32
- }
33
-
6
+ /*
7
+ * INPUT CONTAINER (component and toolbar)
8
+ */
34
9
  .jp-chat-input-container {
35
10
  position: relative;
36
11
  transition: all 150ms ease;
@@ -38,20 +13,12 @@
38
13
  flex-direction: column;
39
14
  justify-content: center;
40
15
  min-height: 56px;
41
- padding: 8px 0;
42
- }
43
-
44
- .jp-chat-input-container .MuiTextField-root {
45
- padding-bottom: 8px;
46
16
  }
47
17
 
48
18
  .jp-chat-input-container.jp-chat-drag-hover::after {
49
19
  content: '';
50
20
  position: absolute;
51
- top: 0;
52
- left: 0;
53
- right: 0;
54
- bottom: 0;
21
+ inset: 0;
55
22
  background: rgb(33 150 243 / 10%);
56
23
  border: 2px dashed var(--jp-brand-color1);
57
24
  border-radius: 4px;
@@ -74,3 +41,65 @@
74
41
  border-radius: 3px;
75
42
  white-space: nowrap;
76
43
  }
44
+
45
+ /*
46
+ * INPUT TEXT FIELD
47
+ */
48
+ .jp-chat-input-component {
49
+ border: 1px solid var(--jp-ui-font-color3);
50
+ border-radius: 4px;
51
+ }
52
+
53
+ .jp-chat-input-textfield .jp-chat-input-component::before,
54
+ .jp-chat-input-textfield .jp-chat-input-component::after {
55
+ border-bottom: unset !important;
56
+ }
57
+
58
+ /* Use the textfield label below the input. */
59
+ .jp-chat-input-textfield .jp-chat-input-component {
60
+ padding-top: 8px !important;
61
+ padding-bottom: 15px !important;
62
+ background-color: unset !important;
63
+ }
64
+
65
+ .jp-chat-input-textfield label {
66
+ top: unset;
67
+ left: unset;
68
+ bottom: 0;
69
+ right: 0;
70
+ color: var(--jp-ui-font-color2) !important;
71
+ }
72
+
73
+ /*
74
+ * INPUT TOOLBAR
75
+ */
76
+ .jp-chat-input-toolbar {
77
+ gap: 1px;
78
+ align-self: flex-end;
79
+ min-height: unset !important;
80
+ margin-bottom: 4px;
81
+ }
82
+
83
+ .jp-chat-input-toolbar .jp-chat-tooltipped-wrap button {
84
+ border-radius: 0;
85
+ min-width: unset;
86
+ }
87
+
88
+ .jp-chat-input-toolbar .jp-chat-tooltipped-wrap:first-child button {
89
+ border-top-left-radius: 2px;
90
+ border-bottom-left-radius: 2px;
91
+ }
92
+
93
+ .jp-chat-input-toolbar .jp-chat-tooltipped-wrap:last-child button {
94
+ border-top-right-radius: 2px;
95
+ border-bottom-right-radius: 2px;
96
+ }
97
+
98
+ .jp-chat-input-toolbar .jp-chat-attach-button,
99
+ .jp-chat-input-toolbar .jp-chat-cancel-button {
100
+ padding: 4px;
101
+ }
102
+
103
+ .jp-chat-input-toolbar .jp-chat-send-include-opener {
104
+ padding: 4px 0;
105
+ }