Absolute
cssowl-absolute
Extendable placeholder and mixin to position an element absolutely.
// extendable placeholder
%cssowl-absolute
position: absolute
// mixin
=cssowl-absolute($coordinates:0 false false 0)
+cssowl-coords($coordinates)
position: absolute
// extendable placeholder
%cssowl-absolute {
position: absolute;
}
// mixin
@mixin cssowl-absolute($coordinates:0 false false 0) {
@include cssowl-coords($coordinates);
position: absolute;
}
// disabled as less doesn't provide placeholders yet
//.cssowl-absolute {
// position: absolute;
//}
// mixin
.cssowl-absolute(@coordinates:0 false false 0) {
.cssowl-coords(@coordinates);
position: absolute;
}
// extendable placeholder
$cssowl-absolute
position: absolute
// mixin
cssowl-absolute($coordinates=0 false false 0)
cssowl-coords($coordinates)
position: absolute
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-absolute' style='width:10px;height:10px;background:#59371f;'></div>
</div>
<style>
/* line 3, (__TEMPLATE__) */
.example-absolute {
top: 20px;
left: 20px;
position: absolute; }
</style>
.example-absolute
+cssowl-absolute(20px false false 20px)
.example-absolute {
@include cssowl-absolute(20px false false 20px);
}
.example-absolute {
.cssowl-absolute(20px false false 20px);
}
.example-absolute
cssowl-absolute(20px false false 20px)
cssowl-absolute-inside
Mixin to position an element absolutely inside the bounding box.
// mixin
=cssowl-absolute-inside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
width: $width
height: $height
position: absolute
+cssowl-coords-inside($width, $height, $valign, $halign, $xOffset, $yOffset)
// mixin
@mixin cssowl-absolute-inside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
width: $width;
height: $height;
position: absolute;
@include cssowl-coords-inside($width, $height, $valign, $halign, $xOffset, $yOffset);
}
// mixin
.cssowl-absolute-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
width: @width;
height: @height;
position: absolute;
.cssowl-coords-inside(@width, @height, @valign, @halign, @xOffset, @yOffset);
}
// mixin
cssowl-absolute-inside($width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
width: $width
height: $height
position: absolute
cssowl-coords-inside($width, $height, $valign, $halign, $xOffset, $yOffset);
<div class='example-absolute-inside' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='top-center' style='width:10px;height:10px;background:#59371f;'></div>
<div class='middle-right' style='width:10px;height:10px;background:#59371f;'></div>
<div class='bottom-center' style='width:10px;height:10px;background:#59371f;'></div>
<div class='middle-left' style='width:10px;height:10px;background:#59371f;'></div>
</div>
<style>
/* line 4, (__TEMPLATE__) */
.example-absolute-inside > .top-center {
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 50%;
margin-left: -5px; }
/* line 6, (__TEMPLATE__) */
.example-absolute-inside > .middle-right {
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
right: 0; }
/* line 8, (__TEMPLATE__) */
.example-absolute-inside > .bottom-center {
width: 10px;
height: 10px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -5px; }
/* line 10, (__TEMPLATE__) */
.example-absolute-inside > .middle-left {
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
left: 0; }
</style>
.example-absolute-inside
> .top-center
+cssowl-absolute-inside(10px, 10px, top, center)
> .middle-right
+cssowl-absolute-inside(10px, 10px, middle, right)
> .bottom-center
+cssowl-absolute-inside(10px, 10px, bottom, center)
> .middle-left
+cssowl-absolute-inside(10px, 10px, middle, left)
.example-absolute-inside {
> .top-center {
@include cssowl-absolute-inside(10px, 10px, top, center);
}
> .middle-right {
@include cssowl-absolute-inside(10px, 10px, middle, right);
}
> .bottom-center {
@include cssowl-absolute-inside(10px, 10px, bottom, center);
}
> .middle-left {
@include cssowl-absolute-inside(10px, 10px, middle, left);
}
}
.example-absolute-inside {
> .top-center {
.cssowl-absolute-inside(10px, 10px, top, center);
}
> .middle-right {
.cssowl-absolute-inside(10px, 10px, middle, right);
}
> .bottom-center {
.cssowl-absolute-inside(10px, 10px, bottom, center);
}
> .middle-left {
.cssowl-absolute-inside(10px, 10px, middle, left);
}
}
.example-absolute-inside
> .top-center
cssowl-absolute-inside(10px, 10px, top, center)
> .middle-right
cssowl-absolute-inside(10px, 10px, middle, right)
> .bottom-center
cssowl-absolute-inside(10px, 10px, bottom, center)
> .middle-left
cssowl-absolute-inside(10px, 10px, middle, left)
cssowl-absolute-outside
Mixin to position an element absolutely outside the bounding box.
// mixin
=cssowl-absolute-outside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
width: $width
height: $height
position: absolute
+cssowl-coords-outside($width, $height, $valign, $halign, $xOffset, $yOffset)
// mixin
@mixin cssowl-absolute-outside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
width: $width;
height: $height;
position: absolute;
@include cssowl-coords-outside($width, $height, $valign, $halign, $xOffset, $yOffset);
}
// mixin
.cssowl-absolute-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
width: @width;
height: @height;
position: absolute;
.cssowl-coords-outside(@width, @height, @valign, @halign, @xOffset, @yOffset);
}
// mixin
cssowl-absolute-outside($width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
width: $width
height: $height
position: absolute
cssowl-coords-outside($width, $height, $valign, $halign, $xOffset, $yOffset);
<div class='example-absolute-outside' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='top-center' style='background:#59371f;'></div>
<div class='middle-right' style='background:#59371f;'></div>
<div class='bottom-center' style='background:#59371f;'></div>
<div class='middle-left' style='background:#59371f;'></div>
</div>
<style>
/* line 4, (__TEMPLATE__) */
.example-absolute-outside > .top-center {
width: 10px;
height: 10px;
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px; }
/* line 6, (__TEMPLATE__) */
.example-absolute-outside > .middle-right {
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
right: -10px; }
/* line 8, (__TEMPLATE__) */
.example-absolute-outside > .bottom-center {
width: 10px;
height: 10px;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -5px; }
/* line 10, (__TEMPLATE__) */
.example-absolute-outside > .middle-left {
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
left: -10px; }
</style>
.example-absolute-outside
> .top-center
+cssowl-absolute-outside(10px, 10px, top, center)
> .middle-right
+cssowl-absolute-outside(10px, 10px, middle, right)
> .bottom-center
+cssowl-absolute-outside(10px, 10px, bottom, center)
> .middle-left
+cssowl-absolute-outside(10px, 10px, middle, left)
.example-absolute-outside {
> .top-center {
@include cssowl-absolute-outside(10px, 10px, top, center);
}
> .middle-right {
@include cssowl-absolute-outside(10px, 10px, middle, right);
}
> .bottom-center {
@include cssowl-absolute-outside(10px, 10px, bottom, center);
}
> .middle-left {
@include cssowl-absolute-outside(10px, 10px, middle, left);
}
}
.example-absolute-outside {
> .top-center {
.cssowl-absolute-outside(10px, 10px, top, center);
}
> .middle-right {
.cssowl-absolute-outside(10px, 10px, middle, right);
}
> .bottom-center {
.cssowl-absolute-outside(10px, 10px, bottom, center);
}
> .middle-left {
.cssowl-absolute-outside(10px, 10px, middle, left);
}
}
.example-absolute-outside
> .top-center
cssowl-absolute-outside(10px, 10px, top, center)
> .middle-right
cssowl-absolute-outside(10px, 10px, middle, right)
> .bottom-center
cssowl-absolute-outside(10px, 10px, bottom, center)
> .middle-left
cssowl-absolute-outside(10px, 10px, middle, left)
After
cssowl-after-float
Mixin to add content with the :after pseudo selector and position it with float: $float.
// mixin
=cssowl-after-float($content, $margin:0 0 0 0, $float:right)
&:after
float: $float
margin: $margin
content: $content
// mixin
@mixin cssowl-after-float($content, $margin:0 0 0 0, $float:right) {
&:after {
float: $float;
margin: $margin;
content: $content;
}
}
// mixin
.cssowl-after-float(@content, @margin:0 0 0 0, @float:right) {
&:after {
float: @float;
margin: @margin;
content: @content;
}
}
// mixin
cssowl-after-float($content, $margin=0 0 0 0, $float=right)
&:after
float $float
margin $margin
content $content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
<div class='example-after-float'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
<style>
/* line 23, bower_components/cssowl/lib/sass/cssowl/after.sass */
.example-after-float:after {
float: right;
margin: 4px 0 0 10px;
content: "*"; }
</style>
.example-after-float
+cssowl-after-float("*", 4px 0 0 10px)
.example-after-float {
@include cssowl-after-float("*", 4px 0 0 10px);
}
.example-after-float {
.cssowl-after-float("*", 4px 0 0 10px);
}
.example-after-float
cssowl-after-float("*", 4px 0 0 10px)
cssowl-after-absolute
Mixin to add content with the :after pseudo selector and position it absolutely.
// mixin
=cssowl-after-absolute($content, $coordinates:0 false false 0)
position: relative
&:after
content: $content
+cssowl-absolute($coordinates)
// mixin
@mixin cssowl-after-absolute($content, $coordinates:0 false false 0) {
position: relative;
&:after {
content: $content;
@include cssowl-absolute($coordinates);
}
}
// mixin
.cssowl-after-absolute(@content, @coordinates:0 false false 0) {
position: relative;
&:after {
content: @content;
.cssowl-absolute(@coordinates);
}
}
// mixin
cssowl-after-absolute($content, $coordinates=0 false false 0)
position: relative
&:after
content: $content
cssowl-absolute($coordinates)
<div class='example-after-absolute' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
/* line 3, (__TEMPLATE__) */
.example-after-absolute {
position: relative; }
/* line 17, bower_components/cssowl/lib/sass/cssowl/after.sass */
.example-after-absolute:after {
content: "*";
top: 17px;
left: 20px;
position: absolute; }
</style>
.example-after-absolute
+cssowl-after-absolute("*", 17px false false 20px)
.example-after-absolute {
@include cssowl-after-absolute("*", 17px false false 20px);
}
.example-after-absolute {
.cssowl-after-absolute("*", 17px false false 20px);
}
.example-after-absolute
cssowl-after-absolute("*", 17px false false 20px)
cssowl-after-absolute-inside
Mixin to add content with the :after pseudo selector and position it absolutely inside the bounding box.
=cssowl-after-absolute-inside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
position: relative
&:after
content: $content
+cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset)
@mixin cssowl-after-absolute-inside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
position: relative;
&:after {
content: $content;
@include cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset);
}
}
.cssowl-after-absolute-inside(@content, @width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
position: relative;
&:after {
content: @content;
.cssowl-absolute-inside(@width, @height, @valign, @halign, @xOffset, @yOffset);
}
}
cssowl-after-absolute-inside($content, $width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
position: relative
&:after
content: $content
cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset)
<div class='example-after-absolute-inside' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
/* line 3, (__TEMPLATE__) */
.example-after-absolute-inside {
position: relative; }
/* line 4, bower_components/cssowl/lib/sass/cssowl/after.sass */
.example-after-absolute-inside:after {
content: "*";
width: 5px;
height: 5px;
position: absolute;
top: 50%;
margin-top: -5px;
left: 50%;
margin-left: -3px; }
</style>
.example-after-absolute-inside
+cssowl-after-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)
.example-after-absolute-inside {
@include cssowl-after-absolute-inside("*", 5px, 5px, middle, center, 0, -2px);
}
.example-after-absolute-inside {
.cssowl-after-absolute-inside("*", 5px, 5px, middle, center, 0, -2px);
}
.example-after-absolute-inside
cssowl-after-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)
cssowl-after-absolute-outside
Mixin to add content with the :after pseudo selector and position it absolutely outside the bounding box.
=cssowl-after-absolute-outside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
position: relative
&:after
content: $content
+cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset)
@mixin cssowl-after-absolute-outside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
position: relative;
&:after {
content: $content;
@include cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset);
}
}
.cssowl-after-absolute-outside(@content, @width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
position: relative;
&:after {
content: @content;
.cssowl-absolute-outside(@width, @height, @valign, @halign, @xOffset, @yOffset);
}
}
cssowl-after-absolute-outside($content, $width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
position: relative
&:after
content: $content
cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset)
<div class='example-after-absolute-outside' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
/* line 3, (__TEMPLATE__) */
.example-after-absolute-outside {
position: relative; }
/* line 10, bower_components/cssowl/lib/sass/cssowl/after.sass */
.example-after-absolute-outside:after {
content: "*";
width: 5px;
height: 5px;
position: absolute;
top: 50%;
margin-top: -5px;
right: -10px; }
</style>
.example-after-absolute-outside
+cssowl-after-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)
.example-after-absolute-outside {
@include cssowl-after-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px);
}
.example-after-absolute-outside {
.cssowl-after-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px);
}
.example-after-absolute-outside
cssowl-after-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)
Before
cssowl-before-float
Mixin to add content with the :before pseudo selector and position it with float: $float.
// mixin
=cssowl-before-float($content, $margin:0 0 0 0, $float:left)
&:before
float: $float
margin: $margin
content: $content
// mixin
@mixin cssowl-before-float($content, $margin:0 0 0 0, $float:left) {
&:before {
float: $float;
margin: $margin;
content: $content;
}
}
// mixin
.cssowl-before-float(@content, @margin:0 0 0 0, @float:left) {
&:before {
float: @float;
margin: @margin;
content: @content;
}
}
// mixin
cssowl-before-float($content, $margin=0 0 0 0, $float=left)
&:before
float $float
margin $margin
content $content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
<div class='example-before-float'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</div>
<style>
/* line 23, bower_components/cssowl/lib/sass/cssowl/before.sass */
.example-before-float:before {
float: left;
margin: 4px 10px 0 0;
content: "*"; }
</style>
.example-before-float
+cssowl-before-float("*", 4px 10px 0 0)
.example-before-float {
@include cssowl-before-float("*", 4px 10px 0 0);
}
.example-before-float {
.cssowl-before-float("*", 4px 10px 0 0);
}
.example-before-float
cssowl-before-float("*", 4px 10px 0 0)
cssowl-before-absolute
Mixin to add content with the :before pseudo selector and position it absolutely.
// mixin
=cssowl-before-absolute($content, $coordinates:0 false false 0)
position: relative
&:before
content: $content
+cssowl-absolute($coordinates)
// mixin
@mixin cssowl-before-absolute($content, $coordinates:0 false false 0) {
position: relative;
&:before {
content: $content;
@include cssowl-absolute($coordinates);
}
}
// mixin
.cssowl-before-absolute(@content, @coordinates:0 false false 0) {
position: relative;
&:before {
content: @content;
.cssowl-absolute(@coordinates);
}
}
// mixin
cssowl-before-absolute($content, $coordinates=0 false false 0)
position: relative
&:before
content: $content
cssowl-absolute($coordinates)
<div class='example-before-absolute' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
/* line 3, (__TEMPLATE__) */
.example-before-absolute {
position: relative; }
/* line 17, bower_components/cssowl/lib/sass/cssowl/before.sass */
.example-before-absolute:before {
content: "*";
top: 17px;
left: 20px;
position: absolute; }
</style>
.example-before-absolute
+cssowl-before-absolute("*", 17px false false 20px)
.example-before-absolute {
@include cssowl-before-absolute("*", 17px false false 20px);
}
.example-before-absolute {
.cssowl-before-absolute("*", 17px false false 20px);
}
.example-before-absolute
cssowl-before-absolute("*", 17px false false 20px)
cssowl-before-absolute-inside
Mixin to add content with the :before pseudo selector and position it absolutely inside the bounding box.
=cssowl-before-absolute-inside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
position: relative
&:before
content: $content
+cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset)
@mixin cssowl-before-absolute-inside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
position: relative;
&:before {
content: $content;
@include cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset);
}
}
.cssowl-before-absolute-inside(@content, @width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
position: relative;
&:before {
content: @content;
.cssowl-absolute-inside(@width, @height, @valign, @halign, @xOffset, @yOffset);
}
}
cssowl-before-absolute-inside($content, $width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
position: relative
&:before
content: $content
cssowl-absolute-inside($width, $height, $valign, $halign, $xOffset, $yOffset)
<div class='example-before-absolute-inside' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
/* line 3, (__TEMPLATE__) */
.example-before-absolute-inside {
position: relative; }
/* line 4, bower_components/cssowl/lib/sass/cssowl/before.sass */
.example-before-absolute-inside:before {
content: "*";
width: 5px;
height: 5px;
position: absolute;
top: 50%;
margin-top: -5px;
left: 50%;
margin-left: -3px; }
</style>
.example-before-absolute-inside
+cssowl-before-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)
.example-before-absolute-inside {
@include cssowl-before-absolute-inside("*", 5px, 5px, middle, center, 0, -2px);
}
.example-before-absolute-inside {
.cssowl-before-absolute-inside("*", 5px, 5px, middle, center, 0, -2px);
}
.example-before-absolute-inside
cssowl-before-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)
cssowl-before-absolute-outside
Mixin to add content with the :before pseudo selector and position it absolutely outside the bounding box.
=cssowl-before-absolute-outside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
position: relative
&:before
content: $content
+cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset)
@mixin cssowl-before-absolute-outside($content, $width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
position: relative;
&:before {
content: $content;
@include cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset);
}
}
.cssowl-before-absolute-outside(@content, @width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
position: relative;
&:before {
content: @content;
.cssowl-absolute-outside(@width, @height, @valign, @halign, @xOffset, @yOffset);
}
}
cssowl-before-absolute-outside($content, $width, $height, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
position: relative
&:before
content: $content
cssowl-absolute-outside($width, $height, $valign, $halign, $xOffset, $yOffset)
<div class='example-before-absolute-outside' style='width:50px;height:50px;border:1px solid #59371f;'></div>
<style>
/* line 3, (__TEMPLATE__) */
.example-before-absolute-outside {
position: relative; }
/* line 10, bower_components/cssowl/lib/sass/cssowl/before.sass */
.example-before-absolute-outside:before {
content: "*";
width: 5px;
height: 5px;
position: absolute;
top: 50%;
margin-top: -5px;
right: -10px; }
</style>
.example-before-absolute-outside
+cssowl-before-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)
.example-before-absolute-outside {
@include cssowl-before-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px);
}
.example-before-absolute-outside {
.cssowl-before-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px);
}
.example-before-absolute-outside
cssowl-before-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)
Coords
cssowl-coords
Set an element's top, right, bottom and left properties.
=cssowl-coords($coords:0 false false 0)
$top: nth($coords, 1)
$right: nth($coords, 2)
$bottom: nth($coords, 3)
$left: nth($coords, 4)
@if $top != false
top: $top
@if $left != false
left: $left
@if $right != false
right: $right
@if $bottom != false
bottom: $bottom
@mixin cssowl-coords($coords:0 false false 0) {
$top: nth($coords, 1);
$right: nth($coords, 2);
$bottom: nth($coords, 3);
$left: nth($coords, 4);
@if $top != false {
top: $top;
}
@if $left != false {
left: $left;
}
@if $right != false {
right: $right;
}
@if $bottom != false {
bottom: $bottom;
}
}
.cssowl-coords(@coords:0 false false 0) when not (extract(@coords, 1) = false) {
top: extract(@coords, 1);
}
.cssowl-coords(@coords:0 false false 0) when not (extract(@coords, 2) = false) {
right: extract(@coords, 2);
}
.cssowl-coords(@coords:0 false false 0) when not (extract(@coords, 3) = false) {
bottom: extract(@coords, 3);
}
.cssowl-coords(@coords:0 false false 0) when not (extract(@coords, 4) = false) {
left: extract(@coords, 4);
}
.cssowl-coords(@coords:0 false false 0) {
// see conditionals
}
cssowl-coords($coords=0 false false 0)
$top = $coords[0];
$right = $coords[1];
$bottom = $coords[2];
$left = $coords[3];
if $top != false
top $top
if $left != false
left $left
if $right != false
right $right
if $bottom != false
bottom $bottom
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-coords' style='width:10px;height:10px;background:#59371f;position:absolute;'></div>
</div>
<style>
/* line 3, (__TEMPLATE__) */
.example-coords {
top: 20px;
left: 20px; }
</style>
.example-coords
+cssowl-coords(20px false false 20px)
.example-coords {
@include cssowl-coords(20px false false 20px);
}
.example-coords {
.cssowl-coords(20px false false 20px);
}
.example-coords
cssowl-coords(20px false false 20px)
cssowl-coords-inside
Set an element's top, right, bottom and left properties to position it inside the bounding box.
=cssowl-coords-inside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
@if $valign == top
top: $yOffset
@else if $valign == middle
top: 50%
margin-top: $yOffset - round($height / 2)
@else if $valign == bottom
bottom: $yOffset
@if $halign == left
left: $xOffset
@else if $halign == center
left: 50%
margin-left: $xOffset - round($width / 2)
@else if $halign == right
right: $xOffset
@mixin cssowl-coords-inside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
@if $valign == top {
top: $yOffset;
}
@else if $valign == middle {
top: 50%;
margin-top: $yOffset - round($height / 2);
}
@else if $valign == bottom {
bottom: $yOffset;
}
@if $halign == left {
left: $xOffset;
}
@else if $halign == center {
left: 50%;
margin-left: $xOffset - round($width / 2);
}
@else if $halign == right {
right: $xOffset;
}
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = top) {
top: @yOffset;
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = middle) {
top: 50%;
margin-top: @yOffset - round(@height / 2);
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = bottom) {
bottom: @xOffset;
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = left) {
left: @xOffset;
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = center) {
left: 50%;
margin-left: @xOffset - round(@width / 2);
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = right) {
right: @xOffset;
}
.cssowl-coords-inside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
// see conditionals
}
cssowl-coords-inside(width, height, valign=top, halign=left, xOffset=0, yOffset=0)
if valign == top
top yOffset
else if valign == middle
top 50%
margin-top yOffset - round(height / 2)
else if valign == bottom
bottom yOffset
if halign == left
left xOffset
else if halign == center
left 50%
margin-left xOffset - round(width / 2)
else if halign == right
right xOffset
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-coords-inside top-center'></div>
<div class='example-coords-inside middle-right'></div>
<div class='example-coords-inside bottom-center'></div>
<div class='example-coords-inside middle-left'></div>
</div>
<style>
/* line 3, (__TEMPLATE__) */
.example-coords-inside {
width: 10px;
height: 10px;
position: absolute;
background: #59371f; }
/* line 8, (__TEMPLATE__) */
.example-coords-inside.top-center {
top: 0;
left: 50%;
margin-left: -5px; }
/* line 10, (__TEMPLATE__) */
.example-coords-inside.middle-right {
top: 50%;
margin-top: -5px;
right: 0; }
/* line 12, (__TEMPLATE__) */
.example-coords-inside.bottom-center {
bottom: 0;
left: 50%;
margin-left: -5px; }
/* line 14, (__TEMPLATE__) */
.example-coords-inside.middle-left {
top: 50%;
margin-top: -5px;
left: 0; }
</style>
.example-coords-inside
width: 10px
height: 10px
position: absolute
background: #59371f
&.top-center
+cssowl-coords-inside(10px, 10px, top, center)
&.middle-right
+cssowl-coords-inside(10px, 10px, middle, right)
&.bottom-center
+cssowl-coords-inside(10px, 10px, bottom, center)
&.middle-left
+cssowl-coords-inside(10px, 10px, middle, left)
.example-coords-inside {
width: 10px;
height: 10px;
position: absolute;
background: #59371f;
&.top-center {
@include cssowl-coords-inside(10px, 10px, top, center);
}
&.middle-right {
@include cssowl-coords-inside(10px, 10px, middle, right);
}
&.bottom-center {
@include cssowl-coords-inside(10px, 10px, bottom, center);
}
&.middle-left {
@include cssowl-coords-inside(10px, 10px, middle, left);
}
}
.example-coords-inside {
width: 10px;
height: 10px;
position: absolute;
background: #59371f;
&.top-center {
.cssowl-coords-inside(10px, 10px, top, center);
}
&.middle-right {
.cssowl-coords-inside(10px, 10px, middle, right);
}
&.bottom-center {
.cssowl-coords-inside(10px, 10px, bottom, center);
}
&.middle-left {
.cssowl-coords-inside(10px, 10px, middle, left);
}
}
.example-coords-inside
width 10px
height 10px
position absolute
background #59371f
&.top-center
cssowl-coords-inside(10px, 10px, top, center)
&.middle-right
cssowl-coords-inside(10px, 10px, middle, right)
&.bottom-center
cssowl-coords-inside(10px, 10px, bottom, center)
&.middle-left
cssowl-coords-inside(10px, 10px, middle, left)
cssowl-coords-outside
Set an element's top, right, bottom and left properties to position it outside the bounding box.
=cssowl-coords-outside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
@if $valign == top
top: round($yOffset - $height)
@else if $valign == middle
top: 50%
margin-top: $yOffset - round($height / 2)
@else if $valign == bottom
bottom: round($yOffset - $height)
@if $halign == left
left: round($xOffset - $width)
@else if $halign == center
left: 50%
margin-left: $xOffset - round($width / 2)
@else if $halign == right
right: round($xOffset - $width)
@mixin cssowl-coords-outside($width, $height, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
@if $valign == top {
top: round($yOffset - $height);
}
@else if $valign == middle {
top: 50%;
margin-top: $yOffset - round($height / 2);
}
@else if $valign == bottom {
bottom: round($yOffset - $height);
}
@if $halign == left {
left: round($xOffset - $width);
}
@else if $halign == center {
left: 50%;
margin-left: $xOffset - round($width / 2);
}
@else if $halign == right {
right: round($xOffset - $width);
}
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = top) {
top: round(@yOffset - @height);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = middle) {
top: 50%;
margin-top: @yOffset - round(@height / 2);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@valign = bottom) {
bottom: round(@yOffset - @height);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = left) {
left: round(@xOffset - @width);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = center) {
left: 50%;
margin-left: @xOffset - round(@width / 2);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) when (@halign = right) {
right: round(@xOffset - @width);
}
.cssowl-coords-outside(@width, @height, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
// see conditionals
}
cssowl-coords-outside(width, height, valign=top, halign=left, xOffset=0, yOffset=0)
if valign == top
top round(yOffset - height)
else if valign == middle
top 50%
margin-top yOffset - round(height / 2)
else if valign == bottom
bottom round(yOffset - height)
if halign == left
left round(xOffset - width)
else if halign == center
left 50%
margin-left xOffset - round(width / 2)
else if halign == right
right round(xOffset - width)
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-coords-outside top-center'></div>
<div class='example-coords-outside middle-right'></div>
<div class='example-coords-outside bottom-center'></div>
<div class='example-coords-outside middle-left'></div>
</div>
<style>
/* line 3, (__TEMPLATE__) */
.example-coords-outside {
width: 10px;
height: 10px;
position: absolute;
background: #59371f; }
/* line 8, (__TEMPLATE__) */
.example-coords-outside.top-center {
top: -10px;
left: 50%;
margin-left: -5px; }
/* line 10, (__TEMPLATE__) */
.example-coords-outside.middle-right {
top: 50%;
margin-top: -5px;
right: -10px; }
/* line 12, (__TEMPLATE__) */
.example-coords-outside.bottom-center {
bottom: -10px;
left: 50%;
margin-left: -5px; }
/* line 14, (__TEMPLATE__) */
.example-coords-outside.middle-left {
top: 50%;
margin-top: -5px;
left: -10px; }
</style>
.example-coords-outside
width: 10px
height: 10px
position: absolute
background: #59371f
&.top-center
+cssowl-coords-outside(10px, 10px, top, center)
&.middle-right
+cssowl-coords-outside(10px, 10px, middle, right)
&.bottom-center
+cssowl-coords-outside(10px, 10px, bottom, center)
&.middle-left
+cssowl-coords-outside(10px, 10px, middle, left)
.example-coords-outside {
width: 10px;
height: 10px;
position: absolute;
background: #59371f;
&.top-center {
@include cssowl-coords-outside(10px, 10px, top, center);
}
&.middle-right {
@include cssowl-coords-outside(10px, 10px, middle, right);
}
&.bottom-center {
@include cssowl-coords-outside(10px, 10px, bottom, center);
}
&.middle-left {
@include cssowl-coords-outside(10px, 10px, middle, left);
}
}
.example-coords-outside {
width: 10px;
height: 10px;
position: absolute;
background: #59371f;
&.top-center {
.cssowl-coords-outside(10px, 10px, top, center);
}
&.middle-right {
.cssowl-coords-outside(10px, 10px, middle, right);
}
&.bottom-center {
.cssowl-coords-outside(10px, 10px, bottom, center);
}
&.middle-left {
.cssowl-coords-outside(10px, 10px, middle, left);
}
}
.example-coords-outside
width 10px
height 10px
position absolute
background #59371f
&.top-center
cssowl-coords-outside(10px, 10px, top, center)
&.middle-right
cssowl-coords-outside(10px, 10px, middle, right)
&.bottom-center
cssowl-coords-outside(10px, 10px, bottom, center)
&.middle-left
cssowl-coords-outside(10px, 10px, middle, left)
Relative
cssowl-relative
Extendable placeholder and mixin to position an element relatively.
// extendable placeholder
%cssowl-relative
position: relative
// mixin
=cssowl-relative($coordinates:0 false false 0)
+cssowl-coords($coordinates)
position: relative
// extendable placeholder
%cssowl-relative {
position: relative;
}
// mixin
@mixin cssowl-relative($coordinates:0 false false 0) {
@include cssowl-coords($coordinates);
position: relative;
}
// disabled as less doesn't provide placeholders yet
//.cssowl-relative {
// position: relative;
//}
// mixin
.cssowl-relative(@coordinates:0 false false 0) {
.cssowl-coords(@coordinates);
position: relative;
}
// extendable placeholder
$cssowl-relative
position relative
// mixin
cssowl-relative($coordinates=0 false false 0)
cssowl-coords($coordinates)
position relative
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-relative' style='width:10px;height:10px;background:#59371f;'></div>
</div>
<style>
/* line 3, (__TEMPLATE__) */
.example-relative {
top: 20px;
left: 20px;
position: relative; }
</style>
.example-relative
+cssowl-relative(20px false false 20px)
.example-relative {
@include cssowl-relative(20px false false 20px);
}
.example-relative {
.cssowl-relative(20px false false 20px);
}
.example-relative
cssowl-relative(20px false false 20px)
Sprite
In order to use the following mixins, you need to define some variables and mixins which we usually place into a spritesheet. Take a look at the spritesheet below to see which variables and mixins are required. You can, of cause, write this spritesheet yourself but we recommend to check out our Spriteowl Photoshop Extension which will generate this spritesheet for you right out of Photoshop!
For the examples below we use this image as a sprite:
// variables for the sprite's image
$sprite-sheet-width: 136px !default
$sprite-sheet-height: 111px !default
$sprite-sheet-image: url("sprite.png") !default
$sprite-sheet-image-2x: url("sprite@2x.png") !default
$sprite-sheet: $sprite-sheet-width $sprite-sheet-height $sprite-sheet-image $sprite-sheet-image-2x sprite !default
=sprite-element()
background-image: $sprite-sheet-image
background-repeat: no-repeat
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx)
background-image: $sprite-sheet-image-2x
background-size: $sprite-sheet-width $sprite-sheet-height
%sprite-element
+sprite-element()
// variables for each of the sprite's elements
$sprite-owl-up-x: -93px !default
$sprite-owl-up-y: 0 !default
$sprite-owl-up-width: 16px !default
$sprite-owl-up-height: 16px !default
$sprite-owl-up: $sprite-owl-up-x $sprite-owl-up-y $sprite-owl-up-width $sprite-owl-up-height sprite-owl-up !default
=sprite-owl-up-width()
width: $sprite-owl-up-width
%sprite-owl-up-width
+sprite-owl-up-width()
=sprite-owl-up-height()
height: $sprite-owl-up-height
%sprite-owl-up-height
+sprite-owl-up-height()
=sprite-owl-up-size()
+sprite-owl-up-width()
+sprite-owl-up-height()
%sprite-owl-up-size
+sprite-owl-up-size()
=sprite-owl-up-position()
background-position: $sprite-owl-up-x $sprite-owl-up-y
%sprite-owl-up-position
+sprite-owl-up-position()
=sprite-owl-up-adjust()
+sprite-owl-up-size()
+sprite-owl-up-position()
%sprite-owl-up-adjust
+sprite-owl-up-adjust()
=sprite-owl-up()
+sprite-owl-up-adjust()
@extend %sprite-element
%sprite-owl-up
+sprite-owl-up()
// ...
// variables for the sprite's image
$sprite-sheet-width: 136px !default;
$sprite-sheet-height: 111px !default;
$sprite-sheet-image: url("sprite.png") !default;
$sprite-sheet-image-2x: url("sprite@2x.png") !default;
$sprite-sheet: $sprite-sheet-width $sprite-sheet-height $sprite-sheet-image $sprite-sheet-image-2x sprite !default;
@mixin sprite-element() {
background-image: $sprite-sheet-image;
background-repeat: no-repeat;
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
background-image: $sprite-sheet-image-2x;
background-size: $sprite-sheet-width $sprite-sheet-height;
}
}
%sprite-element {
@include sprite-element();
}
// variables for each of the sprite's elements
$sprite-owl-up-x: -93px !default;
$sprite-owl-up-y: 0 !default;
$sprite-owl-up-width: 16px !default;
$sprite-owl-up-height: 16px !default;
$sprite-owl-up: $sprite-owl-up-x $sprite-owl-up-y $sprite-owl-up-width $sprite-owl-up-height sprite-owl-up !default;
@mixin sprite-owl-up-width() {
width: $sprite-owl-up-width;
}
%sprite-owl-up-width {
@include sprite-owl-up-width();
}
@mixin sprite-owl-up-height() {
height: $sprite-owl-up-height;
}
%sprite-owl-up-height {
@include sprite-owl-up-height();
}
@mixin sprite-owl-up-size() {
@include sprite-owl-up-width();
@include sprite-owl-up-height();
}
%sprite-owl-up-size {
@include sprite-owl-up-size();
}
@mixin sprite-owl-up-position() {
background-position: $sprite-owl-up-x $sprite-owl-up-y;
}
%sprite-owl-up-position {
@include sprite-owl-up-position();
}
@mixin sprite-owl-up-adjust() {
@include sprite-owl-up-size();
@include sprite-owl-up-position();
}
%sprite-owl-up-adjust {
@include sprite-owl-up-adjust();
}
@mixin sprite-owl-up() {
@include sprite-owl-up-adjust();
@extend %sprite-element;
}
%sprite-owl-up {
@include sprite-owl-up();
}
// ...
// variables for the sprite's image
@sprite-sheet-width: 136px;
@sprite-sheet-height: 111px;
@sprite-sheet-image: url("sprite.png");
@sprite-sheet-image-2x: url("sprite@2x.png");
@sprite-sheet: @sprite-sheet-width @sprite-sheet-height @sprite-sheet-image @sprite-sheet-image-2x sprite;
.sprite-element() {
background-image: @sprite-sheet-image;
background-repeat: no-repeat;
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
background-image: @sprite-sheet-image-2x;
background-size: @sprite-sheet-width @sprite-sheet-height;
}
}
.sprite-element {
.sprite-element();
}
// variables for each of the sprite's elements
@sprite-owl-up-x: -93px;
@sprite-owl-up-y: 0;
@sprite-owl-up-width: 16px;
@sprite-owl-up-height: 16px;
@sprite-owl-up: @sprite-owl-up-x @sprite-owl-up-y @sprite-owl-up-width @sprite-owl-up-height sprite-owl-up;
.sprite-owl-up-width() {
width: @sprite-owl-up-width;
}
.sprite-owl-up-height() {
height: @sprite-owl-up-height;
}
.sprite-owl-up-size() {
.sprite-owl-up-width();
.sprite-owl-up-height();
}
.sprite-owl-up-position() {
background-position: @sprite-owl-up-x @sprite-owl-up-y;
}
.sprite-owl-up-adjust() {
.sprite-owl-up-size();
.sprite-owl-up-position();
}
.sprite-owl-up() {
.sprite-owl-up-adjust();
&:extend(.sprite-element);
}
.less-sprite-element(sprite-owl-up) {
.sprite-owl-up()
}
// ...
// variables for the sprite's image
$sprite-sheet-width ?= 136px
$sprite-sheet-height ?= 111px
$sprite-sheet-image ?= url("sprite.png")
$sprite-sheet-image-2x ?= url("sprite@2x.png")
$sprite-sheet ?= $sprite-sheet-width $sprite-sheet-height $sprite-sheet-image-2x $sprite-sheet-image-2x sprite
sprite-element()
background-image: $sprite-sheet-image
background-repeat: no-repeat
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx)
background-image: $sprite-sheet-image-2x
background-size: $sprite-sheet-width $sprite-sheet-height
$sprite-element
sprite-element()
// variables for each of the sprite's elements
$sprite-owl-up-x ?= -93px
$sprite-owl-up-y ?= 0
$sprite-owl-up-width ?= 16px
$sprite-owl-up-height ?= 16px
$sprite-owl-up ?= $sprite-owl-up-x $sprite-owl-up-y $sprite-owl-up-width $sprite-owl-up-height sprite-owl-up
sprite-owl-up-width()
width: $sprite-owl-up-width
$sprite-owl-up-width
sprite-owl-up-width()
sprite-owl-up-height()
height: $sprite-owl-up-height
$sprite-owl-up-height
sprite-owl-up-height()
sprite-owl-up-size()
sprite-owl-up-width()
sprite-owl-up-height()
$sprite-owl-up-size
sprite-owl-up-size()
sprite-owl-up-position()
background-position: $sprite-owl-up-x $sprite-owl-up-y
$sprite-owl-up-position
sprite-owl-up-position()
sprite-owl-up-adjust()
sprite-owl-up-size()
sprite-owl-up-position()
$sprite-owl-up-adjust
sprite-owl-up-adjust()
sprite-owl-up()
sprite-owl-up-adjust()
@extend $sprite-element
$sprite-owl-up
sprite-owl-up()
// ...
cssowl-sprite-display
Add a sprite element with its width, height, background-image and background-position.
@mixin cssowl-sprite-display($element, $display:inline-block)
display: $display
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-display($element, $display:inline-block) {
display: $display;
@extend %#{nth($element, 5)};
}
.cssowl-sprite-display(@element, @display:inline-block) {
display: @display;
.less-sprite-element(extract(@element, 5));
}
cssowl-sprite-display($element, $display=inline-block)
display $display
@extend ${$element[4]}
Lorem ipsum dolor sit atem
Lorem <span class="example-sprite-display"></span> ipsum dolor sit atem
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-display {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-display {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 275, source/assets/css/site/_sprite.sass */
.example-sprite-display {
width: 16px;
height: 16px;
background-position: -93px 0; }
/* line 3, (__TEMPLATE__) */
.example-sprite-display {
display: inline-block; }
</style>
.example-sprite-display
+cssowl-sprite-display($sprite-owl-up)
.example-sprite-display {
@include cssowl-sprite-display($sprite-owl-up);
}
.example-sprite-display {
.cssowl-sprite-display(@sprite-owl-up);
}
.example-sprite-display
cssowl-sprite-display($sprite-owl-up)
cssowl-sprite-replace
Add a sprite element and hide the element's content.
@mixin cssowl-sprite-replace($element)
@extend %cssowl-text-hide
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-replace($element) {
@extend %cssowl-text-hide;
@extend %#{nth($element, 5)};
}
.cssowl-sprite-replace(@element) {
.cssowl-text-hide();
.less-sprite-element(extract(@element, 5));
}
cssowl-sprite-replace($element)
@extend $cssowl-text-hide
@extend ${$element[4]}
Lorem ipsum dolor sit atem
Lorem <span class="example-replace">ipsum</span> dolor sit atem
<style>
/* line 9, bower_components/cssowl/lib/sass/cssowl/text.sass */
.example-replace {
overflow: hidden;
text-indent: 1000%;
white-space: nowrap;
display: inline-block; }
/* line 35, source/assets/css/site/_sprite.sass */
.example-replace {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-replace {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 275, source/assets/css/site/_sprite.sass */
.example-replace {
width: 16px;
height: 16px;
background-position: -93px 0; }
</style>
.example-replace
+cssowl-sprite-replace($sprite-owl-up)
.example-replace {
@include cssowl-sprite-replace($sprite-owl-up);
}
.example-replace {
.cssowl-sprite-replace(@sprite-owl-up);
}
.example-replace
cssowl-sprite-replace($sprite-owl-up)
cssowl-sprite-absolute
Place a sprite element with position: absolute;.
=cssowl-sprite-absolute($element, $coordinates:0 false false 0)
+cssowl-absolute($coordinates)
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-absolute($element, $coordinates:0 false false 0) {
@include cssowl-absolute($coordinates);
@extend %#{nth($element, 5)};
}
.cssowl-sprite-absolute(@element, @coordinates:0 false false 0) {
.cssowl-absolute(@coordinates);
.less-sprite-element(extract(@element, 5));
}
cssowl-sprite-absolute($element, $coordinates=0 false false 0)
cssowl-absolute($coordinates)
@extend ${$element[4]}
<div class='wrapper' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='example-sprite-absolute'></div>
</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-absolute {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-absolute {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 275, source/assets/css/site/_sprite.sass */
.example-sprite-absolute {
width: 16px;
height: 16px;
background-position: -93px 0; }
/* line 3, (__TEMPLATE__) */
.example-sprite-absolute {
top: 10px;
left: 10px;
right: 0;
bottom: 0;
position: absolute; }
</style>
.example-sprite-absolute
+cssowl-sprite-absolute($sprite-owl-up, 10px 0 0 10px)
.example-sprite-absolute {
@include cssowl-sprite-absolute($sprite-owl-up, 10px 0 0 10px);
}
.example-sprite-absolute {
.cssowl-sprite-absolute(@sprite-owl-up, 10px 0 0 10px);
}
.example-sprite-absolute
cssowl-sprite-absolute($sprite-owl-up, 10px 0 0 10px)
cssowl-sprite-absolute-inside
Place a sprite element with position: absolute; inside the bounding box.
=cssowl-sprite-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
+cssowl-absolute-inside(nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
@include cssowl-absolute-inside(nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
@extend %#{nth($element, 5)};
}
.cssowl-sprite-absolute-inside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
.cssowl-absolute-inside(extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
.less-sprite-element(extract(@element, 5));
}
cssowl-sprite-absolute-inside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
cssowl-absolute-inside($element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
@extend ${$element[4]}
<div class='example-sprite-absolute-inside' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='top-center'></div>
<div class='middle-right'></div>
<div class='bottom-center'></div>
<div class='middle-left'></div>
</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-inside > .bottom-center, .example-sprite-absolute-inside > .middle-left, .example-sprite-absolute-inside > .top-center, .example-sprite-absolute-inside > .middle-right {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-inside > .bottom-center, .example-sprite-absolute-inside > .middle-left, .example-sprite-absolute-inside > .top-center, .example-sprite-absolute-inside > .middle-right {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 155, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-inside > .bottom-center {
width: 11px;
height: 6px;
background-position: -96px -37px; }
/* line 185, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-inside > .middle-left {
width: 6px;
height: 11px;
background-position: -98px -76px; }
/* line 215, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-inside > .top-center {
width: 11px;
height: 6px;
background-position: -96px -50px; }
/* line 245, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-inside > .middle-right {
width: 6px;
height: 11px;
background-position: -98px -61px; }
/* line 4, (__TEMPLATE__) */
.example-sprite-absolute-inside > .top-center {
width: 11px;
height: 6px;
position: absolute;
top: 0;
left: 50%;
margin-left: -6px; }
/* line 6, (__TEMPLATE__) */
.example-sprite-absolute-inside > .middle-right {
width: 6px;
height: 11px;
position: absolute;
top: 50%;
margin-top: -6px;
right: 0; }
/* line 8, (__TEMPLATE__) */
.example-sprite-absolute-inside > .bottom-center {
width: 11px;
height: 6px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -6px; }
/* line 10, (__TEMPLATE__) */
.example-sprite-absolute-inside > .middle-left {
width: 6px;
height: 11px;
position: absolute;
top: 50%;
margin-top: -6px;
left: 0; }
</style>
.example-sprite-absolute-inside
> .top-center
+cssowl-sprite-absolute-inside($sprite-arrow-down, top, center)
> .middle-right
+cssowl-sprite-absolute-inside($sprite-arrow-left, middle, right)
> .bottom-center
+cssowl-sprite-absolute-inside($sprite-arrow-up, bottom, center)
> .middle-left
+cssowl-sprite-absolute-inside($sprite-arrow-right, middle, left)
.example-sprite-absolute-inside {
> .top-center {
@include cssowl-sprite-absolute-inside($sprite-arrow-down, top, center);
}
> .middle-right {
@include cssowl-sprite-absolute-inside($sprite-arrow-left, middle, right);
}
> .bottom-center {
@include cssowl-sprite-absolute-inside($sprite-arrow-up, bottom, center);
}
> .middle-left {
@include cssowl-sprite-absolute-inside($sprite-arrow-right, middle, left);
}
}
.example-sprite-absolute-inside {
> .top-center {
.cssowl-sprite-absolute-inside(@sprite-arrow-down, top, center);
}
> .middle-right {
.cssowl-sprite-absolute-inside(@sprite-arrow-left, middle, right);
}
> .bottom-center {
.cssowl-sprite-absolute-inside(@sprite-arrow-up, bottom, center);
}
> .middle-left {
.cssowl-sprite-absolute-inside(@sprite-arrow-right, middle, left);
}
}
.example-sprite-absolute-inside
> .top-center
cssowl-sprite-absolute-inside($sprite-arrow-down, top, center)
> .middle-right
cssowl-sprite-absolute-inside($sprite-arrow-left, middle, right)
> .bottom-center
cssowl-sprite-absolute-inside($sprite-arrow-up, bottom, center)
> .middle-left
cssowl-sprite-absolute-inside($sprite-arrow-right, middle, left)
cssowl-sprite-absolute-outside
Place a sprite element with position: absolute; outside the bounding box.
=cssowl-sprite-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
+cssowl-absolute-outside(nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
@include cssowl-absolute-outside(nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
@extend %#{nth($element, 5)};
}
.cssowl-sprite-absolute-outside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
.cssowl-absolute-outside(extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
.less-sprite-element(extract(@element, 5));
}
cssowl-sprite-absolute-outside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
cssowl-absolute-outside($element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
@extend ${$element[4]}
<div class='example-sprite-absolute-outside' style='position:relative;width:50px;height:50px;border:1px solid #59371f;'>
<div class='top-center'></div>
<div class='middle-right'></div>
<div class='bottom-center'></div>
<div class='middle-left'></div>
</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-outside > .top-center, .example-sprite-absolute-outside > .middle-right, .example-sprite-absolute-outside > .bottom-center, .example-sprite-absolute-outside > .middle-left {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-outside > .top-center, .example-sprite-absolute-outside > .middle-right, .example-sprite-absolute-outside > .bottom-center, .example-sprite-absolute-outside > .middle-left {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 155, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-outside > .top-center {
width: 11px;
height: 6px;
background-position: -96px -37px; }
/* line 185, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-outside > .middle-right {
width: 6px;
height: 11px;
background-position: -98px -76px; }
/* line 215, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-outside > .bottom-center {
width: 11px;
height: 6px;
background-position: -96px -50px; }
/* line 245, source/assets/css/site/_sprite.sass */
.example-sprite-absolute-outside > .middle-left {
width: 6px;
height: 11px;
background-position: -98px -61px; }
/* line 4, (__TEMPLATE__) */
.example-sprite-absolute-outside > .top-center {
width: 11px;
height: 6px;
position: absolute;
top: -6px;
left: 50%;
margin-left: -6px; }
/* line 6, (__TEMPLATE__) */
.example-sprite-absolute-outside > .middle-right {
width: 6px;
height: 11px;
position: absolute;
top: 50%;
margin-top: -6px;
right: -6px; }
/* line 8, (__TEMPLATE__) */
.example-sprite-absolute-outside > .bottom-center {
width: 11px;
height: 6px;
position: absolute;
bottom: -6px;
left: 50%;
margin-left: -6px; }
/* line 10, (__TEMPLATE__) */
.example-sprite-absolute-outside > .middle-left {
width: 6px;
height: 11px;
position: absolute;
top: 50%;
margin-top: -6px;
left: -6px; }
</style>
.example-sprite-absolute-outside
> .top-center
+cssowl-sprite-absolute-outside($sprite-arrow-up, top, center)
> .middle-right
+cssowl-sprite-absolute-outside($sprite-arrow-right, middle, right)
> .bottom-center
+cssowl-sprite-absolute-outside($sprite-arrow-down, bottom, center)
> .middle-left
+cssowl-sprite-absolute-outside($sprite-arrow-left, middle, left)
.example-sprite-absolute-outside {
> .top-center {
@include cssowl-sprite-absolute-outside($sprite-arrow-up, top, center);
}
> .middle-right {
@include cssowl-sprite-absolute-outside($sprite-arrow-right, middle, right);
}
> .bottom-center {
@include cssowl-sprite-absolute-outside($sprite-arrow-down, bottom, center);
}
> .middle-left {
@include cssowl-sprite-absolute-outside($sprite-arrow-left, middle, left);
}
}
.example-sprite-absolute-outside {
> .top-center {
.cssowl-sprite-absolute-outside(@sprite-arrow-up, top, center);
}
> .middle-right {
.cssowl-sprite-absolute-outside(@sprite-arrow-right, middle, right);
}
> .bottom-center {
.cssowl-sprite-absolute-outside(@sprite-arrow-down, bottom, center);
}
> .middle-left {
.cssowl-sprite-absolute-outside(@sprite-arrow-left, middle, left);
}
}
.example-sprite-absolute-outside
> .top-center
cssowl-sprite-absolute-outside($sprite-arrow-up, top, center)
> .middle-right
cssowl-sprite-absolute-outside($sprite-arrow-right, middle, right)
> .bottom-center
cssowl-sprite-absolute-outside($sprite-arrow-down, bottom, center)
> .middle-left
cssowl-sprite-absolute-outside($sprite-arrow-left, middle, left)
cssowl-sprite-after
Add a sprite element with the :after pseudo selector.
=cssowl-sprite-after($element, $margin:0 0 0 0, $display:inline-block)
&:after
content: ""
margin: $margin
display: $display
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-after($element, $margin:0 0 0 0, $display:inline-block) {
&:after {
content: "";
margin: $margin;
display: $display;
@extend %#{nth($element, 5)};
}
}
.cssowl-sprite-after(@element, @margin:0 0 0 0, @display:inline-block) {
&:after {
content: "";
margin: @margin;
display: @display;
.less-sprite-element(extract(@element, 5));
}
}
cssowl-sprite-after($element, $margin=0 0 0 0, $display=inline-block)
&:after
content ""
margin $margin
display $display
@extend ${$element[4]}
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-after'>Quia sint quis nam et quia ducimus consequatur cumque.</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-after:after {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-after:after {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 275, source/assets/css/site/_sprite.sass */
.example-sprite-after:after {
width: 16px;
height: 16px;
background-position: -93px 0; }
/* line 35, bower_components/cssowl/lib/sass/cssowl/sprite.sass */
.example-sprite-after:after {
content: "";
margin: 0 0 -2px 10px;
display: inline-block; }
</style>
.example-sprite-after
+cssowl-sprite-after($sprite-owl-up, 0 0 -2px 10px)
.example-sprite-after {
@include cssowl-sprite-after($sprite-owl-up, 0 0 -2px 10px);
}
.example-sprite-after {
.cssowl-sprite-after(@sprite-owl-up, 0 0 -2px 10px);
}
.example-sprite-after
cssowl-sprite-after($sprite-owl-up, 0 0 -2px 10px)
cssowl-sprite-after-float
Add a sprite element with the :after pseudo selector and place it with the float attribute.
=cssowl-sprite-after-float($element, $margin:0 0 0 0, $float:right)
+cssowl-after-float("", $margin, $float)
&:after
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-after-float($element, $margin:0 0 0 0, $float:right) {
@include cssowl-after-float("", $margin, $float);
&:after {
@extend %#{nth($element, 5)};
}
}
.cssowl-sprite-after-float(@element, @margin:0 0 0 0, @float:right) {
.cssowl-after-float("", @margin, @float);
&:after {
.less-sprite-element(extract(@element, 5));
}
}
cssowl-sprite-after-float($element, $margin=0 0 0 0, $float=right)
cssowl-after-float("", $margin, $float)
&:after
@extend ${$element[4]}
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-after-float'>Quia sint quis nam et quia ducimus consequatur cumque.</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-after-float:after {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-after-float:after {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 275, source/assets/css/site/_sprite.sass */
.example-sprite-after-float:after {
width: 16px;
height: 16px;
background-position: -93px 0; }
/* line 23, bower_components/cssowl/lib/sass/cssowl/after.sass */
.example-sprite-after-float:after {
float: right;
margin: 0 5px 0 0;
content: ""; }
</style>
.example-sprite-after-float
+cssowl-sprite-after-float($sprite-owl-up, 0 5px 0 0)
.example-sprite-after-float {
@include cssowl-sprite-after-float($sprite-owl-up, 0 5px 0 0);
}
.example-sprite-after-float {
.cssowl-sprite-after-float(@sprite-owl-up, 0 5px 0 0);
}
.example-sprite-after-float
cssowl-sprite-after-float($sprite-owl-up, 0 5px 0 0)
cssowl-sprite-after-absolute
Add a sprite element with the :after pseudo selector and place it absolutely.
=cssowl-sprite-after-absolute($element, $coordinates:0 false false 0)
+cssowl-after-absolute("", $coordinates)
&:after
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-after-absolute($element, $coordinates:0 false false 0) {
@include cssowl-after-absolute("", $coordinates);
&:after {
@extend %#{nth($element, 5)};
}
}
.cssowl-sprite-after-absolute(@element, @coordinates:0 false false 0) {
.cssowl-after-absolute("", @coordinates);
&:after {
.less-sprite-element(extract(@element, 5));
}
}
cssowl-sprite-after-absolute($element, $coordinates=0 false false 0)
cssowl-after-absolute("", $coordinates)
&:after
@extend ${$element[4]}
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-after-absolute' style='margin-right:20px;'>Quia sint quis nam et quia ducimus consequatur cumque.</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-after-absolute:after {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-after-absolute:after {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 275, source/assets/css/site/_sprite.sass */
.example-sprite-after-absolute:after {
width: 16px;
height: 16px;
background-position: -93px 0; }
/* line 3, (__TEMPLATE__) */
.example-sprite-after-absolute {
position: relative; }
/* line 17, bower_components/cssowl/lib/sass/cssowl/after.sass */
.example-sprite-after-absolute:after {
content: "";
top: 2px;
right: -20px;
position: absolute; }
</style>
.example-sprite-after-absolute
+cssowl-sprite-after-absolute($sprite-owl-up, 2px -20px false false)
.example-sprite-after-absolute {
@include cssowl-sprite-after-absolute($sprite-owl-up, 2px -20px false false);
}
.example-sprite-after-absolute {
.cssowl-sprite-after-absolute(@sprite-owl-up, 2px -20px false false);
}
.example-sprite-after-absolute
cssowl-sprite-after-absolute($sprite-owl-up, 2px -20px false false)
cssowl-sprite-after-absolute-inside
Add a sprite element with the :after pseudo selector and place it absolutely inside the bounding box.
=cssowl-sprite-after-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
+cssowl-after-absolute-inside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
&:after
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-after-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
@include cssowl-after-absolute-inside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
&:after {
@extend %#{nth($element, 5)};
}
}
.cssowl-sprite-after-absolute-inside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
.cssowl-after-absolute-inside("", extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
&:after {
.less-sprite-element(extract(@element, 5));
}
}
cssowl-sprite-after-absolute-inside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
cssowl-after-absolute-inside("", $element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
&:after
@extend ${$element[4]}
Quia sint quis
<div class='example-sprite-after-absolute-inside' style='display:inline-block;border-top:1px solid #59371f;padding-top: 5px;'>Quia sint quis</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-after-absolute-inside:after {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-after-absolute-inside:after {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 215, source/assets/css/site/_sprite.sass */
.example-sprite-after-absolute-inside:after {
width: 11px;
height: 6px;
background-position: -96px -50px; }
/* line 3, (__TEMPLATE__) */
.example-sprite-after-absolute-inside {
position: relative; }
/* line 4, bower_components/cssowl/lib/sass/cssowl/after.sass */
.example-sprite-after-absolute-inside:after {
content: "";
width: 11px;
height: 6px;
position: absolute;
top: 0;
left: 50%;
margin-left: -6px; }
</style>
.example-sprite-after-absolute-inside
+cssowl-sprite-after-absolute-inside($sprite-arrow-down, top, center)
.example-sprite-after-absolute-inside {
@include cssowl-sprite-after-absolute-inside($sprite-arrow-down, top, center);
}
.example-sprite-after-absolute-inside {
.cssowl-sprite-after-absolute-inside(@sprite-arrow-down, top, center);
}
.example-sprite-after-absolute-inside
cssowl-sprite-after-absolute-inside($sprite-arrow-down, top, center)
cssowl-sprite-after-absolute-outside
Add a sprite element with the :after pseudo selector and place it absolutely outside the bounding box.
=cssowl-sprite-after-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0, $float:left)
+cssowl-after-absolute-outside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
&:after
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-after-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0, $float:left) {
@include cssowl-after-absolute-outside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
&:after {
@extend %#{nth($element, 5)};
}
}
.cssowl-sprite-after-absolute-outside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0, @float:left) {
.cssowl-after-absolute-outside("", extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
&:after {
.less-sprite-element(extract(@element, 5));
}
}
cssowl-sprite-after-absolute-outside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0, $float=left)
cssowl-after-absolute-outside("", $element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
&:after
@extend ${$element[4]}
Quia sint quis
<div class='example-sprite-after-absolute-outside' style='display:inline-block;border-top:1px solid #59371f;padding-top: 5px;'>Quia sint quis</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-after-absolute-outside:after {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-after-absolute-outside:after {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 155, source/assets/css/site/_sprite.sass */
.example-sprite-after-absolute-outside:after {
width: 11px;
height: 6px;
background-position: -96px -37px; }
/* line 3, (__TEMPLATE__) */
.example-sprite-after-absolute-outside {
position: relative; }
/* line 10, bower_components/cssowl/lib/sass/cssowl/after.sass */
.example-sprite-after-absolute-outside:after {
content: "";
width: 11px;
height: 6px;
position: absolute;
top: -6px;
left: 50%;
margin-left: -6px; }
</style>
.example-sprite-after-absolute-outside
+cssowl-sprite-after-absolute-outside($sprite-arrow-up, top, center)
.example-sprite-after-absolute-outside {
@include cssowl-sprite-after-absolute-outside($sprite-arrow-up, top, center);
}
.example-sprite-after-absolute-outside {
.cssowl-sprite-after-absolute-outside(@sprite-arrow-up, top, center);
}
.example-sprite-after-absolute-outside
cssowl-sprite-after-absolute-outside($sprite-arrow-up, top, center)
cssowl-sprite-before
Add a sprite element with the :before pseudo selector.
=cssowl-sprite-before($element, $margin:0 0 0 0, $display:inline-block)
&:before
content: ""
margin: $margin
display: $display
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-before($element, $margin:0 0 0 0, $display:inline-block) {
&:before {
content: "";
margin: $margin;
display: $display;
@extend %#{nth($element, 5)};
}
}
.cssowl-sprite-before(@element, @margin:0 0 0 0, @display:inline-block) {
&:before {
content: "";
margin: @margin;
display: @display;
.less-sprite-element(extract(@element, 5));
}
}
cssowl-sprite-before($element, $margin=0 0 0 0, $display=inline-block)
&:before
content ""
margin $margin
display $display
@extend ${$element[4]}
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-before'>Quia sint quis nam et quia ducimus consequatur cumque.</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-before:before {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-before:before {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 275, source/assets/css/site/_sprite.sass */
.example-sprite-before:before {
width: 16px;
height: 16px;
background-position: -93px 0; }
/* line 62, bower_components/cssowl/lib/sass/cssowl/sprite.sass */
.example-sprite-before:before {
content: "";
margin: 0 10px -2px 0;
display: inline-block; }
</style>
.example-sprite-before
+cssowl-sprite-before($sprite-owl-up, 0 10px -2px 0)
.example-sprite-before {
@include cssowl-sprite-before($sprite-owl-up, 0 10px -2px 0);
}
.example-sprite-before {
.cssowl-sprite-before(@sprite-owl-up, 0 10px -2px 0);
}
.example-sprite-before
cssowl-sprite-before($sprite-owl-up, 0 10px -2px 0)
cssowl-sprite-before-float
Add a sprite element with the :before pseudo selector and place it with the float attribute.
=cssowl-sprite-before-float($element, $margin:0 0 0 0, $float:left)
+cssowl-before-float("", $margin, $float)
&:before
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-before-float($element, $margin:0 0 0 0, $float:left) {
@include cssowl-before-float("", $margin, $float);
&:before {
@extend %#{nth($element, 5)};
}
}
.cssowl-sprite-before-float(@element, @margin:0 0 0 0, @float:left) {
.cssowl-before-float("", @margin, @float);
&:before {
.less-sprite-element(extract(@element, 5));
}
}
cssowl-sprite-before-float($element, $margin=0 0 0 0, $float=left)
cssowl-before-float("", $margin, $float)
&:before
@extend ${$element[4]}
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-before-float'>Quia sint quis nam et quia ducimus consequatur cumque.</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-before-float:before {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-before-float:before {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 275, source/assets/css/site/_sprite.sass */
.example-sprite-before-float:before {
width: 16px;
height: 16px;
background-position: -93px 0; }
/* line 23, bower_components/cssowl/lib/sass/cssowl/before.sass */
.example-sprite-before-float:before {
float: left;
margin: 0 5px 0 0;
content: ""; }
</style>
.example-sprite-before-float
+cssowl-sprite-before-float($sprite-owl-up, 0 5px 0 0)
.example-sprite-before-float {
@include cssowl-sprite-before-float($sprite-owl-up, 0 5px 0 0);
}
.example-sprite-before-float {
.cssowl-sprite-before-float(@sprite-owl-up, 0 5px 0 0);
}
.example-sprite-before-float
cssowl-sprite-before-float($sprite-owl-up, 0 5px 0 0)
cssowl-sprite-before-absolute
Add a sprite element with the :before pseudo selector and place it absolutely.
=cssowl-sprite-before-absolute($element, $coordinates:0 false false 0)
+cssowl-before-absolute("", $coordinates)
&:before
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-before-absolute($element, $coordinates:0 false false 0) {
@include cssowl-before-absolute("", $coordinates);
&:before {
@extend %#{nth($element, 5)};
}
}
.cssowl-sprite-before-absolute(@element, @coordinates:0 false false 0) {
.cssowl-before-absolute("", @coordinates);
&:before {
.less-sprite-element(extract(@element, 5));
}
}
cssowl-sprite-before-absolute($element, $coordinates=0 false false 0)
cssowl-before-absolute("", $coordinates)
&:before
@extend ${$element[4]}
Quia sint quis nam et quia ducimus consequatur cumque.
<div class='example-sprite-before-absolute' style='margin-left:20px;'>Quia sint quis nam et quia ducimus consequatur cumque.</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-before-absolute:before {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-before-absolute:before {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 275, source/assets/css/site/_sprite.sass */
.example-sprite-before-absolute:before {
width: 16px;
height: 16px;
background-position: -93px 0; }
/* line 3, (__TEMPLATE__) */
.example-sprite-before-absolute {
position: relative; }
/* line 17, bower_components/cssowl/lib/sass/cssowl/before.sass */
.example-sprite-before-absolute:before {
content: "";
top: 2px;
left: -20px;
position: absolute; }
</style>
.example-sprite-before-absolute
+cssowl-sprite-before-absolute($sprite-owl-up, 2px false false -20px)
.example-sprite-before-absolute {
@include cssowl-sprite-before-absolute($sprite-owl-up, 2px false false -20px);
}
.example-sprite-before-absolute {
.cssowl-sprite-before-absolute(@sprite-owl-up, 2px false false -20px);
}
.example-sprite-before-absolute
cssowl-sprite-before-absolute($sprite-owl-up, 2px false false -20px)
cssowl-sprite-before-absolute-inside
Add a sprite element with the :before pseudo selector and place it absolutely inside the bounding box.
=cssowl-sprite-before-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0)
+cssowl-before-absolute-inside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
&:before
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-before-absolute-inside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0) {
@include cssowl-before-absolute-inside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
&:before {
@extend %#{nth($element, 5)};
}
}
.cssowl-sprite-before-absolute-inside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0) {
.cssowl-before-absolute-inside("", extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
&:before {
.less-sprite-element(extract(@element, 5));
}
}
cssowl-sprite-before-absolute-inside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0)
cssowl-before-absolute-inside("", $element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
&:before
@extend ${$element[4]}
Quia sint quis
<div class='example-sprite-before-absolute-inside' style='display:inline-block;border-top:1px solid #59371f;padding-top: 5px;'>Quia sint quis</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-before-absolute-inside:before {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-before-absolute-inside:before {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 215, source/assets/css/site/_sprite.sass */
.example-sprite-before-absolute-inside:before {
width: 11px;
height: 6px;
background-position: -96px -50px; }
/* line 3, (__TEMPLATE__) */
.example-sprite-before-absolute-inside {
position: relative; }
/* line 4, bower_components/cssowl/lib/sass/cssowl/before.sass */
.example-sprite-before-absolute-inside:before {
content: "";
width: 11px;
height: 6px;
position: absolute;
top: 0;
left: 50%;
margin-left: -6px; }
</style>
.example-sprite-before-absolute-inside
+cssowl-sprite-before-absolute-inside($sprite-arrow-down, top, center)
.example-sprite-before-absolute-inside {
@include cssowl-sprite-before-absolute-inside($sprite-arrow-down, top, center);
}
.example-sprite-before-absolute-inside {
.cssowl-sprite-before-absolute-inside(@sprite-arrow-down, top, center);
}
.example-sprite-before-absolute-inside
cssowl-sprite-before-absolute-inside($sprite-arrow-down, top, center)
cssowl-sprite-before-absolute-outside
Add a sprite element with the :before pseudo selector and place it absolutely outside the bounding box.
=cssowl-sprite-before-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0, $float:left)
+cssowl-before-absolute-outside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset)
&:before
@extend %#{nth($element, 5)}
@mixin cssowl-sprite-before-absolute-outside($element, $valign:top, $halign:left, $xOffset:0, $yOffset:0, $float:left) {
@include cssowl-before-absolute-outside("", nth($element, 3), nth($element, 4), $valign, $halign, $xOffset, $yOffset);
&:before {
@extend %#{nth($element, 5)};
}
}
.cssowl-sprite-before-absolute-outside(@element, @valign:top, @halign:left, @xOffset:0, @yOffset:0, @float:left) {
.cssowl-before-absolute-outside("", extract(@element, 3), extract(@element, 4), @valign, @halign, @xOffset, @yOffset);
&:before {
.less-sprite-element(extract(@element, 5));
}
}
cssowl-sprite-before-absolute-outside($element, $valign=top, $halign=left, $xOffset=0, $yOffset=0, $float=left)
cssowl-before-absolute-outside("", $element[2], $element[3], $valign, $halign, $xOffset, $yOffset)
&:before
@extend ${$element[4]}
Quia sint quis
<div class='example-sprite-before-absolute-outside' style='display:inline-block;border-top:1px solid #59371f;padding-top: 5px;'>Quia sint quis</div>
<style>
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-before-absolute-outside:before {
background-image: url("sprite.png");
background-repeat: no-repeat; }
@media only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
/* line 35, source/assets/css/site/_sprite.sass */
.example-sprite-before-absolute-outside:before {
background-image: url("sprite@2x.png");
background-size: 136px 111px; } }
/* line 155, source/assets/css/site/_sprite.sass */
.example-sprite-before-absolute-outside:before {
width: 11px;
height: 6px;
background-position: -96px -37px; }
/* line 3, (__TEMPLATE__) */
.example-sprite-before-absolute-outside {
position: relative; }
/* line 10, bower_components/cssowl/lib/sass/cssowl/before.sass */
.example-sprite-before-absolute-outside:before {
content: "";
width: 11px;
height: 6px;
position: absolute;
top: -6px;
left: 50%;
margin-left: -6px; }
</style>
.example-sprite-before-absolute-outside
+cssowl-sprite-before-absolute-outside($sprite-arrow-up, top, center)
.example-sprite-before-absolute-outside {
@include cssowl-sprite-before-absolute-outside($sprite-arrow-up, top, center);
}
.example-sprite-before-absolute-outside {
.cssowl-sprite-before-absolute-outside(@sprite-arrow-up, top, center);
}
.example-sprite-before-absolute-outside
cssowl-sprite-before-absolute-outside($sprite-arrow-up, top, center)
Text
cssowl-text-hide
Extendable placeholder and mixin to hide an element's content.
// mixin
=cssowl-text-hide()
overflow: hidden
text-indent: 100%
white-space: nowrap
display: inline-block
// extendable placeholder
%cssowl-text-hide
+cssowl-text-hide()
// mixin
@mixin cssowl-text-hide() {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
display: inline-block;
}
// extendable placeholder
%cssowl-text-hide {
@include cssowl-text-hide();
}
// mixin
.cssowl-text-hide() {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
display: inline-block;
}
// disabled as less doesn't provide placeholders yet
//.cssowl-text-hide {
// .cssowl-text-hide();
//}
// mixin
cssowl-text-hide()
overflow hidden
text-indent 100%
white-space nowrap
display inline-block
// extendable placeholder
$cssowl-text-hide
cssowl-text-hide()
Lorem ipsum dolor sit atem
Lorem <span class="example-text-hide">ipsum</span> dolor sit atem
<style>
/* line 9, bower_components/cssowl/lib/sass/cssowl/text.sass */
.example-text-hide {
overflow: hidden;
text-indent: 1000%;
white-space: nowrap;
display: inline-block; }
</style>
.example-text-hide
@extend %cssowl-text-hide
.example-text-hide {
@extend %cssowl-text-hide;
}
.example-text-hide {
&:extend(.cssowl-text-hide);
}
.example-text-hide
@extend $cssowl-text-hide