front_end/ui/components/buttons/button.css

/*
 * Copyright 2021 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

/* TODO(crbug.com/1442257): remove stylelint-disable. */
/* stylelint-disable plugin/use_theme_colors */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/**
* Reset default UA styles for focused elements.
* The button styles below explicitly implement custom focus styles.
*/
*:focus,
*:focus-visible,
:host(:focus),
:host(:focus-visible) {
  outline: none;
}

:host {
  display: inline-flex;
  flex-direction: row;
}

button {
  /*
    --override-button-no-right-border-radius decides
    whether button has border radius on the right or not.

    It works as a boolean variable:
    * If it is 1, `--button-has-right-border-radius` becomes a 0 multiplier
    for the border-radius-top-right and border-radius-bottom-right properties.
    * If it is not set or 0, it becomes a 1 multiplier
    for the same properties which means they'll continue to have the given
    border radius.
  */
  --button-has-right-border-radius: calc(1 - var(--override-button-no-right-border-radius, 0));
  --button-border-size: 1px;
  --button-height: 24px;
  --button-width: 100%;

  align-items: center;
  border-radius: 12px calc(var(--button-has-right-border-radius) * 12px) calc(var(--button-has-right-border-radius) * 12px) 12px;
  display: inline-flex;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  height: var(--button-height);
  line-height: 14px;
  padding: 5px 12px;
  justify-content: center;
  width: var(--button-width);
  white-space: nowrap;

  devtools-icon {
    width: calc(var(--button-width) - 4px);
    height: calc(var(--button-height) - 4px);
  }

  &.small {
    --button-height: 20px;

    border-radius: 2px calc(var(--button-has-right-border-radius) * 2px) calc(var(--button-has-right-border-radius) * 2px) 2px;
  }

  &.toolbar,
  &.round {
    --button-height: 24px;
    --button-width: 24px;

    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;

    &.small {
      --button-height: 20px;
      --button-width: 20px;
    }
  }

  &.toolbar {
    border-radius: 2px calc(var(--button-has-right-border-radius) * 2px) calc(var(--button-has-right-border-radius) * 2px) 2px;
  }

  &.round {
    border-radius: 100%;

    &.tiny {
      --button-height: 18px;
      --button-width: 18px;
    }
  }

  &.primary {
    border: var(--button-border-size) solid var(--sys-color-primary);
    background: var(--sys-color-primary);
    color: var(--sys-color-on-primary);

    devtools-icon {
      color: var(--sys-color-cdt-base-container);
    }
  }

  &.tonal {
    border: var(--button-border-size) solid transparent;
    background: var(--sys-color-tonal-container);
    color: var(--sys-color-on-tonal-container);

    devtools-icon {
      color: var(--sys-color-on-tonal-container);
    }
  }

  &.secondary {
    border: var(--button-border-size) solid var(--sys-color-tonal-outline);
    background: var(--sys-color-cdt-base-container);
    color: var(--sys-color-primary);

    devtools-icon {
      color: var(--icon-primary);
    }
  }

  &.primary-toolbar {
    devtools-icon {
      color: var(--icon-primary);
    }
  }

  &.text-with-icon {
    padding: 0 calc(12px - var(--button-border-size)) 0 calc(8px - var(--button-border-size));

    devtools-icon {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
  }

  &.only-icon {
    padding: 0;
  }

  &:focus-visible {
    outline: 2px solid var(--sys-color-state-focus-ring);
    outline-offset: 2px;

    &.toolbar,
    &.round {
      background-color: var(--sys-color-tonal-container);
      outline: none;
    }
  }

  &:disabled {
    pointer-events: none;

    &.primary {
      border: var(--button-border-size) solid var(--sys-color-state-disabled-container);
      background: var(--sys-color-state-disabled-container);
      color: var(--sys-color-state-disabled);
    }

    &.tonal {
      border: var(--button-border-size) solid var(--sys-color-state-disabled-container);
      background: var(--sys-color-state-disabled-container);
      color: var(--sys-color-state-disabled);
    }

    &.secondary {
      border: var(--button-border-size) solid var(--sys-color-state-disabled-container);
      color: var(--sys-color-state-disabled);
    }

    &.toolbar,
    &.round {
      background: var(--sys-color-cdt-base-container);
      color: var(--sys-color-state-disabled);
    }

    devtools-icon {
      color: var(--icon-disabled);
    }
  }

  &:hover {
    &.primary {
      background: color-mix(in sRGB, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 6%);
      border: var(--button-border-size) solid color-mix(in sRGB, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 6%);
    }

    &.tonal {
      background: color-mix(in sRGB, var(--sys-color-tonal-container), var(--sys-color-state-hover-on-subtle));
    }

    &.secondary {
      background: var(--sys-color-state-hover-on-subtle);
    }

    &.toolbar,
    &.round {
      background-color: var(--sys-color-state-hover-on-subtle);
    }

    &.toobar {
      devtools-icon {
        color: var(--icon-default-hover);
      }
    }
  }

  &:active,
  &.active {
    &.primary {
      background: color-mix(in sRGB, var(--sys-color-primary), var(--sys-color-state-ripple-primary) 32%);
      border: var(--button-border-size) solid color-mix(in sRGB, var(--sys-color-primary), var(--sys-color-state-ripple-primary) 32%);
    }

    &.tonal {
      background: color-mix(in sRGB, var(--sys-color-tonal-container), var(--sys-color-state-ripple-primary));
    }

    &.secondary {
      background-color: var(--sys-color-surface-variant);
    }

    &.toolbar,
    &.round {
      background-color: var(--sys-color-state-ripple-neutral-on-subtle);
    }

    &.toolbar {
      devtools-icon {
        color: var(--icon-toggled);
      }
    }
  }

  &.text-with-icon.small {
    padding: 0 calc(9px - var(--button-border-size)) 0 calc(3px - var(--button-border-size));

    devtools-icon {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
  }
}

.spinner {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  border: 2px solid var(--sys-color-cdt-base-container);
  animation: spinner-animation 1s linear infinite;
  border-right-color: transparent;
  margin-right: 4px;

  &.secondary {
    border: 2px solid var(--sys-color-primary);
    border-right-color: transparent;
  }

  &.disabled {
    border: 2px solid var(--sys-color-state-disabled);
    border-right-color: transparent;
  }
}

@keyframes spinner-animation {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}