Absolute

cssowl-absolute-inside

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

cssowl-absolute-outside

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

cssowl-absolute

Extendable placeholder and mixin to position an element absolutely.

.example-absolute {
  .cssowl-absolute(20px false false 20px);
}

After

cssowl-after-absolute-inside

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

cssowl-after-absolute-outside

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

cssowl-after-absolute

Mixin to add content with the `:after` pseudo selector and position it absolutely.

.example-after-absolute {
  .cssowl-after-absolute("*", 17px false false 20px);
}

cssowl-after-float

Mixin to add content with the `:after` pseudo selector and position it with `float: $float`.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
.example-after-float {
  .cssowl-after-float("*", 4px 0 0 10px);
}

Before

cssowl-before-absolute-inside

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

cssowl-before-absolute-outside

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

cssowl-before-absolute

Mixin to add content with the `:before` pseudo selector and position it absolutely.

.example-before-absolute {
  .cssowl-before-absolute("*", 17px false false 20px);
}

cssowl-before-float

Mixin to add content with the `:before` pseudo selector and position it with `float: $float`.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
.example-before-float {
  .cssowl-before-float("*", 4px 10px 0 0);
}

Coords

cssowl-coords-inside

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

cssowl-coords-outside

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

cssowl-coords

Set an element's `top`, `right`, `bottom` and `left` properties.

.example-coords {
  .cssowl-coords(20px false false 20px);
}

Relative

cssowl-relative

Extendable placeholder and mixin to position an element relatively.

.example-relative {
  .cssowl-relative(20px false false 20px);
}

Sprite

cssowl-sprite-absolute-inside

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

cssowl-sprite-absolute-outside

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

cssowl-sprite-absolute

Place a sprite element with `position: absolute;`.

.example-sprite-absolute {
  .cssowl-sprite-absolute(@sprite-owl-up, 10px 0 0 10px);
}

cssowl-sprite-after-absolute-inside

Add a sprite element with the `:after` pseudo selector and place it absolutely *inside* the bounding box.

Quia sint quis
.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.

Quia sint quis
.example-sprite-after-absolute-outside {
  .cssowl-sprite-after-absolute-outside(@sprite-arrow-up, top, center);
}

cssowl-sprite-after-absolute

Add a sprite element with the `:after` pseudo selector and place it absolutely.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-after-absolute {
  .cssowl-sprite-after-absolute(@sprite-owl-up, 2px -20px false false);
}

cssowl-sprite-after-float

Add a sprite element with the `:after` pseudo selector and place it with the `float` attribute.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-after-float {
  .cssowl-sprite-after-float(@sprite-owl-up, 0 5px 0 0);
}

cssowl-sprite-after

Add a sprite element with the `:after` pseudo selector.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-after {
  .cssowl-sprite-after(@sprite-owl-up, 0 0 -2px 10px);
}

cssowl-sprite-before-absolute-inside

Add a sprite element with the `:before` pseudo selector and place it absolutely *inside* the bounding box.

Quia sint quis
.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.

Quia sint quis
.example-sprite-before-absolute-outside {
  .cssowl-sprite-before-absolute-outside(@sprite-arrow-up, top, center);
}

cssowl-sprite-before-absolute

Add a sprite element with the `:before` pseudo selector and place it absolutely.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-before-absolute {
  .cssowl-sprite-before-absolute(@sprite-owl-up, 2px false false -20px);
}

cssowl-sprite-before-float

Add a sprite element with the `:before` pseudo selector and place it with the `float` attribute.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-before-float {
  .cssowl-sprite-before-float(@sprite-owl-up, 0 5px 0 0);
}

cssowl-sprite-before

Add a sprite element with the `:before` pseudo selector.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-before {
  .cssowl-sprite-before(@sprite-owl-up, 0 10px -2px 0);
}

cssowl-sprite-display

Add a sprite element with its `width`, `height`, `background-image` and `background-position`.

Lorem ipsum dolor sit atem
.example-sprite-display {
  .cssowl-sprite-display(@sprite-owl-up);
}

cssowl-sprite-replace

Add a sprite element and hide the element's content.

Lorem ipsum dolor sit atem
.example-replace {
  .cssowl-sprite-replace(@sprite-owl-up);
}

Text

cssowl-text-hide

Extendable placeholder and mixin to hide an element's content.

Lorem ipsum dolor sit atem
.example-text-hide {
  &:extend(.cssowl-text-hide);
}