@inkline/inkline/components/IFormLabel/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Form Label
 */
.form-label {
  position: relative;
  flex-basis: 100%;
  transition-property: var(--form-label--transition-property, color);
  transition-duration: var(--form-label--transition-duration, var(--transition-duration));
  transition-timing-function: var(--form-label--transition-timing-function, var(--transition-timing-function));
  font-size: var(--form-label--font-size, var(--font-size));
  margin: var(--form-label--margin, var(--form-label--margin-top, 0) var(--form-label--margin-right, 0) var(--form-label--margin-bottom, var(--margin-bottom-1-4)) var(--form-label--margin-left, 0));
}
.form-label.-right {
  margin-right: 0;
  order: 1;
}
.form-group.-required > .form-label::after {
  color: var(--form-label--required--color, var(--color-danger));
  content: " *";
}
.form-group.-error > .form-label {
  color: var(--form-label--error--color, var(--color-danger));
}
.form-group.-inline > .form-label {
  margin-right: var(--form-label--inline--margin-right, var(--margin-right));
}
.form-group.-inline > .form-label.-right {
  margin-left: var(--form-label--inline--margin-left, var(--margin-left));
}

/**
 * Size variants
 */
.form-label.-sm {
  --form-label--font-size: var(
      --form-label--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
}
.form-label.-md {
  --form-label--font-size: var(
      --form-label--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
}
.form-label.-lg {
  --form-label--font-size: var(
      --form-label--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
}