touchstonejs-ui/less/utils/text.less

React.js UI components for the TouchstoneJS platform http://touchstonejs.io

/**
 * Word breaking
 *
 * Break strings when their length exceeds the width of their container.
 */

.u-text-break {
	word-wrap: break-word !important;
}

/**
 * Horizontal text alignment
 */

.u-text-center {
	text-align: center !important;
}

.u-text-left {
	text-align: left !important;
}

.u-text-right {
	text-align: right !important;
}

/**
 * Assign basic colours
 */

.u-text-muted {
	color: @gray-light !important;
}

.u-text-default {
	color: @text-color !important;
}

.u-text-primary {
	color: @app-primary !important;
}

.u-text-info {
	color: @app-info !important;
}

.u-text-warning {
	color: @app-warning !important;
}

.u-text-success {
	color: @app-success !important;
}

.u-text-danger {
	color: @app-danger !important;
}

/**
 * Inherit the ancestor's text color.
 */

.u-text-inherit-color {
	color: inherit !important;
}

/**
 * Capitalize the text
 */

.u-text-caps {
	text-transform: uppercase !important;
}

/**
 * Enables selectable text
 */

.u-selectable {
	-webkit-touch-callout: default !important;
	-webkit-user-select: text !important;
}

/**
 * Prevent whitespace wrapping
 */

.u-text-no-wrap {
	white-space: nowrap !important;
}

/**
 * Text truncation
 *
 * Prevent text from wrapping onto multiple lines, and truncate with an
 * ellipsis.
 *
 * 1. Ensure that the node has a maximum width after which truncation can
 *    occur.
 * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
 *    nodes.
 */

.u-text-truncate {
	max-width: 100%; /* 1 */
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	word-wrap: normal !important; /* 2 */
}