maille/components/tag/style.css

Component library for MithrilJS

/* Colors
 * See: https://flatuicolors.com/palette/defo
 *
 * Primary (Peter River) => #3498db
 * Success (Emerald) => #2ecc71
 * Warning (Carrot) => #e67e22
 * Error (Alizarin) => #e74c3c
 * Info (Asbestos) => #7f8c8d
 *
 */

.maille.maille-tag {
  box-sizing: border-box;
  margin: var(--maille-tag-margin, .25em);

  font-size: .6em;
  vertical-align: middle;

  background-color: var(--maille-tag-default-color-bg, #AAA);;
  color: white;
  border: 2px solid #AAA;
  word-break: keep-all;
}

.maille.maille-tag.outlined {
  background: rgba(0,0,0,0);
  color: var(--maille-tag-default-color-fg, #AAA);
  border: 2px solid #AAA;
}

.maille.maille-tag.rounded {
  border-radius: .25em;
}

.maille.maille-tag.size-mini { font-size: var(--maille-tag-mini-font-size, .5em); }
.maille.maille-tag.size-sm { font-size: var(--maille-tag-sm-font-size, .7em); }
.maille.maille-tag.size-md { font-size: var(--maille-tag-md-font-size, .9em); }
.maille.maille-tag.size-lg { font-size: var(--maille-tag-lg-font-size, 1.25em); }
.maille.maille-tag.size-xlg { font-size: var(--maille-tag-xlg-font-size, 1.5em); }

.maille.maille-tag { padding: .125em .25em; }

.maille.maille-tag.primary {
  background-color: var(--maille-tag-primary-color-bg, #3498db);
  border-color: var(--maille-tag-primary-color-bg, #3498db);
  color: var(--maille-tag-primary-color-fg, white);
}

.maille.maille-tag.primary.outlined {
  background: rgba(0,0,0,0);
  border-color: var(--maille-tag-primary-color-bg, #3498db);
  color: var(--maille-tag-primary-color-bg, #3498db);
}

.maille.maille-tag.success {
  background-color: var(--maille-tag-success-color-bg, #2ecc71);
  border-color: var(--maille-tag-success-color-bg, #2ecc71);
  color: var(--maille-tag-success-color-fg, white);
}

.maille.maille-tag.success.outlined {
  background: rgba(0,0,0,0);
  border-color: var(--maille-tag-success-color-bg, #2ecc71);
  color: var(--maille-tag-success-color-bg, #2ecc71);
}

.maille.maille-tag.error {
  background-color: var(--maille-tag-error-color-bg, #e74c3c);
  border-color: var(--maille-tag-error-color-bg, #e74c3c);
  color: var(--maille-tag-error-color-fg, white);
}

.maille.maille-tag.error.outlined {
  background: rgba(0,0,0,0);
  border-color: var(--maille-tag-error-color-bg, #e74c3c);
  color: var(--maille-tag-error-color-bg, #e74c3c);
}

.maille.maille-tag.warning {
  background-color: var(--maille-tag-warning-color-bg, #e67e22);
  border-color: var(--maille-tag-warning-color-bg, #e67e22);
  color: var(--maille-tag-warning-color-fg, white);
}

.maille.maille-tag.warning.outlined {
  background: rgba(0,0,0,0);
  border-color: var(--maille-tag-warning-color-bg, #e67e22);
  color: var(--maille-tag-warning-color-bg, #e67e22);
}

.maille.maille-tag.info {
  background-color: var(--maille-tag-info-color-bg, #7f8c8d);
  border-color: var(--maille-tag-info-color-bg, #7f8c8d);
  color: var(--maille-tag-info-color-fg, white);
}

.maille.maille-tag.info.outlined {
  background: rgba(0,0,0,0);
  border-color: var(--maille-tag-info-color-bg, #7f8c8d);
  color: var(--maille-tag-info-color-bg, #7f8c8d);
}