Changeset 616 for trunk/css/utilities.inc.css
- Timestamp:
- Nov 11, 2017 1:12:58 PM (7 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/css/utilities.inc.css
r559 r616 10 10 /*_____________________ FORMS ____________________*/ 11 11 12 input.sc-micro, textarea.sc-micro, select.sc-micro, 12 13 input.sc-tiny, textarea.sc-tiny, select.sc-tiny, 13 14 input.sc-small, textarea.sc-small, select.sc-small, … … 16 17 input.sc-full, textarea.sc-full, select.sc-full { 17 18 margin: 0 0.5rem 0 0; 18 padding: 3px 0.25rem;19 padding: 2px 0.25rem; 19 20 border-width: 1px; 21 box-sizing: border-box; 20 22 } 21 23 22 24 /* 23 The following widths are calculated using `width = (maxwidth - (1.2 * multiple)) / multiple` 25 The following widths are calculated to include a small right-margin and be equally divisible so the right edges align. 26 The formula is `width = (maxwidth - (rightmargin * multiple)) / multiple` 24 27 where width is the sought value, maxwidth is the width of a sc-large, and multiple is the number 25 of times an element fits within maxwidth (i.e. sc- tiny has a multiple of 8).28 of times an element fits within maxwidth (i.e. sc-micro has a multiple of 16). 26 29 The values are dependent on the margin, padding, and border set above. 30 (44-(0.5*1))/1 = 43.5 31 (44-(0.5*2))/2 = 21.5 32 (44-(0.5*4))/4 = 10.5 33 (44-(0.5*8))/8 = 5 34 (44-(0.5*8))/16 = 2.5 35 Note: avoid adding whitespace between input elements, or add `display: flex;` to the inputs' parent. 27 36 */ 28 input.sc-micro, textarea.sc-micro, select.sc-micro, label.sc-micro { width: 1.55rem; }29 input.sc-tiny, textarea.sc-tiny, select.sc-tiny, label.sc-tiny { width: 4.54rem; }30 input.sc-small, textarea.sc-small, select.sc-small, label.sc-small { width: 10. 15rem; }31 input.sc-medium, textarea.sc-medium, select.sc-medium, label.sc-medium { width: 21. 42rem; }32 input.sc-large, textarea.sc-large, select.sc-large, label.sc-large { width: 4 4rem; }37 input.sc-micro, textarea.sc-micro, select.sc-micro, label.sc-micro { width: 2.5rem; } 38 input.sc-tiny, textarea.sc-tiny, select.sc-tiny, label.sc-tiny { width: 5rem; } 39 input.sc-small, textarea.sc-small, select.sc-small, label.sc-small { width: 10.5rem; } 40 input.sc-medium, textarea.sc-medium, select.sc-medium, label.sc-medium { width: 21.5rem; } 41 input.sc-large, textarea.sc-large, select.sc-large, label.sc-large { width: 43.5rem; } 33 42 input.sc-full, textarea.sc-full, select.sc-full, label.sc-full { width: 100%; } 34 43
Note: See TracChangeset
for help on using the changeset viewer.