Mixins Reference

.bidi-border-start

Usage

.style(@bidi) {
  .bidi-border-start(5px solid #000);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  border-left: 5px solid #000000;
}
.rtl {
  border-right: 5px solid #000000;
}

.bidi-border-end

Usage

.style(@bidi) {
  .bidi-border-end(5px solid #000);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  border-right: 5px solid #000000;
}
.rtl {
  border-left: 5px solid #000000;
}

.bidi-border-start-color

Usage

.style(@bidi) {
  .bidi-border-start-color(#000);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  border-left-color: #000000;
}
.rtl {
  border-right-color: #000000;
}

.bidi-border-start-style

Usage

.style(@bidi) {
  .bidi-border-start-style(solid);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  border-left-style: solid;
}
.rtl {
  border-right-style: solid;
}

.bidi-border-start-width

Usage

.style(@bidi) {
  .bidi-border-start-width(5px);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  border-left-width: 5px;
}
.rtl {
  border-right-width: 5px;
}

.bidi-border-end

Usage

.style(@bidi) {
  .bidi-border-end(5px solid #000);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  border-right: 5px solid #000000;
}
.rtl {
  border-left: 5px solid #000000;
}

.bidi-border-end-color

Usage

.style(@bidi) {
  .bidi-border-end-color(#000);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  border-right-color: #000000;
}
.rtl {
  border-left-color: #000000;
}

.bidi-border-end-style

Usage

.style(@bidi) {
  .bidi-border-end-style(solid);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  border-right-style: solid;
}
.rtl {
  border-left-style: solid;
}

.bidi-border-end-width

Usage

.style(@bidi) {
  .bidi-border-end-width(5px);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  border-right-width: 5px;
}
.rtl {
  border-left-width: 5px;
}

.bidi-clear

Usage

.style(@bidi) {
  article {
    .bidi-clear(start);
  }
  nav {
    .bidi-clear(end);
  }
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr article {
  clear: left;
}
.ltr nav {
  clear: right;
}
.rtl article {
  clear: right;
}
.rtl nav {
  clear: left;
}

.bidi-direction

Usage

.style(@bidi) {
  .bidi-direction();
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  direction: ltr;
}
.rtl {
  direction: rtl;
}

.bidi-float

Usage

.style(@bidi) {
  article {
    .bidi-float(start);
  }
  nav {
    .bidi-float(end);
  }
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr article {
  float: left;
}
.ltr nav {
  float: right;
}
.rtl article {
  float: right;
}
.rtl nav {
  float: left;
}

.bidi-start-offset

Usage

.style(@bidi) {
  .bidi-start-offset(5px);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  left: 5px;
}
.rtl {
  right: 5px;
}

.bidi-end-offset

Usage

.style(@bidi) {
  .bidi-end-offset(5px);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  right: 5px;
}
.rtl {
  left: 5px;
}

.bidi-margin

Usage

.style(@bidi) {
  .bidi-margin(1px, 2px, 3px, 4px);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  margin: 1px 2px 3px 4px;
}
.rtl {
  margin: 1px 4px 3px 2px;
}

.bidi-margin-start

Usage

.style(@bidi) {
  .bidi-margin-start(5px);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  margin-left: 5px;
}
.rtl {
  margin-right: 5px;
}

.bidi-margin-end

Usage

.style(@bidi) {
  .bidi-margin-end(5px);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  margin-right: 5px;
}
.rtl {
  margin-left: 5px;
}

.bidi-padding

Usage

.style(@bidi) {
  .bidi-padding(1px, 2px, 3px, 4px);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  padding: 1px 2px 3px 4px;
}
.rtl {
  padding: 1px 4px 3px 2px;
}

.bidi-padding-start

Usage

.style(@bidi) {
  .bidi-padding-start(5px);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  padding-left: 5px;
}
.rtl {
  padding-right: 5px;
}

.bidi-padding-end

Usage

.style(@bidi) {
  .bidi-padding-end(5px);
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr {
  padding-right: 5px;
}
.rtl {
  padding-left: 5px;
}

.bidi-text-align

Usage

.style(@bidi) {
  article {
    .bidi-text-align(start);
  }
  nav {
    .bidi-text-align(end);
  }
}
.ltr { .style(ltr); }
.rtl { .style(rtl); }

Output

.ltr article {
  text-align: left;
}
.ltr nav {
  text-align: right;
}
.rtl article {
  text-align: right;
}
.rtl nav {
  text-align: left;
}

TODO

There are another 23 mixins for the css3 properties still to be documented. Document css3 mixins