Abrusco Docs

Hackable & Functional CSS toolbox.



Color

Keywords

/* inherit */
.color-inherit,
.color-inherit\:hover:hover,
.anchor:hover .color-inherit\:hover {
  color: inherit;
}

/* transparent */
.color-transparent {
  color: transparent;
}

Black

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

.color-black { color: var(--black); } .color-black-95 { color: var(--black-95); } .color-black-90 { color: var(--black-90); } .color-black-80 { color: var(--black-80); } .color-black-70 { color: var(--black-70); } .color-black-60 { color: var(--black-60); } .color-black-50 { color: var(--black-50); } .color-black-40 { color: var(--black-40); } .color-black-30 { color: var(--black-30); } .color-black-20 { color: var(--black-20); } .color-black-10 { color: var(--black-10); } .color-black-05 { color: var(--black-05); } .color-black-025 { color: var(--black-025); } .color-black-0125 { color: var(--black-0125); }

Default Variables

:root {

  --black-95:   rgba(4, 4, 4, .95);
  --black-90:   rgba(4, 4, 4, .90);
  --black-80:   rgba(4, 4, 4, .80);
  --black-70:   rgba(4, 4, 4, .70);
  --black-60:   rgba(4, 4, 4, .60);
  --black-50:   rgba(4, 4, 4, .50);
  --black-40:   rgba(4, 4, 4, .40);
  --black-30:   rgba(4, 4, 4, .30);
  --black-20:   rgba(4, 4, 4, .20);
  --black-10:   rgba(4, 4, 4, .10);
  --black-05:   rgba(4, 4, 4, .05);
  --black-025:  rgba(4, 4, 4, .025);
  --black-0125: rgba(4, 4, 4, .0125);

}

White

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

.color-white { color: var(--white); } .color-white-95 { color: var(--white-95); } .color-white-90 { color: var(--white-90); } .color-white-80 { color: var(--white-80); } .color-white-70 { color: var(--white-70); } .color-white-60 { color: var(--white-60); } .color-white-50 { color: var(--white-50); } .color-white-40 { color: var(--white-40); } .color-white-30 { color: var(--white-30); } .color-white-20 { color: var(--white-20); } .color-white-10 { color: var(--white-10); } .color-white-05 { color: var(--white-05); } .color-white-025 { color: var(--white-025); } .color-white-0125 { color: var(--white-0125); }

Default Variables

:root {

  --white-95:   rgba(255, 255, 255, .95);
  --white-90:   rgba(255, 255, 255, .90);
  --white-80:   rgba(255, 255, 255, .80);
  --white-70:   rgba(255, 255, 255, .70);
  --white-60:   rgba(255, 255, 255, .60);
  --white-50:   rgba(255, 255, 255, .50);
  --white-40:   rgba(255, 255, 255, .40);
  --white-30:   rgba(255, 255, 255, .30);
  --white-20:   rgba(255, 255, 255, .20);
  --white-10:   rgba(255, 255, 255, .10);
  --white-05:   rgba(255, 255, 255, .05);
  --white-025:  rgba(255, 255, 255, .025);
  --white-0125: rgba(255, 255, 255, .0125);

}

Accents

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

.color-aqua { color: var(--aqua); } .color-blue { color: var(--blue); } .color-navy { color: var(--navy); } .color-teal { color: var(--teal); } .color-green { color: var(--green); } .color-olive { color: var(--olive); } .color-lime { color: var(--lime); } .color-yellow { color: var(--yellow); } .color-orange { color: var(--orange); } .color-red { color: var(--red); } .color-fuchsia { color: var(--fuchsia); } .color-purple { color: var(--purple); } .color-maroon { color: var(--maroon); }

Default Variables

:root {

  /* credit to http://clrs.cc/ */
  --aqua:    #7fdbff;
  --blue:    #0074d9;
  --navy:    #001f3f;
  --teal:    #39cccc;
  --green:   #2ecc40;
  --olive:   #3d9970;
  --lime:    #01ff70;
  --yellow:  #ffdc00;
  --orange:  #ff851b;
  --red:     #ff4136;
  --fuchsia: #f012be;
  --purple:  #b10dc9;
  --maroon:  #85144b;

}