Outlines

Outlines can be used for borders, outlines, and shadows.

Primary Colour

.outline {
  border: 1px solid var(--col-outline-primary);
  border-top: 1px solid var(--col-outline-primary-o-75);
  text-shadow: 1px 1px var(--col-outline-primary-o-50);
  box-shadow: 1px 1px var(--col-outline-primary-o-25);
}

You can define the alpha transparency by appending -o-[alpha] to the end of the variable name.

Secondary Colour

.outline {
  border: 1px solid var(--col-outline-secondary);
  border-top: 1px solid var(--col-outline-secondary-o-75);
  text-shadow: 1px 1px var(--col-outline-secondary-o-50);
  box-shadow: 1px 1px var(--col-outline-secondary-o-25);
}

You can define the alpha transparency by appending -o-[alpha] to the end of the variable name.

Tertiary Colour

.outline {
  border: 1px solid var(--col-outline-teriary);
  text-shadow: 1px 1px var(--col-outline-teriary);
  box-shadow: 1px 1px var(--col-outline-teriary);
}

Alternate Colour

.outline {
  border: 1px solid var(--col-outline-alt);
  border-top: 1px solid var(--col-outline-alt-25);
  text-shadow: 1px 1px var(--col-outline-alt-50);
  box-shadow: 1px 1px var(--col-outline-alt-100);
}

You can define the variation by appending -[variation] to the end of the variable name.

Highlight Colour

.outline {
  border: 1px solid var(--col-outline-highlight);
  border-top: 1px solid var(--col-outline-highlight-25);
  text-shadow: 1px 1px var(--col-outline-highlight-50);
  box-shadow: 1px 1px var(--col-outline-highlight-100);
}

You can define the variation by appending -[variation] to the end of the variable name.

Frame Colour

.outline {
  border: 1px solid var(--col-outline-frame);
  border-top: 1px solid var(--col-outline-frame-25);
  text-shadow: 1px 1px var(--col-outline-frame-50);
  box-shadow: 1px 1px var(--col-outline-frame-100);
}

You can define the variation by appending -[variation] to the end of the variable name.

Dark Colour

.outline {
  border: 1px solid var(--col-outline-dark);
  border-top: 1px solid var(--col-outline-dark-o-75);
  text-shadow: 1px 1px var(--col-outline-dark-o-50);
  box-shadow: 1px 1px var(--col-outline-dark-o-25);
}

You can define the alpha transparency by appending -o-[alpha] to the end of the variable name.

Light Colour

.outline {
  border: 1px solid var(--col-outline-light);
  border-top: 1px solid var(--col-outline-light-o-75);
  text-shadow: 1px 1px var(--col-outline-light-o-50);
  box-shadow: 1px 1px var(--col-outline-light-o-25);
}

You can define the alpha transparency by appending -o-[alpha] to the end of the variable name.

States

.background {
  border: 1px solid var(--col-outline-success);
  border-top: 1px solid var(--col-outline-info);
  text-shadow: 1px 1px var(--col-outline-warning);
  box-shadow: 1px 1px var(--col-outline-danger);
}