mozilla/webmaker.org

.ir() {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

// Placeholder text
.placeholder(@colour:#555) {
  &::-webkit-input-placeholder {
    color: @colour;
  }
  &:-moz-placeholder {
    color: @colour;
  }
  &::-moz-placeholder {
    color: @colour;
  }
  &:-ms-input-placeholder {
    color: @colour;
  }
}

.icon(@fa-icon) {
  content: @fa-icon;
  .fa();
}

// To be used as-is in markup, or for shortcuts as mixins!
.bg-weblit-Navigation {
  background: @literacy-color-navigation;
}
.bg-weblit-WebMechanics {
  background: @literacy-color-web-mechanics;
}
.bg-weblit-Search {
  background: @literacy-color-search;
}
.bg-weblit-Credibility {
  background: @literacy-color-credibility;
}
.bg-weblit-Security {
  background: @literacy-color-security;
}
.bg-weblit-Composing {
  background: @literacy-color-composing;
}
.bg-weblit-Remix {
  background: @literacy-color-remixing;
}
.bg-weblit-DesignAccessibility {
  background: @literacy-color-design-accessibility;
}
.bg-weblit-CodingScripting {
  background: @literacy-color-coding-scripting;
}
.bg-weblit-Infrastructure {
  background: @literacy-color-infrastructure;
}
.bg-weblit-Sharing {
  background: @literacy-color-sharing;
}
.bg-weblit-Collaborating {
  background: @literacy-color-collaborating;
}
.bg-weblit-Community {
  background: @literacy-color-community-participation;
}
.bg-weblit-Privacy {
  background: @literacy-color-privacy;
}
.bg-weblit-OpenPractices {
  background: @literacy-color-open-practices;
}
.text-weblit-Navigation {
  color: @literacy-color-navigation;
}
.text-weblit-WebMechanics {
  color: @literacy-color-web-mechanics;
}
.text-weblit-Search {
  color: @literacy-color-search;
}
.text-weblit-Credibility {
  color: @literacy-color-credibility;
}
.text-weblit-Security {
  color: @literacy-color-security;
}
.text-weblit-Composing {
  color: @literacy-color-composing;
}
.text-weblit-Remix {
  color: @literacy-color-remixing;
}
.text-weblit-DesignAccessibility {
  color: @literacy-color-design-accessibility;
}
.text-weblit-CodingScripting {
  color: @literacy-color-coding-scripting;
}
.text-weblit-Infrastructure {
  color: @literacy-color-infrastructure;
}
.text-weblit-Sharing {
  color: @literacy-color-sharing;
}
.text-weblit-Collaborating {
  color: @literacy-color-collaborating;
}
.text-weblit-Community {
  color: @literacy-color-community-participation;
}
.text-weblit-Privacy {
  color: @literacy-color-privacy;
}
.text-weblit-OpenPractices {
  color: @literacy-color-open-practices;
}

.flag(@background: @lightgrey, @color: @grey) {
  background: @background;
  color: @color;
  float: left;
  font-size: 2rem;
  font-style: italic;
  line-height: 1.4;
  margin-right: 1.5em;
  padding: 0.25em 0.25em 0.25em 0.5em;
  position: relative;
  &::before {
    border-bottom: 0.95em solid transparent;
    border-left: 0.95em solid @background;
    border-top: 0.95em solid transparent;
    content: '';
    position: absolute;
    height: 0;
    right: -0.95em;
    top: 0;
    width: 0;
  }
}