formstone/src/less/number.less

Library of modular front end components.

/**
 * @component
 * @name Number
 */

@import "imports/utils.less";

/**
 * @class
 * @name .fs-number-element
 * @type element
 * @description Target elmement
 */

/**
 * @class
 * @name .fs-number
 * @type element
 * @description Base widget class
 */

/**
 * @class
 * @name .fs-number.fs-number-disabled
 * @type modifier
 * @description Indicates disabled state
 */

.fs-number {
  position: relative;

  overflow: hidden;

  &,
  &:after,
  &:before,
  *,
  *:after,
  *:before {
    box-sizing: border-box;
    transition: none;
    // user-select: none !important;
  }

  &-element {
    width: 100%;

    overflow: hidden;

    -moz-appearance: textfield;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      margin: 0;

      -webkit-appearance: none;
    }

    &::-ms-clear {
      display: none;
    }
  }

  &-disabled &-element {
  }

  /**
   * @class
   * @name .fs-number-arrow
   * @type element
   * @description Arrow elmement
   */

  /**
   * @class
   * @name .fs-number-arrow:after
   * @type element
   * @description Arrow icon
   */

  &-arrow {
    .fs_button;
  }

  /**
   * @class
   * @name .fs-number-arrow.fs-number-up
   * @type modifier
   * @description Indicates up state
   */

  &-arrow&-up {
  }

  /**
   * @class
   * @name .fs-number-arrow.fs-number-down
   * @type modifier
   * @description Indicates up state
   */

  &-arrow&-down {
  }

  &-disabled &-arrow {
    cursor: default;
  }
}