lumo-css-framework/borders.css

CSS framework for building web apps using Vaadin's Lumo theme

/* === Border === */
.border-0 {
  border: none;
}
.border {
  border: 1px solid;
}
.border-b {
  border-bottom: 1px solid;
}
.border-l {
  border-left: 1px solid;
}
.border-r {
  border-right: 1px solid;
}
.border-t {
  border-top: 1px solid;
}

/* === Border color === */
.border-contrast-5 {
  border-color: var(--lumo-contrast-5pct);
}
.border-contrast-10 {
  border-color: var(--lumo-contrast-10pct);
}
.border-contrast-20 {
  border-color: var(--lumo-contrast-20pct);
}
.border-contrast-30 {
  border-color: var(--lumo-contrast-30pct);
}
.border-contrast-40 {
  border-color: var(--lumo-contrast-40pct);
}
.border-contrast-50 {
  border-color: var(--lumo-contrast-50pct);
}
.border-contrast-60 {
  border-color: var(--lumo-contrast-60pct);
}
.border-contrast-70 {
  border-color: var(--lumo-contrast-70pct);
}
.border-contrast-80 {
  border-color: var(--lumo-contrast-80pct);
}
.border-contrast-90 {
  border-color: var(--lumo-contrast-90pct);
}
.border-contrast {
  border-color: var(--lumo-contrast);
}

.border-primary {
  border-color: var(--lumo-primary-color);
}
.border-primary-50 {
  border-color: var(--lumo-primary-color-50pct);
}
.border-primary-10 {
  border-color: var(--lumo-primary-color-10pct);
}

.border-error {
  border-color: var(--lumo-error-color);
}
.border-error-50 {
  border-color: var(--lumo-error-color-50pct);
}
.border-error-10 {
  border-color: var(--lumo-error-color-10pct);
}

.border-success {
  border-color: var(--lumo-success-color);
}
.border-success-50 {
  border-color: var(--lumo-success-color-50pct);
}
.border-success-10 {
  border-color: var(--lumo-success-color-10pct);
}

/* === Border radius === */
.rounded-none {
  border-radius: 0;
}
.rounded-s {
  border-radius: var(--lumo-border-radius-s);
}
.rounded-m {
  border-radius: var(--lumo-border-radius-m);
}
.rounded-l {
  border-radius: var(--lumo-border-radius-l);
}