scout.form.fields.checkbox.CheckBoxField.css Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of org.eclipse.scout.rt.ui.html Show documentation

There is a newer version: 25.1.0-beta.0

Show newest version

/*******************************************************************************
 * Copyright (c) 2014-2015 BSI Business Systems Integration AG.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     BSI Business Systems Integration AG - initial API and implementation
 ******************************************************************************/
@check-box-size: 18px;

.check-box-field > .field {
  padding: 6px 0 @borderless-field-padding-y 0;
  outline: none;
  white-space: nowrap;

  & > .check-box,
  & > .label {
    color: @control-color;
    cursor: pointer;
    vertical-align: middle;
  }

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

  /* only the label should be clickable, not the whole field */
  & > .label {
    padding-top: 1px;
    padding-left: 7px;
    display: inline-block;
    max-width: calc(~'100%' - @check-box-size);
    #scout.overflow-ellipsis-nowrap();
  }

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

  &.has-inner-alignment {

    &.halign-left {
      text-align: left;
    }

    &.halign-center {
      text-align: center;
    }

    &.halign-right {
      text-align: right;
    }
  }

  & > .check-box {

    #scout.checkbox();

    &:focus {
      outline: none;
      border-color: @focus-border-color;
    }

    &::before {
      #scout.checkbox-before();
    }

    &.checked::before {
      #scout.checkbox-before-checked();
    }

    &.disabled {
      #scout.checkbox-disabled();
      &::before {
        #scout.checkbox-before-disabled();
      }
      :hover::before {
        #scout.checkbox-before-disabled();
      }
    }
  }

  &.cell-editor-field > .check-box {
    margin-left: @check-box-size;
    margin-top: 0px;
  }
}