Skip to content

Commit e60dad5

Browse files
authored
refactor(chat): Flatten rules in chat.scss (#1779)
1 parent f6b92d8 commit e60dad5

File tree

3 files changed

+65
-65
lines changed

3 files changed

+65
-65
lines changed

js/chat/chat.scss

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -14,74 +14,74 @@ shiny-chat-container {
1414
p:last-child {
1515
margin-bottom: 0;
1616
}
17+
}
1718

18-
shiny-chat-messages {
19-
display: flex;
20-
flex-direction: column;
21-
gap: 2rem;
22-
23-
shiny-chat-message {
24-
display: grid;
25-
grid-template-columns: auto minmax(0, 1fr);
26-
gap: 1rem;
27-
> * {
28-
height: fit-content;
29-
}
30-
.message-icon {
31-
border-radius: 50%;
32-
border: var(--shiny-chat-border);
33-
> * {
34-
margin: 0.5rem;
35-
height: 20px;
36-
width: 20px;
37-
}
38-
}
39-
/* Vertically center the 2nd column (message content) */
40-
.message-content {
41-
align-self: center;
42-
}
43-
}
19+
shiny-chat-messages {
20+
display: flex;
21+
flex-direction: column;
22+
gap: 2rem;
23+
}
4424

45-
/* Align the user message to the right */
46-
shiny-user-message {
47-
align-self: flex-end;
48-
padding: 0.75rem 1rem;
49-
border-radius: 10px;
50-
background-color: var(--shiny-chat-user-message-bg);
51-
max-width: 100%;
25+
shiny-chat-message {
26+
display: grid;
27+
grid-template-columns: auto minmax(0, 1fr);
28+
gap: 1rem;
29+
> * {
30+
height: fit-content;
31+
}
32+
.message-icon {
33+
border-radius: 50%;
34+
border: var(--shiny-chat-border);
35+
> * {
36+
margin: 0.5rem;
37+
height: 20px;
38+
width: 20px;
5239
}
5340
}
41+
/* Vertically center the 2nd column (message content) */
42+
.message-content {
43+
align-self: center;
44+
}
45+
}
5446

55-
shiny-chat-input {
56-
margin-top: auto;
57-
position: sticky;
58-
background-color: var(--bs-body-bg, white);
59-
bottom: 0;
60-
textarea {
61-
--bs-border-radius: 26px;
62-
resize: none;
63-
padding-right: 36px !important;
64-
max-height: 175px;
65-
&::placeholder {
66-
color: var(--bs-gray-600, #707782) !important;
67-
}
47+
/* Align the user message to the right */
48+
shiny-user-message {
49+
align-self: flex-end;
50+
padding: 0.75rem 1rem;
51+
border-radius: 10px;
52+
background-color: var(--shiny-chat-user-message-bg);
53+
max-width: 100%;
54+
}
55+
56+
shiny-chat-input {
57+
margin-top: auto;
58+
position: sticky;
59+
background-color: var(--bs-body-bg, white);
60+
bottom: 0;
61+
textarea {
62+
--bs-border-radius: 26px;
63+
resize: none;
64+
padding-right: 36px !important;
65+
max-height: 175px;
66+
&::placeholder {
67+
color: var(--bs-gray-600, #707782) !important;
6868
}
69-
button {
70-
position: absolute;
71-
bottom: 7px;
72-
right: 8px;
73-
background-color: transparent;
74-
color: var(--bs-primary, #007bc2);
75-
transition: color 0.25s ease-in-out;
76-
border: none;
77-
padding: 0;
78-
cursor: pointer;
79-
line-height: 16px;
80-
border-radius: 50%;
81-
&:disabled {
82-
cursor: not-allowed;
83-
color: var(--bs-gray-500, #8d959e);
84-
}
69+
}
70+
button {
71+
position: absolute;
72+
bottom: 7px;
73+
right: 8px;
74+
background-color: transparent;
75+
color: var(--bs-primary, #007bc2);
76+
transition: color 0.25s ease-in-out;
77+
border: none;
78+
padding: 0;
79+
cursor: pointer;
80+
line-height: 16px;
81+
border-radius: 50%;
82+
&:disabled {
83+
cursor: not-allowed;
84+
color: var(--bs-gray-500, #8d959e);
8585
}
8686
}
8787
}

shiny/www/py-shiny/chat/chat.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)