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); }