11 @blocks
Stylus @block let you assign any block of code to a variable and then call it, pass as an argument or reuse in any other way. Colette takes avantage of this feature to define common and reusable pieces of CSS code.
11.1.1 {clearfix}
Description
Adds a clearfix behavior on containers that have floating children.
Usage
.foo
{clearfix}
is equivalent to
.foo
&:after
content ''
display block
height 0
clear both
visibility hidden
11.1.2 {fullWidth}
Description
Streches an element to match the width of its parent.
Usage
.foo
{fullWidth}
is equivalent to
.foo
display block
width 100%
height auto
11.1.3 {inlined}
Description
Makes an element display inline.
If applied to a <ul> or <ol> tag, all its <li> children will be displayed inline as well.
Usage
.foo
{inlined}
is equivalent to
.foo
display inline
> li
display inline
11.1.4 {loading}
Description
Display an animated loader.
It use loading animation.
Live demo with loading element
Advice: use it in a pseudo element (:before or :after)
Usage
/* my_file.styl */
.foo
{loading}
will compile to
/* my_file.css */
.foo::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
background: transparent;
width: 1.2em;
height: 1.2em;
margin: -2.6em 0 0 -.6em;
border-radius: 10em;
box-shadow: -2em 2em 0 0 currentColor, 0 2em 0 0 currentColor, 2em 2em 0 0 currentColor;
animation: loadingAnimate 1.4s infinite linear;
}
11.1.5 {outline}
Description
Add a style on the focused outline.
Usage
.foo
{outline}
is equivalent to
.foo
outline dashed thin var(--color-secondary)
11.2.1 {fontSecondary}
Description
Assigns the properties of the .font-secondary class to an element.
Usage
.foo
{fontSecondary}
is equivalent to
.foo
font-family $fontstack-secondary
font-weight bold
font-size _rem(11px)
text-transform uppercase
11.2.2 {listPosOutside}
Description
Override the default positionning of the list-style-position: outside.
Usage
.foo
{listPosOutside}
is equivalent to
.foo
&
li
list-style-position inside
padding-left 1em
text-indent -1em