Mixin to position an element absolutely *inside* the bounding box.
.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)
Mixin to position an element absolutely *outside* the bounding box.
.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)
Extendable placeholder and mixin to position an element absolutely.
.example-absolute +cssowl-absolute(20px false false 20px)
Mixin to add content with the `:after` pseudo selector and position it absolutely *inside* the bounding box.
.example-after-absolute-inside +cssowl-after-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)
Mixin to add content with the `:after` pseudo selector and position it absolutely *outside* the bounding box.
.example-after-absolute-outside +cssowl-after-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)
Mixin to add content with the `:after` pseudo selector and position it absolutely.
.example-after-absolute +cssowl-after-absolute("*", 17px false false 20px)
Mixin to add content with the `:after` pseudo selector and position it with `float: $float`.
.example-after-float +cssowl-after-float("*", 4px 0 0 10px)
Mixin to add content with the `:before` pseudo selector and position it absolutely *inside* the bounding box.
.example-before-absolute-inside +cssowl-before-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)
Mixin to add content with the `:before` pseudo selector and position it absolutely *outside* the bounding box.
.example-before-absolute-outside +cssowl-before-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)
Mixin to add content with the `:before` pseudo selector and position it absolutely.
.example-before-absolute +cssowl-before-absolute("*", 17px false false 20px)
Mixin to add content with the `:before` pseudo selector and position it with `float: $float`.
.example-before-float +cssowl-before-float("*", 4px 10px 0 0)
Set an element's `top`, `right`, `bottom` and `left` properties to position it *inside* the bounding box.
.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)
Set an element's `top`, `right`, `bottom` and `left` properties to position it *outside* the bounding box.
.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)
Set an element's `top`, `right`, `bottom` and `left` properties.
.example-coords +cssowl-coords(20px false false 20px)
Extendable placeholder and mixin to position an element relatively.
.example-relative +cssowl-relative(20px false false 20px)
Place a sprite element with `position: absolute;` *inside* the bounding box.
.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)
Place a sprite element with `position: absolute;` *outside* the bounding box.
.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)
Place a sprite element with `position: absolute;`.
.example-sprite-absolute +cssowl-sprite-absolute($sprite-owl-up, 10px 0 0 10px)
Add a sprite element with the `:after` pseudo selector and place it absolutely *inside* the bounding box.
.example-sprite-after-absolute-inside +cssowl-sprite-after-absolute-inside($sprite-arrow-down, top, center)
Add a sprite element with the `:after` pseudo selector and place it absolutely *outside* the bounding box.
.example-sprite-after-absolute-outside +cssowl-sprite-after-absolute-outside($sprite-arrow-up, top, center)
Add a sprite element with the `:after` pseudo selector and place it absolutely.
.example-sprite-after-absolute +cssowl-sprite-after-absolute($sprite-owl-up, 2px -20px false false)
Add a sprite element with the `:after` pseudo selector and place it with the `float` attribute.
.example-sprite-after-float +cssowl-sprite-after-float($sprite-owl-up, 0 5px 0 0)
Add a sprite element with the `:after` pseudo selector.
.example-sprite-after +cssowl-sprite-after($sprite-owl-up, 0 0 -2px 10px)
Add a sprite element with the `:before` pseudo selector and place it absolutely *inside* the bounding box.
.example-sprite-before-absolute-inside +cssowl-sprite-before-absolute-inside($sprite-arrow-down, top, center)
Add a sprite element with the `:before` pseudo selector and place it absolutely *outside* the bounding box.
.example-sprite-before-absolute-outside +cssowl-sprite-before-absolute-outside($sprite-arrow-up, top, center)
Add a sprite element with the `:before` pseudo selector and place it absolutely.
.example-sprite-before-absolute +cssowl-sprite-before-absolute($sprite-owl-up, 2px false false -20px)
Add a sprite element with the `:before` pseudo selector and place it with the `float` attribute.
.example-sprite-before-float +cssowl-sprite-before-float($sprite-owl-up, 0 5px 0 0)
Add a sprite element with the `:before` pseudo selector.
.example-sprite-before +cssowl-sprite-before($sprite-owl-up, 0 10px -2px 0)
Add a sprite element with its `width`, `height`, `background-image` and `background-position`.
.example-sprite-display +cssowl-sprite-display($sprite-owl-up)
Add a sprite element and hide the element's content.
.example-replace +cssowl-sprite-replace($sprite-owl-up)
Extendable placeholder and mixin to hide an element's content.
.example-text-hide @extend %cssowl-text-hide