@eclipse-scout/core/src/form/fields/checkbox/CheckBoxField.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
 */
.check-box-field > .field {
  padding: @check-box-field-padding-y 0;
  outline: none;
  display: flex;

  & > .label {
    color: @control-color;
  }

  & > .check-box,
  & > .label {
    cursor: pointer;
  }

  /* only the label should be clickable, not the whole field */

  & > .label {
    padding-top: @check-box-field-label-padding-top;
    padding-left: @check-box-field-label-padding-left;
    max-width: calc(~'100% - ' @check-box-size);
    #scout.overflow-ellipsis();

    &.empty {
      /* Make the label invisible if there is no text to not artificially make the check box wider than it should be
      The check box square defines the height. */
      display: none;
    }
  }

  &.has-inner-alignment {

    &.halign-left {
      justify-content: flex-start;
    }

    &.halign-center {
      justify-content: center;
    }

    &.halign-right {
      justify-content: flex-end;
    }
  }

  & > .check-box {
    flex: none; /* never shrink check-box */
  }

  /* Same spacings as defined in CellEditorPopup.less, but as margin, not as padding */

  & > .cell-editor-field.check-box {
    padding: 0;
    margin: 0 @table-cell-padding-right 0 @table-cell-padding-left;
    vertical-align: top;
    border-width: 1px;

    &.last {
      margin-right: @table-cell-padding-right-last !important;
    }

    &:focus {
      border-width: 1px;
      #scout.focus-border();
    }
  }

  &.halign-right > .cell-editor-field.check-box {
    margin-right: @table-cell-padding-left;
    margin-left: @table-cell-padding-right;
  }

  &.halign-center > .cell-editor-field.check-box {
    margin-right: @table-cell-padding-left;
  }
}

.check-box-field.cell-editor-form-field > .field {
  padding-top: calc(var(--table-row-padding-y) - @checkable-cell-padding-adjustment);

  .cell-editor-popup.overflow-top & {
    padding-top: calc(var(--table-row-padding-y) - @checkable-cell-padding-adjustment + 1px);
  }
}

.check-box-field.disabled > .field {

  & > .check-box {
    cursor: default;
  }

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

  &.read-only > .label {
    color: @read-only-color;
  }
}

.checkbox-indentation {
  margin-left: @check-box-size + @check-box-field-label-padding-left;

  .radiobutton-group-body > & {
    margin-left: @check-box-size + @check-box-field-label-padding-left - @mandatory-indicator-width;
  }
}