This commit improves the responsiveness of normal banners by adopting a
flexbox layout for the label and action buttons. This change better
accommodates varying text lengths and button counts in the banners, due
to the natural flowy nature of flexboxes.
The key logic shift involves using `flex-basis` to manage layout
transitions: the label and the group of action buttons now wrap to
separate lines when the label's width is less than 60% of the banner
query container's width (60cqw).
This commit also updates the CSS for navbar banners to align with the
new flexbox layout between the label and the group of action buttons,
while also ensuring that the layout behavior of these banners remains
consistent with the previous implementation.
This commit replaces the `border` property with `outline` for input
elements, since the `outline` property is more suitable for focus
indicators. This change also removes the need for extra padding
adjustments due to the border's impact on layout.
This follow-up commit fixes the incorrect input color values that were
introduced in the initial commit. This change is most visible in the
'hover' state where the values were incorrectly set to the same values
as that of the normal state, leading to a lack of visual distinction.
This prep commit consolidates the input pill styles into
`app_variables.css` and uses the light-dark notation for the color
variables to avoid specificity issues that arose from `dark_theme.css`.
This commit serves as the base for the ongoing effort to standardize
redesigned input elements throughout the Zulip Web UI. It introduces a
new Handlebars partial block for inputs, located at
web/templates/components/input.hbs.
The partial can be used with the partial block syntax: {{#> input}},
allowing contributors to pass in the input element as a template. This
approach wraps the input with a consistent structure that includes
support for an icon and an action button. It also applies the necessary
styling to ensure visual and functional consistency across the web UI.
This commit also implements the filter input component at
/devtools/inputs/ showroom page for design discussions and prototyping.
This refactors a CSS variable for checkbox field margin for checkboxes
nested in another field. For example, the "integration events" options
in the "Generate integration URL" modal. Those nested checkboxes are
spaced out closer together.
This is a prep commit for #34524, that PR will add another nested
checkbox in the "Add a new bot" modal.
This commit sets the focus outline offset in action and icon buttons
to 0, following the discussions at CZO concerning the visuals and
jagged corners in some cases when the outline offset was applied.
This commit cleans up the data URIs for the custom
chevron icons, and sets the same color as used on
select text.
Additionally, the background-image size now scales as
expected, so that browser-native <select> elements
have chevrons that much more closely resemble those
of button-based selects for our custom widgets.
This commit contains the following changes:
- Updates the unmute stream icon in Personal settings
> Notifications to use the `icon-button-brand` CSS class.
- Adjusts the tooltip delay for the unmute icon.
- Removes unused CSS.
Prep commit for #19860.
This commit improves the button outline on focus by changing the color
of the outline to black-on-light and white-on-dark, and tweaking the
outline width and offset.
Migrate the demo organization warning that's shown on all the tabs
for organization settings to use the shared banner code.
Updates links in the current warning to be buttons in the banner,
and matches the navbar alert banner for demo organizations.
Fixes#34447.
The banner grid layout for the medium and small variants has 4 rows,
while the previously described `grid-template-areas` only had the
placement information for the first 3 rows.
This commit adds the spatial description of the banner elements in the
the final row, fixing the alignment of the banner elements in the cases
where there are no action buttons and only the banner label.
Until the owner of a demo organization sets an email, the submit
button on the invite user modal is now disabled.
The input div for email addresses is also disabled, which wasn't
disabled before because it's not an input element on the form.
We need this height to be flexible based on if the subheader has
overflowed into two rows or not, and our method of doing this
(with existing examples in the buddy list and stream list) is to
calculate what the height should be when a window is loaded or
resized.
