@eclipse-scout/core/src/form/fields/radiobutton/RadioButton.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2023 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
 */
@radio-button-transition-speed: 250ms;

.radio-button > .field {
  padding: @radio-button-field-padding-y 0;
  margin-left: @mandatory-indicator-width;
  outline: none;
  display: flex;
  align-items: start; // Ensure button and icon are aligned correctly even if texts wraps.

  & > .radio-button-circle,
  & > .label,
  & > .icon {
    /* only the label should be clickable, not the whole field */
    cursor: pointer;
  }

  & > .label {
    color: @control-color;
    padding-top: @radio-button-label-padding-top;
    padding-left: @radio-button-label-padding-left;
    #scout.overflow-ellipsis();

    &.empty {
      /* Make the label invisible if there is no text to not artificially make the button wider than it should be
      Compared to the Button.js the circle defines the height */
      display: none;
    }
  }

  & > .icon {
    padding-left: 7px;
    display: inline-flex;
    align-items: center;
    min-height: @radio-button-circle-size;
  }

  & > .radio-button-circle {
    width: @radio-button-circle-size;
    height: @radio-button-circle-size;
    flex: none;
    background-color: @control-background-color;
    border-radius: 50%;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: @radio-button-checked-color;
      border-radius: 50%;
      opacity: 0;
      transition: transform ease @radio-button-transition-speed, opacity linear @radio-button-transition-speed;
      transform: scale(0.01);
    }

    // After element is used to draw the border to make sure the before element is always centered as good as possible
    // If the parent draws the border it won't look good on all zoom levels
    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: @radio-button-border-width solid @radio-button-border-color;
      border-radius: 50%;
    }

    &.checked {
      &::before {
        transform: scale(unit(@radio-button-inner-circle-size / @radio-button-circle-size));
        opacity: 1;
        transition: transform ease @radio-button-transition-speed;
      }

      &::after {
        border-color: @radio-button-checked-color;
      }
    }

    &:focus {
      outline: none;

      &::after {
        #scout.focus-border(@border-color: @radio-button-checked-color);
      }
    }

    &.disabled {
      cursor: default;

      &::after {
        border-color: @radio-button-disabled-border-color;
      }

      &.checked {
        &::before {
          background-color: @radio-button-checked-disabled-background-color;
        }

        &::after {
          border-color: @radio-button-checked-disabled-background-color;
        }
      }
    }
  }
}

.radio-button.disabled > .field {

  & > .label,
  & > .icon {
    cursor: default;
    color: @text-disabled-color;
  }
}

.radiobutton-indentation {
  margin-left: @radio-button-circle-size + @radio-button-label-padding-left;

  .radiobutton-group-body > & {
    margin-left: @radio-button-circle-size + @radio-button-label-padding-left - @mandatory-indicator-width;
  }
}