src/theme/user-controls/_button.theme.scss

/********************************************************************************
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/
@import "openk.styles";

button::-moz-focus-inner {
  border: 0;
}

@mixin openk-button-mixin(
  $contrast,
  $background,
  $border,
  $lightness,
  $lightness-disabled: 65%
) {
  background-color: $background;
  border-color: $border;
  color: $contrast;

  &.openk-button-hover,
  &:hover {
    filter: brightness(100% + $lightness);
  }

  &.openk-button-focus,
  &:focus {
    filter: brightness(100% + 2 * $lightness);
    box-shadow: 0 0 4px 1px rgba($border, 0.33);
  }

  &.openk-button-active,
  &:active {
    filter: brightness(100% + 3 * $lightness);
  }

  &.openk-button-disabled,
  &:disabled {
    opacity: 0.66;
    filter: unset;
    cursor: not-allowed;
  }
}

.openk-button {
  @include rounded-border-mixin();
  @include user-select-mixin;
  @include prevent-text-overflow-mixin;
  @include openk-button-mixin(
      get-color($openk-default-palette, 600, contrast),
      get-color($openk-default-palette, 500),
      get-color($openk-default-palette, A700),
      -2%
  );

  // height: calc(2.5em / 0.875);
  width: fit-content;
  height: fit-content;

  // Positioning of content:
  display: inline-flex;
  justify-content: center;
  align-items: center;

  // Size Properties
  margin: 0;
  padding: 0.5em 0.75em;

  // Font Properties
  font-size: 0.875em;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;

  // Background:
  background-image: none;

  // Border
  border-style: solid;
  border-width: 1px;

  // Transition
  transition: background ease-in-out 100ms, border ease-in-out 100ms, filter ease-in-out 100ms, box-shadow ease-in-out 100ms;

  mat-icon {
    line-height: 1;
    padding-right: 0.3em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.openk-button.openk-button-rounded {
  --icon-scale-factor: 0.7;

  border-radius: 50%;
  font-size: 1em;
  padding: 0;

  mat-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: calc(var(--icon-scale-factor) * 2em);
    width: calc(1em / var(--icon-scale-factor) - 2px);
    height: calc(1em / var(--icon-scale-factor) - 2px);
    border-radius: 50%;
  }
}

.openk-primary.openk-button {
  @include openk-button-mixin(
      get-color($openk-primary-palette, 500, contrast),
      get-color($openk-primary-palette, 500),
      get-color($openk-primary-palette, 700),
      12%
  );
}

.openk-info.openk-button {
  @include openk-button-mixin(
      get-color($openk-info-palette, 500, contrast),
      get-color($openk-info-palette, 500),
      get-color($openk-info-palette, 600),
      -4%
  );
}

.openk-success.openk-button {
  @include openk-button-mixin(
      get-color($openk-success-palette, 500, contrast),
      get-color($openk-success-palette, 500),
      get-color($openk-success-palette, 800),
      -3%
  );
}

.openk-warning.openk-button {
  @include openk-button-mixin(
      get-color($openk-warning-palette, 500, contrast),
      get-color($openk-warning-palette, 500),
      get-color($openk-warning-palette, 600),
      -3%
  );
}

.openk-danger.openk-button {
  @include openk-button-mixin(
      get-color($openk-danger-palette, 500, contrast),
      get-color($openk-danger-palette, 500),
      get-color($openk-danger-palette, 600),
      12%
  );
}