widgets: Extend flexbox to widget inputs, buttons.

This commit is contained in:
Karl Stolley 2024-05-22 16:49:37 -05:00 committed by Tim Abbott
parent da6f69f8b2
commit ae90258942
1 changed files with 30 additions and 19 deletions

View File

@ -23,12 +23,23 @@
}
.todo-widget {
.todo-task-list-title-bar {
display: flex;
gap: 5px;
}
.add-task-bar {
display: flex;
/* Ensure controls remain visible on narrower screens. */
flex-flow: row wrap;
gap: 5px;
}
/* For the box-shadow to be visible on the left */
.add-task,
.add-desc {
font-size: 14px;
font-weight: 400;
margin-right: 4px;
}
& label.checkbox {
@ -102,16 +113,10 @@
padding: 0;
}
& input {
&.poll-question,
&.poll-option,
&.add-task,
&.add-desc {
width: 206px;
}
}
& input[type="text"] {
/* Reset from zulip.css */
height: unset;
border: 1px solid hsl(0deg 0% 80%);
box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
transition:
@ -130,13 +135,15 @@
}
.poll-widget {
.poll-option {
font-weight: 400;
.poll-option-bar {
display: flex;
/* Ensure controls remain visible on narrower screens. */
flex-flow: row wrap;
gap: 5px;
}
/* For the box-shadow to be visible on the left */
& input.poll-option {
margin-right: 4px;
.poll-option {
font-weight: 400;
}
& span.poll-option {
@ -189,7 +196,8 @@ button {
&.poll-option {
color: hsl(156deg 41% 40%);
border: 1px solid hsl(156deg 28% 70%);
width: 100px;
width: max-content;
flex: 0 0 auto;
border-radius: 3px;
background-color: hsl(0deg 0% 100%);
padding: 4px;
@ -211,15 +219,18 @@ button {
}
}
input,
button {
input {
&.add-task,
&.add-desc,
&.poll-option,
&.poll-question,
&.todo-task-list-title {
flex: 1 1 auto;
padding: 4px 6px;
margin: 2px 0;
}
&.todo-task-list-title {
flex: 0 0 auto;
}
}