@geoffcox/sterling-svelte-themes/css/sterling/Label.base.css

A modern theme for the sterling-svelte component library.

.sterling-label {
  appearance: none;
  background-color: transparent;
  border: none;
  box-sizing: border-box;
  color: var(--stsv-input__color);
  display: grid;
  row-gap: 0.0625em;
  align-items: center;
  font: inherit;
  margin: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  transition:
    background-color 250ms,
    color 250ms,
    border-color 250ms;
}

/* ----- horizontal | vertical ----- */

.sterling-label:not(.vertical) {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 'text content' '. message';
}

.sterling-label.vertical {
  grid-template-rows: auto auto auto;
  grid-template-areas: 'text' 'content' 'message';
}

/* ----- text ----- */

.sterling-label .text {
  color: var(--stsv-common__color--secondary);
  font-size: 0.8em;
  grid-area: text;
  justify-self: flex-start;
}

.sterling-label:not(.vertical) .text:not(:empty) {
  margin-right: 0.5em;
}

.sterling-label.vertical .text:not(:empty) {
  margin-bottom: 0.25em;
}

.sterling-label .content {
  display: contents;
  grid-area: content;
}

.sterling-label .message {
  box-sizing: border-box;
  font-size: 0.8em;
  background-color: var(--stsv-common__background-color--secondary);
  color: var(--stsv-common__color--secondary);
  grid-area: message;
  padding: 0.5em;
  width: 100%;
  transition:
    background-color 250ms,
    color 250ms,
    border-color 250ms;
}

.sterling-label.info .message {
  background-color: var(--stsv-common__background-color--info);
  border-color: var(--stsv-common__border-color--info);
  color: var(--stsv-common__color--info);
}

.sterling-label.success .message {
  background-color: var(--stsv-common__background-color--success);
  border-color: var(--stsv-common__border-color--success);
  color: var(--stsv-common__color--success);
}

.sterling-label.warning .message {
  background-color: var(--stsv-common__background-color--warning);
  border-color: var(--stsv-common__border-color--warning);
  color: var(--stsv-common__color--warning);
}

.sterling-label.error .message {
  background-color: var(--stsv-common__background-color--error);
  border-color: var(--stsv-common__border-color--error);
  color: var(--stsv-common__color--error);
}

.sterling-label .required {
  text-align: center;
  font-weight: bold;
  box-sizing: border-box;
  min-width: 1em;
  min-height: 1em;
  position: absolute;
  top: 0;
  right: 0;
}

.sterling-label-tooltip .required-reason {
  display: block;
  padding: 0.125em;
}

@media (prefers-reduced-motion) {
  .sterling-label,
  .sterling-label::after,
  .sterling-label .message {
    transition: none;
  }
}