@alifd/meet-react/lib/number-picker/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component number-picker
  @display NumberPicker
  @chinese 数字输入框
  @family data-entry
*/
:root {
  /*
    @desc small-font-size
    @semantic 字体大小(小号)
    @namespace size/common
  */
  --numberpicker-small-font-size: var(--p-caption-font-size);
  /*
    @desc medium-font-size
    @semantic 字体大小(中号)
    @namespace size/common
  */
  --numberpicker-medium-font-size: var(--p-body-2-font-size);
  /*
    @desc large-font-size
    @semantic 字体大小(大号)
    @namespace size/common
  */
  --numberpicker-large-font-size: var(--p-subhead-font-size);
  /*
    @desc small-width
    @semantic 输入框宽度(小号)
    @namespace size/input
  */
  --numberpicker-small-input-width: var(--s-14);
  /*
    @desc medium-width
    @semantic 输入框宽度(中号)
    @namespace size/input
  */
  --numberpicker-medium-input-width: var(--s-16);
  /*
    @desc large-width
    @semantic 输入框宽度(大号)
    @namespace size/input
  */
  --numberpicker-large-input-width: var(--s-18);
  /*
     @desc small-height
     @semantic 高度(小号)
     @namespace size/input
     @type enum
     @enum size
   */
  --numberpicker-small-height: var(--s-6);
  /*
      @desc medium-height
      @semantic 高度(中号)
      @namespace size/input
      @type enum
      @enum size
    */
  --numberpicker-medium-height: var(--s-8);
  /*
      @desc large-height
      @semantic 高度(大号)
      @namespace size/input
      @type enum
      @enum size
    */
  --numberpicker-large-height: var(--s-11);
  /*
    @desc margin
    @semantic 外边距(小号)
    @namespace size/bounding
    @type number
  */
  --numberpicker-small-margin: 1.0666666666666667vw;
  /*
    @desc margin
    @semantic 外边距(中号)
    @namespace size/bounding
    @type number
  */
  --numberpicker-medium-margin: 2.1333333333333333vw;
  /*
    @desc margin
    @semantic 外边距(大号)
    @namespace size/bounding
    @type number
  */
  --numberpicker-large-margin: 3.2vw;
  /*
    @desc height
    @semantic 高度
    @namespace size/common
  */
  --numberpicker-height: var(--s-4);
  /*
    @desc input-border-color
    @semantic 输入框边框颜色
    @namespace style/input
  */
  --numberpicker-input-border-color: var(--color-line1-4);
  /*
    @desc input-font-color
    @semantic 输入框文字颜色
    @namespace style/input
  */
  --numberpicker-input-color: var(--color-text1-4);
  /*
    @desc button-corner
    @semantic 按钮圆角
    @namespace size/button
  */
  --numberpicker-button-corner: var(--corner-1);
  /*
    @desc border-width
    @semantic 按钮边框尺寸
    @namespace size/button
  */
  --numberpicker-button-border-width: var(--line-1);
  /*
    @desc button-border-color
    @semantic 按钮边框颜色
    @namespace style/button
  */
  --numberpicker-button-border-color: var(--color-line1-4);
  /*
    @desc icon-color
    @semantic 图标颜色
    @namespace style/button
  */
  --numberpicker-button-icon-color: var(--color-text1-4);
  /*
    @desc input-color
    @semantic 输入框文字颜色(禁用)
    @namespace style/input
  */
  --numberpicker-disabled-input-color: var(--color-text1-1);
  /*
    @desc icon-color
    @semantic 图标颜色(禁用)
    @namespace style/button
  */
  --numberpicker-disabled-button-icon-color: var(--color-text1-1);
  /*
    @desc disabled-bg-color
    @semantic 背景色(禁用)
    @namespace style/common
   */
  --numberpicker-disabled-bg-color: var(--color-transparent);
}

.mt-numberpicker {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}
.mt-numberpicker-input {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  border-width: var(--line-1);
  border-style: var(--line-solid);
  border-color: var(--numberpicker-input-border-color);
  border-radius: 0;
  color: var(--numberpicker-input-color);
  outline: none;
  text-align: center;
  appearance: none;
  font-family: var(--font-family);
  height: auto;
  line-height: unset;
}
.mt-numberpicker-input::-webkit-outer-spin-button, .mt-numberpicker-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}
.mt-numberpicker-input--small {
  width: var(--numberpicker-small-input-width);
  padding: 0 var(--box-small-spacing);
  font-size: var(--numberpicker-small-font-size);
  height: var(--numberpicker-small-height);
  margin-left: var(--numberpicker-small-margin);
  margin-right: var(--numberpicker-small-margin);
}
.mt-numberpicker-input--medium {
  width: var(--numberpicker-medium-input-width);
  padding: 0 var(--box-medium-spacing);
  font-size: var(--numberpicker-medium-font-size);
  height: var(--numberpicker-medium-height);
  margin-left: var(--numberpicker-medium-margin);
  margin-right: var(--numberpicker-medium-margin);
}
.mt-numberpicker-input--large {
  width: var(--numberpicker-large-input-width);
  padding: 0 var(--box-large-spacing);
  font-size: var(--numberpicker-large-font-size);
  height: var(--numberpicker-large-height);
  margin-left: var(--numberpicker-large-margin);
  margin-right: var(--numberpicker-large-margin);
}
.mt-numberpicker-input--disabled {
  color: var(--numberpicker-disabled-input-color);
  background-color: var(--numberpicker-disabled-bg-color);
}
.mt-numberpicker-input--readonly {
  border-color: var(--numberpicker-input-border-color);
}
.mt-numberpicker-input--no-button {
  margin-left: 0;
  margin-right: 0;
}
.mt-numberpicker-button {
  border-width: var(--numberpicker-button-border-width);
  border-style: var(--line-solid);
  border-color: var(--numberpicker-button-border-color);
  border-radius: var(--numberpicker-button-corner);
  --button-small-min-width: 0;
  --button-medium-min-width: 0;
  --button-large-min-width: 0;
}
.mt-numberpicker-button--small {
  padding: var(--box-small-spacing);
  height: var(--numberpicker-small-height);
  height: var(--numberpicker-small-height);
}
.mt-numberpicker-button--medium {
  padding: var(--box-medium-spacing);
  height: var(--numberpicker-medium-height);
  height: var(--numberpicker-medium-height);
}
.mt-numberpicker-button--large {
  padding: var(--box-large-spacing);
  height: var(--numberpicker-large-height);
  height: var(--numberpicker-large-height);
}
.mt-numberpicker-button-decrease {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.mt-numberpicker-button-increase {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.mt-numberpicker-button--disabled {
  background-color: var(--numberpicker-disabled-bg-color);
}
.mt-numberpicker-button-icon {
  left: 0;
  color: var(--numberpicker-button-icon-color);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--numberpicker-height);
  height: var(--numberpicker-height);
  line-height: var(--numberpicker-height);
}
.mt-numberpicker-button-icon--small {
  font-size: var(--numberpicker-small-font-size);
}
.mt-numberpicker-button-icon--medium {
  font-size: var(--numberpicker-medium-font-size);
}
.mt-numberpicker-button-icon--large {
  font-size: var(--numberpicker-large-font-size);
}
.mt-numberpicker-button-icon--disabled {
  color: var(--numberpicker-disabled-button-icon-color);
}