source: trunk/css/utilities.inc.css @ 741

/**
* utilities.inc.css
* Global utility styles often in Strangecode applications.
*/

/*
FORMS
*/
input.sc-micro, textarea.sc-micro, select.sc-micro,
input.sc-tiny, textarea.sc-tiny, select.sc-tiny,
input.sc-small, textarea.sc-small, select.sc-small,
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.5rem 0 0;
    box-sizing: border-box;
}
/*
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 values are dependent on the margin, padding, and border set above.
(44-(0.5*1))/1 = 43.5
(44-(0.5*2))/2 = 21.5
(44-(0.5*4))/4 = 10.5
(44-(0.5*8))/8 = 5
(44-(0.5*8))/16 = 2.5
Note: avoid adding whitespace between input elements, or add `display: flex;` to the inputs' parent.
*/
input.sc-micro, textarea.sc-micro, select.sc-micro, label.sc-micro      { width: 2.5rem; }
input.sc-tiny, textarea.sc-tiny, select.sc-tiny, label.sc-tiny          { width: 5rem; }
input.sc-small, textarea.sc-small, select.sc-small, label.sc-small      { width: 10.5rem; }
input.sc-medium, textarea.sc-medium, select.sc-medium, label.sc-medium  { width: 21.5rem; }
input.sc-large, textarea.sc-large, select.sc-large, label.sc-large      { width: 43.5rem; }
input.sc-full, textarea.sc-full, select.sc-full, label.sc-full          { width: 100%; }
textarea.sc-twolines, select.sc-twolines              { height: 3.5rem; }
textarea.sc-short, select.sc-short                    { height: 8rem; }
textarea.sc-tall, select.sc-tall                      { height: 25rem; }
textarea.sc-fullscreen, select.sc-fullscreen          { height: 40rem; }
/*
UTILITIES
*/
.sc-center { text-align: center; }
.sc-clearboth { clear: both; }
.sc-help { color: #999; font-weight: normal; }
.sc-hidden { display: none; }
.sc-monospaced { font-family: monospace; }
.sc-padleft { padding-left: 10px; }
.sc-padright { padding-right: 10px; }
.sc-marginleft { margin-left: 10px; }
.sc-marginright { margin-right: 10px; }
.sc-right { text-align: right; }
.sc-pull-left { float: left; display: block; }
.sc-pull-right { float: right; display: block; }
.sc-normal {
    font: inherit;
    vertical-align: baseline;
    font-weight: normal;
    white-space: normal;
    text-transform: none;
}
.sc-nowrap { white-space: nowrap; }
.sc-dim {
    filter:alpha(opacity=33);
    -moz-opacity:.33;
    opacity:.33;
}
.sc-note:hover { cursor: help; }
.sc-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* .sc-pkg class wraps enclosing block element around inner floated elements */
.sc-pkg:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0.0; }
* html .sc-pkg { display: block; }
/* no ie mac \*/
* html .sc-pkg { height: 1%; }
.sc-pkg { display: block; }
/* */