Changeset 802

Timestamp:

Jan 13, 2024 5:55:21 PM (3 months ago)

Author:

anonymous

Message:

Fix reversed use of width and max-width

File:

• trunk/css/utilities.inc.css (modified) (2 diffs)

trunk/css/utilities.inc.css

@@ -18 +18 @@
 /*
 The following widths are calculated to include a small right-margin and be equally divisible so the right edges align.
-The formula is `width = (maxwidth - (rightmargin * multiple)) / multiple`
-where width is the sought value, maxwidth is the width of a sc-large, and multiple is the number
-of times an element fits within maxwidth (i.e. sc-micro has a multiple of 16).
+The formula is `width = (width - (rightmargin * multiple)) / multiple`
+where width is the sought value, width is the width of a sc-large, and multiple is the number
+of times an element fits within width (i.e. sc-micro has a multiple of 16).
 The values are dependent on the margin, padding, and border set above.
 (44-(0.5*1))/1 = 43.5
@@ -28 +28 @@
 (44-(0.5*8))/16 = 2.5
 Note: avoid adding whitespace between input elements, or add `display: flex;` to the inputs' parent.
+20240112: Until today, `max-width` and `width` were incorrectly reversed.
 */
-input.sc-micro, textarea.sc-micro, select.sc-micro, label.sc-micro      { width: 2.5rem; max-width: 100%; }
-input.sc-tiny, textarea.sc-tiny, select.sc-tiny, label.sc-tiny          { width: 5rem; max-width: 100%; }
-input.sc-small, textarea.sc-small, select.sc-small, label.sc-small      { width: 10.5rem; max-width: 100%; }
-input.sc-medium, textarea.sc-medium, select.sc-medium, label.sc-medium  { width: 21.5rem; max-width: 100%; }
-input.sc-large, textarea.sc-large, select.sc-large, label.sc-large      { width: 43.5rem; max-width: 100%; }
-input.sc-full, textarea.sc-full, select.sc-full, label.sc-full          { width: 100%; max-width: 100%; }
+input.sc-micro, textarea.sc-micro, select.sc-micro, label.sc-micro      { max-width: 2.5rem; width: 100%; }
+input.sc-tiny, textarea.sc-tiny, select.sc-tiny, label.sc-tiny          { max-width: 5rem; width: 100%; }
+input.sc-small, textarea.sc-small, select.sc-small, label.sc-small      { max-width: 10.5rem; width: 100%; }
+input.sc-medium, textarea.sc-medium, select.sc-medium, label.sc-medium  { max-width: 21.5rem; width: 100%; }
+input.sc-large, textarea.sc-large, select.sc-large, label.sc-large      { max-width: 43.5rem; width: 100%; }
+input.sc-full, textarea.sc-full, select.sc-full, label.sc-full          { max-width: 100%; width: 100%; }
 textarea.sc-twolines, select.sc-twolines              { height: 3.5rem; }
 textarea.sc-short, select.sc-short                    { height: 8rem; }