Changeset 455 for trunk/css/utilities.inc.css

Timestamp:

Jan 7, 2014 2:35:40 AM (10 years ago)

Author:

anonymous

Message:

Fixed css widths of input elements.

File:

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

trunk/css/utilities.inc.css

@@ -1 +1 @@
 /**
- * utilities.css
+ * utilities.inc.css
  *
  * CSS used often in Strangecode applications. Do not arbitrarily
@@ -14 +14 @@
 input.sc-medium, textarea.sc-medium, select.sc-medium,
 input.sc-large, textarea.sc-large, select.sc-large,
-input.sc-full, textarea.sc-full, select.sc-full { margin: 0 0.5em 0 0; }
+input.sc-full, textarea.sc-full, select.sc-full { margin: 0 0.5em 0 0; padding: 3px 0.25em; border-width: 1px; }
 
-input.sc-tiny, textarea.sc-tiny, select.sc-tiny, label.sc-tiny          { width: 4.75em; }
-input.sc-small, textarea.sc-small, select.sc-small, label.sc-small      { width: 10em; }
-input.sc-medium, textarea.sc-medium, select.sc-medium, label.sc-medium  { width: 20.5em; }
-input.sc-large, textarea.sc-large, select.sc-large, label.sc-large      { width: 41.5em; }
+/*
+The following widths are calculated using `width = (maxwidth - (1.2 * multiple)) / multiple`
+where width is the saught value, maxwidth is the width of a sc-large, and multiple is the number
+of times an element fits within maxwidth (i.e. sc-tiny has a multiple of 8).
+The values are dependent on the margin, padding, and border set above.
+*/
+input.sc-tiny, textarea.sc-tiny, select.sc-tiny, label.sc-tiny          { width: 4.54em; }
+input.sc-small, textarea.sc-small, select.sc-small, label.sc-small      { width: 10.17em; }
+input.sc-medium, textarea.sc-medium, select.sc-medium, label.sc-medium  { width: 21.44em; }
+input.sc-large, textarea.sc-large, select.sc-large, label.sc-large      { width: 44em; }
 input.sc-full, textarea.sc-full, select.sc-full, label.sc-full          { width: 100%; }