Skip to content

Commit

Permalink
refactor(chat): Flatten rules in chat.scss (#1779)
Browse files Browse the repository at this point in the history
  • Loading branch information
gadenbuie authored Nov 21, 2024
1 parent f6b92d8 commit e60dad5
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 65 deletions.
124 changes: 62 additions & 62 deletions js/chat/chat.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,74 +14,74 @@ shiny-chat-container {
p:last-child {
margin-bottom: 0;
}
}

shiny-chat-messages {
display: flex;
flex-direction: column;
gap: 2rem;

shiny-chat-message {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
> * {
height: fit-content;
}
.message-icon {
border-radius: 50%;
border: var(--shiny-chat-border);
> * {
margin: 0.5rem;
height: 20px;
width: 20px;
}
}
/* Vertically center the 2nd column (message content) */
.message-content {
align-self: center;
}
}
shiny-chat-messages {
display: flex;
flex-direction: column;
gap: 2rem;
}

/* Align the user message to the right */
shiny-user-message {
align-self: flex-end;
padding: 0.75rem 1rem;
border-radius: 10px;
background-color: var(--shiny-chat-user-message-bg);
max-width: 100%;
shiny-chat-message {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
> * {
height: fit-content;
}
.message-icon {
border-radius: 50%;
border: var(--shiny-chat-border);
> * {
margin: 0.5rem;
height: 20px;
width: 20px;
}
}
/* Vertically center the 2nd column (message content) */
.message-content {
align-self: center;
}
}

shiny-chat-input {
margin-top: auto;
position: sticky;
background-color: var(--bs-body-bg, white);
bottom: 0;
textarea {
--bs-border-radius: 26px;
resize: none;
padding-right: 36px !important;
max-height: 175px;
&::placeholder {
color: var(--bs-gray-600, #707782) !important;
}
/* Align the user message to the right */
shiny-user-message {
align-self: flex-end;
padding: 0.75rem 1rem;
border-radius: 10px;
background-color: var(--shiny-chat-user-message-bg);
max-width: 100%;
}

shiny-chat-input {
margin-top: auto;
position: sticky;
background-color: var(--bs-body-bg, white);
bottom: 0;
textarea {
--bs-border-radius: 26px;
resize: none;
padding-right: 36px !important;
max-height: 175px;
&::placeholder {
color: var(--bs-gray-600, #707782) !important;
}
button {
position: absolute;
bottom: 7px;
right: 8px;
background-color: transparent;
color: var(--bs-primary, #007bc2);
transition: color 0.25s ease-in-out;
border: none;
padding: 0;
cursor: pointer;
line-height: 16px;
border-radius: 50%;
&:disabled {
cursor: not-allowed;
color: var(--bs-gray-500, #8d959e);
}
}
button {
position: absolute;
bottom: 7px;
right: 8px;
background-color: transparent;
color: var(--bs-primary, #007bc2);
transition: color 0.25s ease-in-out;
border: none;
padding: 0;
cursor: pointer;
line-height: 16px;
border-radius: 50%;
&:disabled {
cursor: not-allowed;
color: var(--bs-gray-500, #8d959e);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion shiny/www/py-shiny/chat/chat.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit e60dad5

Please sign in to comment.