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

Master's Web Component Pattern Library

:host {
  display: inline-flex;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  height: 56px;
  width: 56px;
  font-family: Roboto, sans-serif;
  border-radius: 290486px;
  background-color: var(--mwcpl-fab-background-color, #3f51b5);
  color: var(--mwcpl-fab-color, #ffffff);
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.35);
}
button:hover {
  background-color: var(--mwcpl-fab-background-color-hover, #5262bc);
}
button:active {
  background-color: var(--mwcpl-fab-background-color-active, #6574c4);
}

slot[name=icon]::slotted(*) {
  font-size: 20px;
}

:host([mini]) button {
  height: 40px;
  width: 40px;
}
:host([mini]) button slot[name=icon]::slotted(*) {
  font-size: 16px;
}

:host([label]) button {
  width: auto;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
}
:host([label]) button span:last-child {
  margin-left: 1rem;
}