@eclipse-scout/core/src/tile/fields/button/TileButton.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.tile.dashboard > .tile-button {
  padding-top: 0;
  padding-bottom: 0;
  cursor: pointer;

  &.label-hidden {
    padding-top: 0; // Override FormFieldTile.less
  }

  & > .field {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;

    &.with-icon {
      padding-top: 17px;
    }

    &.without-icon {
      justify-content: center;
    }

    & > .icon-container,
    & > .label {
      display: block;
    }

    & > .icon-container {
      flex-grow: 1;

      & > .font-icon {
        font-size: 40px;
        font-weight: @icon-font-weight-light;
        color: @tile-button-default-icon-color;
      }
    }

    & > .label {
      font-size: 16px;
      max-height: 66px;
      #scout.overflow-ellipsis();
    }

    &.with-icon > .label {
      padding-top: 18px;
    }
  }
}

.tile.dashboard.compact > .tile-button {
  padding-bottom: 0; // Override FormFieldTile.less

  &.label-hidden {
    padding-top: 0; // Override FormFieldTile.less
  }

  & > .field {
    padding-top: 12px;
    padding-bottom: 12px;

    &.with-icon {
      min-height: 100px;
    }

    & > .label {
      font-size: 14px;
      padding-top: 0;

      // Show max. 2 lines
      //noinspection CssInvalidPropertyValue
      display: -webkit-inline-box;
      //noinspection CssUnknownProperty
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    & > .icon-container > .font-icon {
      font-size: 28px;
    }
  }
}

.button-tile.dashboard {
  --tile-background-color: @tile-default-background-color;

  & > .tile-button {

    & > .field > .label {
      color: @link-color;
    }
  }

  &:hover:not(.disabled) {
    --tile-background-color: @tile-button-default-hover-background-color;

    .dimmed-background & {
      --box-shadow-2-alpha: @drop-shadow-alpha; // More intense than regular dashboard shadow
    }
  }

  &:active:not(.disabled),
  &.active:not(.disabled) {
    --tile-background-color: @tile-button-default-active-background-color;
  }

  &.inverted {
    --tile-background-color: @tile-default-inverted-background-color;

    & > .tile-button {
      & > .field {
        & > .label {
          color: @tile-button-default-inverted-color;
        }

        & > .icon-container > .font-icon {
          color: @tile-button-default-inverted-icon-color;
        }
      }
    }

    &:hover:not(.disabled) {
      --tile-background-color: @tile-button-default-inverted-hover-background-color;

      & > .tile-button {
        border-color: @tile-button-default-inverted-hover-background-color;
      }
    }

    &:active:not(.disabled),
    &.active:not(.disabled) {
      --tile-background-color: @tile-button-default-inverted-active-background-color;

      & > .tile-button {
        border-color: @tile-button-default-inverted-active-background-color;
      }
    }
  }

  &.color-alternative.inverted {
    --tile-background-color: @tile-alternative-inverted-background-color;

    & > .tile-button {
      & > .field {
        & > .label {
          color: @tile-button-alternative-inverted-color;
        }

        & > .icon-container > .font-icon {
          color: @tile-button-alternative-inverted-icon-color;
        }
      }
    }

    &:hover:not(.disabled) {
      --tile-background-color: @tile-button-alternative-inverted-hover-background-color;

      & > .tile-button {
        border-color: @tile-button-alternative-inverted-hover-background-color;
      }
    }

    &:active:not(.disabled),
    &.active:not(.disabled) {
      --tile-background-color: @tile-button-alternative-inverted-active-background-color;

      & > .tile-button {
        border-color: @tile-button-alternative-inverted-active-background-color;
      }
    }
  }

  &.disabled {
    &,
    &.inverted {
      --tile-background-color: @tile-default-background-color;

      & > .tile-button {
        cursor: default;

        & > .field {
          & > .icon-container > .font-icon {
            color: @button-disabled-color;
          }

          & > .label {
            color: @button-disabled-color;
          }
        }
      }
    }
  }
}