* This text should occupy the whole row even though it's a span node.
* Lorem ipsum dolor sit...
*
*/
.u-isBlock {
display: block !important; }
/**
* `u-isHidden`:
* Hides the given node from both screenreaders and browsers.
*
* @example
*
* This text should not be visible.
* Lorem ipsum dolor sit...
*
*/
.u-isHidden {
display: none !important;
visibility: hidden; }
/**
* `u-isInvisible`:
* Hides the given node visually and from screenreaders, but maintains the layout.
*
* @example
*
* This text should not be visible but should maintain it's layout.
* Lorem ipsum dolor sit...
*
*/
.u-isInvisible {
visibility: hidden; }
@media screen and (max-width: 649px) {
.mOnly {
display: block; } }
@media screen and (min-width: 650px) {
.mOnly {
display: none; } }
@media screen and (min-width: 1250px) {
.mOnly {
display: none; } }
@media screen and (max-width: 649px) {
.lOnly {
display: none; } }
@media screen and (min-width: 650px) {
.lOnly {
display: block; } }
@media screen and (min-width: 1250px) {
.lOnly {
display: block; } }
@media screen and (max-width: 649px) {
.ml {
display: block; } }
@media screen and (min-width: 650px) {
.ml {
display: block; } }
@media screen and (min-width: 1250px) {
.ml {
display: block; } }
/**
* `u-floatRight`:
* Floats the element to it's right boundary.
*
* @example
*
*
This text should not be visible but should maintain it's layout.
*
*/
.u-floatRight {
float: right; }
/**
* `u-floatLeft`:
* Floats the element to it's left boundary.
*
* @example
*
*
This text should not be visible but should maintain it's layout.
*
*/
.u-floatLeft {
float: left; }
/**
* `u-floatLeft`:
* Clearfix for floated elements, which should be applied to the sorrounding element.
*
* @example
*
*
This text should not be visible but should maintain it's layout.
*
*/
.u-cf:before, .u-cf:after,
.u-clearfix:before,
.u-clearfix:after {
content: '';
display: table; }
.u-cf:after,
.u-clearfix:after {
clear: both; }
/**
* Spacing utilities:
* Short utility classes for applying spacings to nodes. The name scheme is pretty simple.
* Each class begins with `u-` followed by either `p` for padding, or `m` for margin, which is
* then followed by the optional direction of `t` for a top margin, `r` for a right margin and so on.
* After specifying the direction, the unit of spacing needs to be specified.
* Since we follow a strict vertical rythm, you have two options available, either `1/2` for half of a
* typographic rythm spacing or `1/1` for one whole spacing of the typographic rythm.
*
* For example, if you want your div to include a whole bottom padding, the class would be `u-pb1/1`.
*
* @example
*
* This div should have a bottom padding of one whole typographic row.
*
*/
.u-textBreak {
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto; }
/**
* Text invert utility:
* Inverts the text on the element and it's siblings.
*
* @example
*
*
This text should hardly be visible since it has the standard color.
*
This text should be easily visible since it is white coloured.
*
*/
.u-invertText,
.u-invertText h1, .u-invertText h2, .u-invertText h3,
.u-invertText h4, .u-invertText h5, .u-invertText h6 {
color: white; }
.u-invertText .btn--solidBright {
color: #FFF; }
/**
* List reset utility:
* Removes all standard stylings for a list element and it's siblings.
*
* @example
*
*
This is standard list item.
*
This is yet another list item.
*
*
*
This is unstyled list item.
*
This is yet another list item.
*
*/
.u-resetList {
padding-left: 0;
margin-bottom: 0;
list-style: none; }
/**
* Link reset utility:
* Removes all standard stylings for an anchor/link element.
*
* @example
* This is a default styled link
* This is a link without styles
*/
.u-linkReset {
color: currentColor; }
.u-linkReset:hover, .u-linkReset:active, .u-linkReset:focus {
text-decoration: none; }
p .u-linkReset {
padding: 0;
margin: 0; }
/**
* Width utilities:
* Short utility width are responsive and mobile first.
* As with every utility class, it is namespaced with `u-` and `w` for width.
*
* Afterwards you can specify the optional breakpoint. Values can be found in the _Variables.scss
* in the $mq-breakpoints variable. For demonstration purposes we will use `small` breakpoint which
* is referenced by the `s`.
*
* Now let's specify the target width - Since they are percentage based, we use a fraction number, f.e. `1/1` for one whole,
* `1/2` for one half and so on. We provide you with widths up to `1/12´or one twelfths.
*
* Our finished class could look like `u-ws1/4` - Which applies a one quarter width on the small breakpoint and upwards.
*
* @example
*
* This div should cover the whole width on the small screens, the half on
* medium screens and one third on large screens and upwards.
*