v4web-components/dist/collection/components/actions/lab-ds-button/lab-ds-button.css

Stencil Component Starter

/* @import url('../../css/variables.css'); */

:host {
  display: block;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

button.max-width {
  width: 100%;
}

button {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  border-style: solid;
  cursor: pointer;
  outline: none;
}

button .label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
}

.icon {
  font-family: Material Symbols Outlined;
  animation: spin 1s linear infinite;
  font-size: var(--lab-ds-semantic-size-icon-s);
}

.large .icon {
  font-size: var(--lab-ds-semantic-size-icon-sm);
}

.icon-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

button .icon {
  display: none;
}

button.loading .label {
  opacity: 0;
}

button.loading .icon {
  display: flex;
  color: var(--lab-ds-semantic-color-bg-default);
  animation: spin 1s linear infinite;
}

.leading-icon {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}
.step-icon {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.button.small {
  padding-top: var(--lab-ds-semantic-selectable-space-padding-s);
  padding-bottom: var(--lab-ds-semantic-selectable-space-padding-s);
  padding-left: var(--lab-ds-semantic-selectable-space-padding-xl);
  padding-right: var(--lab-ds-semantic-selectable-space-padding-xl);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
  font: var(--lab-ds-component-button-typography-none-decoration-small);
  font-family: var(--lab-ds-component-button-font-family);
  font-size: var(--lab-ds-component-button-font-size-small);
  font-weight: var(--lab-ds-component-button-font-weight);
  line-height: var(--lab-ds-component-button-font-line-height-small);
  text-transform: var(--lab-ds-core-font-letter-case-02);
}

.button.medium {
  padding-top: var(--lab-ds-semantic-selectable-space-padding-sm);
  padding-bottom: var(--lab-ds-semantic-selectable-space-padding-sm);
  padding-left: var(--lab-ds-semantic-selectable-space-padding-xxxl);
  padding-right: var(--lab-ds-semantic-selectable-space-padding-xxxl);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
  font: var(--lab-ds-component-button-typography-none-decoration-medium);
  font-family: var(--lab-ds-component-button-font-family);
  font-size: var(--lab-ds-component-button-font-size-medium);
  font-weight: var(--lab-ds-component-button-font-weight);
  line-height: var(--lab-ds-component-button-font-line-height-medium);
  text-transform: var(--lab-ds-core-font-letter-case-02);
}

.button.large {
  padding-top: var(--lab-ds-semantic-selectable-space-padding-sm);
  padding-bottom: var(--lab-ds-semantic-selectable-space-padding-sm);
  padding-left: var(--lab-ds-semantic-selectable-space-padding-xxxl);
  padding-right: var(--lab-ds-semantic-selectable-space-padding-xxxl);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
  font: var(--lab-ds-component-button-typography-none-decoration-large);
  font-family: var(--lab-ds-component-button-font-family);
  font-size: var(--lab-ds-component-button-font-size-large);
  font-weight: var(--lab-ds-component-button-font-weight);
  line-height: var(--lab-ds-component-button-font-line-height-large);
  text-transform: var(--lab-ds-core-font-letter-case-02);
}

.primary {
  background-color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-color: var(--lab-ds-semantic-selectable-color-primary-default);
  color: var(--lab-ds-semantic-color-fg-contrast-primary);
}

.primary:focus:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  outline-width: var(--lab-ds-semantic-selectable-border-width-m);
  outline-style: solid;
  outline-color: var(--lab-ds-semantic-selectable-color-primary-focus);
  outline-offset: var(--lab-ds-semantic-selectable-space-padding-xxs);
}

.primary:hover:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-primary-hover);
  border-color: var(--lab-ds-semantic-selectable-color-primary-hover);
}

.primary:active:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-primary-press);
  border-color: var(--lab-ds-semantic-selectable-color-primary-press);
}

.primary:disabled {
  background-color: var(--lab-ds-semantic-color-bg-disabled);
  border-color: var(--lab-ds-semantic-color-bg-disabled);
  color: var(--lab-ds-semantic-color-fg-disabled);
  cursor: not-allowed;
}

.primary.loading {
  background-color: var(--lab-ds-semantic-selectable-color-primary-loading);
  border-color: var(--lab-ds-semantic-selectable-color-primary-loading);
}

/* outlined properties */

.outlined {
  color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-width: var(--lab-ds-semantic-selectable-border-width-m);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
}

.outlined:hover:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-primary-hover);
  color: var(--lab-ds-semantic-color-fg-default);
  border-color: var(--lab-ds-semantic-selectable-color-primary-hover);
}

.outlined:focus:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  outline-width: var(--lab-ds-semantic-selectable-border-width-m);
  outline-style: solid;
  outline-color: var(--lab-ds-semantic-selectable-color-primary-focus);
  outline-offset: var(--lab-ds-semantic-selectable-space-padding-xxs);
  color: var(--lab-ds-semantic-color-fg-default);
}

.outlined:active:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-primary-press);
  color: var(--lab-ds-semantic-color-fg-default);
}

.outlined:disabled {
  background-color: none;
  color: var(--lab-ds-semantic-color-fg-disabled);
  border-color: var(--lab-ds-semantic-color-fg-disabled);
  border-width: var(--lab-ds-semantic-selectable-border-width-m);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  cursor: not-allowed;
}

.outlined.loading {
  background-color: var(--lab-ds-semantic-selectable-color-primary-loading);
  border: none;
}

/* link-button properties */

.link-button {
  color: var(--lab-ds-semantic-color-fg-default);
  border: none;
}

.link-button.small .label-text {
  font: var(--lab-ds-component-button-typography-underlined-small);
  text-decoration: underline;
}

.link-button.medium .label-text {
  font: var(--lab-ds-component-button-typography-underlined-medium);
  text-decoration: underline;
}

