paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-05 06:23:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

container_queries: Establish new breakpoints.

Browse Source
This commit is contained in:
Karl Stolley
2025-02-20 14:19:41 -06:00
committed by Tim Abbott
parent d33d09eaf3
commit c7702ae3ba
2 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/postcss.config.js
View File

@@ -6,7 +6,7 @@ import postcssPrefixWrap from "postcss-prefixwrap";
import postcssPresetEnv from "postcss-preset-env";
import postcssSimpleVars from "postcss-simple-vars";
import {media_breakpoints} from "./src/css_variables.ts";
import {container_breakpoints, media_breakpoints} from "./src/css_variables.ts";
const config = ({file}) => ({
plugins: [
@@ -18,7 +18,7 @@ const config = ({file}) => ({
plugins: [postcssPrefixWrap("%dark-theme")],
}),
postcssExtendRule,
postcssSimpleVars({variables: media_breakpoints}),
postcssSimpleVars({variables: {...container_breakpoints, ...media_breakpoints}}),
postcssPresetEnv({
features: {
"nesting-rules": true,

9
web/src/css_variables.ts
View File

@@ -13,6 +13,9 @@ const ms = 320; // Mobile small
// Breakpoints for middle column
const mc = 849; // Middle column as wide as it appears after the `sm` breakpoint
// Base em unit for container_breakpoints conversion
const base_em_px = 16;
export const media_breakpoints = {
xs_min: xs + "px",
sm_min: sm + "px",
@@ -31,6 +34,12 @@ export const media_breakpoints = {
settings_overlay_sidebar_collapse_breakpoint: 800 / 14 + "em",
};
export const container_breakpoints = {
cq_xl_min: xl / base_em_px + "em",
cq_md_min: md / base_em_px + "em",
cq_mm_min: mm / base_em_px + "em",
};
export const media_breakpoints_num = {
xs,
sm,