mwcpl/dist/collection/components/mwcpl-button/mwcpl-button.css

Master's Web Component Pattern Library

:host {
  display: inline-flex;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: Roboto, sans-serif;
  transition: all 100ms ease;
  padding: var(--mwcpl-button-padding, 0.75rem 1.5rem);
  border-radius: var(--mwcpl-button-border-radius, 4px);
  background-color: lightgrey;
}

:host([rounded]) button {
  border-radius: 290486px;
}

button:not([disabled]) {
  background-color: var(--mwcpl-button-background-color, #3f51b5);
  color: var(--mwcpl-button-color, #ffffff);
}
button:not([disabled]):hover {
  background-color: var(--mwcpl-button-background-color-hover, #5262bc);
}
button:not([disabled]):active {
  background-color: var(--mwcpl-button-background-color-active, #6574c4);
}
button:not([disabled]):active, button:not([disabled]):focus {
  box-shadow: 0 0 0 2px var(--mwcpl-button-background-color-box-shadow, #d9dcf0);
}

:host([outlined]) button:not([disabled]) {
  color: var(--mwcpl-button-background-color, #3f51b5);
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--mwcpl-button-background-color, #3f51b5);
}
:host([outlined]) button:not([disabled]):active, :host([outlined]) button:not([disabled]):hover, :host([outlined]) button:not([disabled]):focus {
  color: white;
  background-color: var(--mwcpl-button-background-color, #3f51b5);
}
:host([outlined]) button:not([disabled]):active, :host([outlined]) button:not([disabled]):focus {
  box-shadow: 0 0 0 2px var(--mwcpl-button-background-color-box-shadow, #d9dcf0);
}

:host([outlined]) button[disabled] {
  box-shadow: 0 0 0 1px lightgrey;
  background-color: transparent;
}

:host([disabled]) {
  pointer-events: none;
}

:host([uppercase]) button {
  text-transform: uppercase;
}

:host([fullwidth]) {
  width: 100%;
}
:host([fullwidth]) button, :host([fullwidth]) button .label {
  flex: 1 1 auto;
}

:host([loading]) button {
  position: relative;
  overflow: hidden;
}
:host([loading]) button .loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--mwcpl-button-background-color-loading, #d9dcf0);
}
:host([loading]) button .loading .line {
  position: absolute;
  height: 4px;
  background-color: var(--mwcpl-button-background-color, #3f51b5);
  animation: loading 2s infinite;
}
@keyframes loading {
  from {
    left: -15%;
    width: 15%;
  }
  to {
    left: 100%;
    width: 100%;
  }
}

slot[name=leading-icon]::slotted(*) {
  margin-right: 0.5rem;
  font-size: 1rem;
}

slot[name=trailing-icon]::slotted(*) {
  margin-left: 0.5rem;
  font-size: 1rem;
}