.link-button.large .label-text {
  font: var(--lab-ds-component-button-typography-underlined-large);
  text-decoration: underline;
}

.link-button:hover:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-bg-hover);
  color: var(--lab-ds-semantic-color-fg-default);
  border: none;
}

.link-button:focus:not([disabled]) {
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  outline-width: var(--lab-ds-semantic-selectable-border-width-m);
  outline-style: solid;
  outline-color: var(--lab-ds-semantic-color-fg-default);
  outline-offset: var(--lab-ds-semantic-selectable-space-padding-xxs);
  color: var(--lab-ds-semantic-color-fg-default);
}

.link-button:active:not([disabled]) {
  background-color: var(--lab-ds-semantic-color-bg-cloudy);
  color: var(--lab-ds-semantic-color-fg-default);
  border: none;
  outline: none;
}

.link-button:disabled {
  color: var(--lab-ds-semantic-color-fg-disabled);
  border-color: var(--lab-ds-semantic-color-fg-disabled);
  cursor: not-allowed;
}

.link-button.loading {
  background-color: var(--lab-ds-semantic-color-bg-cloudy);
}

.link-button && .small {
  font: var(--lab-ds-component-button-typography-underlined-small);
}

.link-button && .medium {
  font: var(--lab-ds-component-button-typography-underlined-medium);
}

.link-button && .large {
  font: var(--lab-ds-component-button-typography-underlined-large);
}

/* CTA properties */

.cta {
  background-color: var(--lab-ds-semantic-selectable-color-primary-default);
  color: var(--lab-ds-semantic-color-fg-default);
  border: none;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.cta:hover:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-primary-hover);
  color: var(--lab-ds-semantic-color-fg-default);
  box-shadow: var(--lab-ds-semantic-selectable-shadow-s);
  animation: none;
}

.cta:focus:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  outline-width: var(--lab-ds-semantic-selectable-border-width-m);
  outline-style: solid;
  outline-color: var(--lab-ds-semantic-selectable-color-primary-focus);
  outline-offset: var(--lab-ds-semantic-selectable-space-padding-xxs);
  color: var(--lab-ds-semantic-color-fg-default);
}

.cta:active:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-primary-press);
  color: var(--lab-ds-semantic-color-fg-default);
}

.cta:disabled {
  background-color: var(--lab-ds-semantic-selectable-color-bg-disabled);
  color: var(--lab-ds-semantic-color-fg-disabled);
  animation: none;
  cursor: not-allowed;
}

.cta.loading {
  background-color: var(--lab-ds-semantic-selectable-color-primary-loading);
  animation: none;
}

/* danger-primary properties */

.danger-primary {
  background-color: var(--lab-ds-semantic-selectable-color-bg-dark-error);
  border-color: var(--lab-ds-semantic-selectable-color-bg-dark-error);
  color: var(--lab-ds-semantic-selectable-color-bg-pure);
}

.danger-primary:hover:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-error-hover);
  border-color: var(--lab-ds-semantic-selectable-color-error-hover);
  color: var(--lab-ds-semantic-color-bg-default);
}

.danger-primary:focus:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-bg-dark-error);
  border-color: var(--lab-ds-semantic-selectable-color-bg-dark-error);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  outline-width: var(--lab-ds-semantic-selectable-border-width-m);
  outline-style: solid;
  outline-color: var(--lab-ds-semantic-selectable-color-error-focus);
  outline-offset: var(--lab-ds-semantic-selectable-space-padding-xxs);
  color: var(--lab-ds-semantic-color-bg-default);
}

.danger-primary:active:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-error-press);
  border-color: var(--lab-ds-semantic-selectable-color-error-press);
  color: var(--lab-ds-semantic-color-bg-default);
}

.danger-primary:disabled {
  background-color: var(--lab-ds-semantic-selectable-color-bg-disabled);
  border-color: var(--lab-ds-semantic-selectable-color-bg-disabled);
  color: var(--lab-ds-semantic-color-fg-disabled);
  cursor: not-allowed;
}

.danger-primary.loading {
  background-color: var(--lab-ds-semantic-selectable-color-error-loading);
  border-color: var(--lab-ds-semantic-selectable-color-error-loading);
}

/* danger-outlined properties */

.danger-outlined {
  color: var(--lab-ds-semantic-selectable-color-bg-dark-error);
  border-color: var(--lab-ds-semantic-selectable-color-border-dark-error);
  border-width: var(--lab-ds-semantic-selectable-border-width-m);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
}

.danger-outlined:hover:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-error-hover);
  color: var(--lab-ds-semantic-selectable-color-bg-pure);
  border-color: rgba(0, 0, 0, 0);
}

.danger-outlined:focus:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-bg-dark-error);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  outline-width: var(--lab-ds-semantic-selectable-border-width-m);
  outline-style: solid;
  outline-color: var(--lab-ds-semantic-selectable-color-error-focus);
  outline-offset: var(--lab-ds-semantic-selectable-space-padding-xxs);
  color: var(--lab-ds-semantic-color-bg-default);
}

.danger-outlined:active:not([disabled]) {
  background-color: var(--lab-ds-semantic-selectable-color-error-press);
  color: var(--lab-ds-semantic-color-bg-default);
}

.danger-outlined:disabled {
  color: var(--lab-ds-semantic-color-fg-disabled);
  border-color: var(--lab-ds-semantic-color-bg-disabled);
  border-width: var(--lab-ds-semantic-selectable-border-width-m);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xs);
  cursor: not-allowed;
}

.danger-outlined.loading {
  background-color: var(--lab-ds-semantic-selectable-color-error-loading);
  color: var(--lab-ds-semantic-color-bg-default);
  border-color: var(--lab-ds-semantic-selectable-color-error-loading);
}