{"version":3,"sources":["webpack://jerri-ui/src/components/input/F:/All project/JR-UI-pub/src/components/input/input.scss","webpack://jerri-ui/src/components/input/F:/All project/JR-UI-pub/src/components/input/input.vue"],"names":[],"mappings":"AACA,uBACE,WC0EmB,CDzEnB,qBAAsB,CACtB,wBCKkB,CDJlB,iBCmDwB,CDlDxB,aAAc,CACd,YAAa,CACb,UAAW,CACX,gCAAyC,CAR3C,oCAWI,UCLa,CDMb,cAAe,CACf,iBAAkB,CAClB,QAAS,CAdb,wEAyBM,aCPc,CDQf,2BAKH,cCkBc,CDjBd,iBAAkB,CAClB,oBAAqB,CACrB,UAAW,CACX,eAAgB,CALlB,4FAYI,oBClCgB,CDsBpB,yHAmBM,wBC7Bc,CD8Bd,uCCiB+C,CDrCrD,0CAwBM,cAAe,CAxBrB,wIAwCM,aClDc,CDUpB,kCA8CM,cAAe,CACf,aCrEc,CDsEd,iBAAkB,CAClB,OAAQ,CACR,0BAA2B,CAC5B,iCAMH,iBAAkB,CAClB,KAAM,CACN,WAAY,CACZ,SAAU,CACV,SAAU,CALZ,mCAQI,OAAQ,CACT,wCAGC,OAAQ,CACR,wBCjFgB,CDkFhB,UAAW,CACX,WAAY,CACZ,cAAe,CACf,yBAA8D,CCNhE,YAAa,CACb,sBAAuB,CACvB,kBAAmB,CDMjB,yBAA0B,CAR3B,0CAWG,wBAA+B,CAC/B,oBAA6B,CAC7B,UAAW,CAbd,8CAiBG,wBC9Fc,CD+Ff,iCAMH,iBAAkB,CAClB,KAAM,CACN,WAAY,CACZ,SAAU,CACV,QAAS,CALX,mCAQI,MAAO,CACR,kCAKD,iBAAkB,CACnB,kCAIC,kBAAmB,CACpB,yBAGC,iBAAkB,CAClB,OAAQ,CACR,0BAA2B,CAC5B,qCAIC,yBAA2B,CAC3B,kBAAoB,CACpB,yCAA+C,CAHjD,sFAOI,yCAA+C,CAC/C,yBAA2B,CAC5B,oCAMD,kCAAyC,CACzC,kCAAwC,CACxC,oBAA8B,CAC9B,4BAA8B,CAC9B,yBAA2B,CAL7B,yCAQI,4BAA8B,CARlC,2CAWM,uBAA6B,CAC9B,uCAWD,UCpLa,CDqLd,8BAID,iBAAkB,CAClB,UAAW,CACX,eAAgB,CAChB,kBAAuB,CACvB,eAAgB,CALlB,+CAQI,iBAAkB,CARtB,+CAYI,kBAAmB,CAZvB,uCAiBI,aAAc,CACd,eAAgB,CAChB,UAAW,CACX,WAAY,CACZ,0BAA2B,CAC3B,cAAe,CACf,gBAAiB,CACjB,YAAa,CACb,WAAY,CACZ,wBChNgB,CDiNhB,iBClKsB,CDmKtB,qBC5Ma,CDgLjB,0FAkCM,wBC5Mc,CD0KpB,mCAuCI,iBAAkB,CAClB,UAAW,CACX,SAAU,CACV,UClOa,CDmOb,eAAmB,CACnB,cAAe,CACf,iBAAkB,CACnB,sEAOG,UAAW,CACX,WAAY,CALlB,4EAUM,wBC3Ne,CDiNrB,4EAeM,iBCnMsB,CDoMtB,wBCvPc,CDuOpB,kFAmBQ,wBC5Na,CD6Nd,oGASL,uBAAwB,CACzB,oCAGC,yBAA0B","file":"style.css","sourcesContent":["// 输入框 - 基础\r\ninput {\r\n  height: $--height-input;\r\n  box-sizing: border-box;\r\n  border: 1px solid $--color-c3;\r\n  border-radius: $--border-radius-base;\r\n  padding: 0 8px;\r\n  outline: none;\r\n  width: 100%;\r\n  font: normal $--font-xs \"Mircosoft Yahei\";\r\n\r\n  &::placeholder {\r\n    color: $--color-c2;\r\n    font-size: 14px;\r\n    position: relative;\r\n    top: -1px;\r\n  }\r\n\r\n  &:focus span {\r\n    i {\r\n      color: $--color-c8;\r\n    }\r\n  }\r\n\r\n  &:hover span {\r\n    i {\r\n      color: $--color-c8;\r\n    }\r\n  }\r\n}\r\n\r\n.jr-input {\r\n  font-size: $--font-xs;\r\n  position: relative;\r\n  display: inline-block;\r\n  width: 100%;\r\n  min-width: 100px;\r\n\r\n  input.border-deep {\r\n    border-color: $--color-c3;\r\n  }\r\n\r\n  input.border-simple {\r\n    border-color: $--color-c3;\r\n  }\r\n\r\n  input {\r\n    &.over-icon,\r\n    &:focus,\r\n    &:hover {\r\n      border: 1px solid $--color-c9;\r\n      box-shadow: $--box-shadow-input;\r\n    }\r\n\r\n    &.readonly {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    color: $--color-c9;\r\n\r\n    i {\r\n      color: $--color-c9;\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    color: $--color-c9;\r\n\r\n    i {\r\n      color: $--color-c9;\r\n    }\r\n  }\r\n\r\n  span {\r\n    i {\r\n      font-size: 24px;\r\n      color: $--color-c3;\r\n      position: absolute;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n    }\r\n  }\r\n}\r\n\r\n// 后置图标-插槽\r\n.jr-suffix-icon {\r\n  position: absolute;\r\n  top: 0;\r\n  height: 100%;\r\n  z-index: 1;\r\n  right: 4px;\r\n\r\n  i {\r\n    right: 0;\r\n  }\r\n\r\n  &-search {\r\n    top: 1px;\r\n    background-color: $--color-c8;\r\n    width: 32px;\r\n    height: 30px;\r\n    cursor: pointer;\r\n    border-radius: 0 $--border-radius-base $--border-radius-base 0;\r\n    @include center;\r\n    transform: translateX(3px);\r\n\r\n    i {\r\n      font-size: $--font-l !important;\r\n      color: $--color-c6 !important;\r\n      right: auto;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: $--color-c9;\r\n    }\r\n  }\r\n}\r\n\r\n// 前置图标-插槽\r\n.jr-prifix-icon {\r\n  position: absolute;\r\n  top: 0;\r\n  height: 100%;\r\n  z-index: 1;\r\n  left: 4px;\r\n\r\n  i {\r\n    left: 0;\r\n  }\r\n}\r\n\r\n// 前置图标-配置\r\n.jr-input-prefix {\r\n  padding-left: 30px;\r\n}\r\n\r\n// 后置图标-配置\r\n.jr-input-suffix {\r\n  padding-right: 30px;\r\n}\r\n\r\n.center {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n// 单下划线形式\r\n.jr-input-underline {\r\n  border-radius: 0 !important;\r\n  border: 0 !important;\r\n  border-bottom: 1px solid $--color-c3 !important;\r\n\r\n  &:focus,\r\n  &:hover {\r\n    border-bottom: 1px solid $--color-c9 !important;\r\n    box-shadow: none !important;\r\n  }\r\n}\r\n\r\n/** 禁用输入框 - start **/\r\n\r\n.jr-input-disabled {\r\n  background-color: $--color-c16 !important;\r\n  border: 1px solid $--color-c3 !important;\r\n  color: $--color-c17 !important;\r\n  cursor: not-allowed !important;\r\n  box-shadow: none !important;\r\n\r\n  & ~ span {\r\n    cursor: not-allowed !important;\r\n\r\n    i {\r\n      color: $--color-c3 !important;\r\n    }\r\n  }\r\n}\r\n\r\n/** 禁用输入框 - end **/\r\n\r\n/** 文本域 - start **/\r\n\r\n// 文本域placeholder\r\ntextarea {\r\n  &::placeholder {\r\n    color: $--color-c2;\r\n  }\r\n}\r\n\r\n.jr-textarea {\r\n  position: relative;\r\n  width: 100%;\r\n  text-align: left;\r\n  box-sizing: content-box;\r\n  overflow: hidden;\r\n\r\n  .jr-input-prefix {\r\n    padding-left: 30px;\r\n  }\r\n\r\n  .jr-input-suffix {\r\n    padding-right: 30px;\r\n  }\r\n\r\n  // 处理换行问题 overflow: hidden;\r\n  > textarea {\r\n    display: block;\r\n    min-height: 80px;\r\n    width: 100%;\r\n    height: 100%;\r\n    padding: 5px 11px 11px 11px;\r\n    font-size: 13px;\r\n    line-height: 23px;\r\n    outline: none;\r\n    resize: none;\r\n    border: 1px solid $--color-c3;\r\n    border-radius: $--border-radius-base;\r\n    background-color: $--color-c6;\r\n    &:hover {\r\n      border: 1px solid $--color-c9;\r\n    }\r\n\r\n    &:focus {\r\n      border: 1px solid $--color-c9;\r\n    }\r\n  }\r\n\r\n  span {\r\n    position: absolute;\r\n    bottom: 4px;\r\n    right: 7px;\r\n    color: $--color-c2;\r\n    font-weight: normal;\r\n    font-size: 12px;\r\n    font-family: Arial;\r\n  }\r\n}\r\n\r\n.jr-textarea {\r\n  // @include scroll-bar;\r\n  textarea.scroll-bar {\r\n    ::-webkit-scrollbar {\r\n      width: 15px;\r\n      height: 15px;\r\n    }\r\n\r\n    /*定义滚动条轨道*/\r\n    ::-webkit-scrollbar-track {\r\n      background-color: $--color-c14;\r\n    }\r\n\r\n    /*定义滑块*/\r\n    ::-webkit-scrollbar-thumb {\r\n      border-radius: $--border-radius-scroll;\r\n      background-color: $--color-c3;\r\n\r\n      &:hover {\r\n        background-color: $--color-c18;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n/** 文本域 - end **/\r\n\r\ninput::-webkit-outer-spin-button,\r\ninput::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n}\r\n\r\ninput[type=\"number\"] {\r\n  -moz-appearance: textfield;\r\n}\r\n","/* 颜色变量 几种常见的颜色 参考图片\r\n-------------------------- */\r\n// 亮晶晶\r\n$--color-c0: transparent !default;\r\n// 黑色\r\n$--color-c1: #000 !default;\r\n// 输入框占位字体颜色\r\n$--color-c2: #999 !default;\r\n// 分割线/标签描边/滚动条/icon禁用\r\n$--color-c3: #abc0ba !default;\r\n// 表头背景\r\n$--color-c4: #e2e9e7 !default;\r\n// 内容区域底色\r\n$--color-c5: #f9fbf9 !default;\r\n// 白色\r\n$--color-c6: #fff !default;\r\n// 菜单栏/各类大标题\r\n$--color-c7: #003f2d !default;\r\n// 按钮/图标/字体点亮\r\n$--color-c8: #067f42 !default;\r\n// VI色/按钮hover色\r\n$--color-c9: #1aa849 !default;\r\n// 下拉条选中/弹窗选中\r\n$--color-c10: #e3f7e3 !default;\r\n// 强调/提醒/警示\r\n$--color-c11: #ff5c54 !default;\r\n// 强调/提醒\r\n$--color-c12: #ff8e00 !default;\r\n// 下拉选项字体颜色\r\n$--color-c13: #333 !default;\r\n// 滚动条背景色\r\n$--color-c14: #eff4ef !default;\r\n// 弹窗标题背景色\r\n$--color-c15: #1f6c44 !default;\r\n// 禁用输入框背景色\r\n$--color-c16: #f7f9f9 !default;\r\n// 禁用输入框字体颜色\r\n$--color-c17: #666 !default;\r\n// 白色按钮禁用字体颜色 滚动条hover颜色 + -号按钮默认字体颜色\r\n$--color-c18: #7e9e94 !default;\r\n// 弹窗关闭icon的hover色\r\n$--color-c19: #00ff06 !default;\r\n\r\n/* 字体大小，以衣服尺码数来区分大小 XXS、XS、S、M、L、XL、XXL、XXXL\r\n-------------------------- */\r\n$--font-xxl: 32px !default;\r\n$--font-xl: 26px !default;\r\n$--font-l: 24px !default;\r\n$--font-m: 16px !default;\r\n$--font-s: 15px !default;\r\n$--font-xs: 14px !default;\r\n$--font-xxs: 13px !default;\r\n$--font-xxxs: 12px !default;\r\n\r\n/* 圆角\r\n-------------------------- */\r\n$--border-radius-base: 3px !default;\r\n// ellipse tab圆角\r\n$--border-radius-tabs: 13px !default;\r\n// 滚动条\r\n$--border-radius-scroll: 2px !default;\r\n\r\n/* 阴影\r\n-------------------------- */\r\n$--box-shadow-base: 0px 1px 10px 0px rgba($--color-c1, 0.2) !default;\r\n// 按钮阴影\r\n$--box-shadow-btn: 0px 3px 3px 0px rgba(0, 63, 45, 0.45) !default;\r\n// 输入框阴影\r\n$--box-shadow-input: 0 0 0 2px rgba(26, 168, 73, 0.3) !default;\r\n// tabs阴影\r\n$--box-shadow-tabs: 0px -1px 1px 0px rgba($--color-c1, 0.06) !default;\r\n$--box-shadow-ellipse: 0px 2px 6px 0px rgba(38, 50, 56, 0.16) !default;\r\n\r\n/* 高度\r\n-------------------------- */\r\n// 输入框高度\r\n$--height-input: 32px !default;\r\n\r\n/* 宽度\r\n-------------------------- */\r\n// 外框菜单宽度\r\n$--width-menu: 180px !default;\r\n\r\n/* 距离\r\n-------------------------- */\r\n// 表单之间默认距离\r\n$--distance-form: 16px !default;\r\n\r\n// 需适配屏幕分辨率\r\n$--screen-s: 1366px !default;\r\n$--screen-m: 1600px !default;\r\n\r\n// cdn地址\r\n$--cdn-url: \"//cdn.ymm.cn/CDN\";\r\n$--cdn-images: \"#{$--cdn-url}/jerri-ui/assets/images\";\r\n\n// 弹性布局居中\r\n@mixin center {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n// 占位符混入\r\n@mixin placeholder($color) {\r\n  &::-webkit-input-placeholder {\r\n    color: $color;\r\n  }\r\n}\r\n\r\n// 消除字体上下间距\r\n@mixin removeSpace($size) {\r\n  font-size: $size;\r\n  line-height: $size;\r\n}\r\n\r\n// 多行文本显示省略号\r\n@mixin rowHide($row) {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  word-break: break-all;\r\n  display: -webkit-box;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-line-clamp: $row;\r\n  cursor: default;\r\n}\r\n\r\n// 单行文本显示省略号\r\n@mixin ellip {\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n}\r\n\r\n// 滚动条混入\r\n@mixin scroll-bar {\r\n  ::-webkit-scrollbar {\r\n    width: 15px;\r\n    height: 15px;\r\n  }\r\n\r\n  /*定义滚动条轨道*/\r\n  ::-webkit-scrollbar-track {\r\n    background-color: $--color-c14;\r\n  }\r\n\r\n  /*定义滑块*/\r\n  ::-webkit-scrollbar-thumb {\r\n    border-radius: $--border-radius-scroll;\r\n    background-color: $--color-c3;\r\n\r\n    &:hover {\r\n      background-color: $--color-c18;\r\n    }\r\n  }\r\n}\r\n\r\n// 媒体查询最大宽度混入 默认1600\r\n@mixin less-resolution($max-width: $--screen-m) {\r\n  @media screen and (max-width: $max-width) {\r\n    @content;\r\n  }\r\n}\r\n\r\n// 弹性布局垂直居中 水平根据参数对齐 默认靠两端平分\r\n@mixin flex-justify($align: space-between) {\r\n  display: flex;\r\n  justify-content: $align;\r\n  align-items: center;\r\n}\r\n\n\r\n@import \"input.scss\";\r\n"]}