Cssowl Playground v1.3.0

by weareinteractive

HTML

<div class="box">
    <div class="example"></div>
</div>

SCSS

// ------------------------------------
// Insert your code at to the bottom...
// cssowl v1.3.0
// ------------------------------------
@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-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);
}
%cssowl-absolute {
  position: absolute;
}
@mixin cssowl-absolute($coordinates:0 false false 0) {
  @include cssowl-coords($coordinates);
  position: absolute;
}
@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);
  }
}
@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);
  }
}
@mixin cssowl-after-absolute($content, $coordinates:0 false false 0) {
  position: relative;
  &:after {
    content: $content;
    @include cssowl-absolute($coordinates);
  }
}
@mixin cssowl-after-float($content, $margin:0 0 0 0, $float:right) {
  &:after {
    float: $float;
    margin: $margin;
    content: $content;
  }
}
@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);
  }
}
@mixin cssowl-before-absolute-outside($content, $width,...