{"version":3,"sources":["webpack://jerri-ui/src/components/button/F:/All project/JR-UI-pub/src/components/button/button.scss","webpack://jerri-ui/src/components/button/F:/All project/JR-UI-pub/src/components/button/button.vue"],"names":[],"mappings":"AAAA,iCACE,oBAAqB,CACrB,cAAe,CACf,cC+Cc,CD9Cd,qBAAsB,CACtB,gBAAiB,CALnB,4CAQI,cAAe,CACf,cAAe,CACf,iBC8CsB,CA0CxB,YAAa,CACb,sBAAuB,CACvB,kBAAmB,CAYnB,cA9Dc,CA+Dd,gBA/Dc,CDlDhB,yDAiBM,cAAe,CAjBrB,kDAuBM,WAAY,CAvBlB,mDA2BM,cAAe,CACf,WAAY,CACZ,wCCqCkD,CA8CtD,cAhEa,CAiEb,gBAjEa,CDhDf,qDAoCM,UAAW,CACX,cAAe,CArCrB,uEAyCQ,oBAA6B,CAC7B,kCAAwC,CA1ChD,qEA+CQ,+BAAwC,CACxC,uBAA8B,CAC9B,kCAAwC,CAjDhD,sEAsDQ,uBAA8B,CAC9B,kCAAwC,CAvDhD,sEA4DQ,+CAAkD,CA5D1D,2JAsEU,uBAA8B,CAtExC,0EA2EU,kCAAwC,CACxC,kCAAwC,CA5ElD,0FA+EY,oBAA6B,CA/EzC,mFAwFU,kCAAyC,CAxFnD,oDA+FM,UChFW,CDiFX,wBC7Ec,CDnBpB,0DAmGQ,wBC9EY,CDrBpB,kDAyGM,wBChGc,CDiGd,qBC3FW,CD4FX,UCtGW,CDLjB,0DA+GQ,gBAAiB,CA/GzB,wDAmHQ,wBC9FY,CD+FZ,aCjGY,CDkGZ,qBCtGS,CDfjB,gEAwHU,aCnGU,CDrBpB,mDAgIM,wBCvHc,CDwHd,qBClHW,CDmHX,aCzGe,CDzBrB,yDAqIQ,wBC5Ga,CDzBrB,mDA2IM,qBAAsB,CACtB,qBAAuB,CACvB,qCClIc,CDmId,kBCpFqB,CDqFrB,gBC7FU,CD8FV,UCnHY,CD7BlB,yDAmJQ,wBCxIY,CDXpB,qDAuJQ,cCxGO,CDyGP,aCjHa,CDvCrB,2DA2JU,aClIW,CDzBrB,gDAkKM,YAAa,CACb,kBAAmB,CAnKzB,oDAsKQ,UAAW,CACX,WAAY,CACZ,gBAAiB,CAxKzB,gGAgLM,wBAA0B,CAC1B,SAAU,CACV,WAAY,CACZ,UAAW,CAnLjB,0HAsLQ,YAAa,CAtLrB,gEA8LQ,kBAAmB,CC9EzB,cAlEc,CAmEd,gBAnEc,CDkJR,aCzJa,CDvCrB,sEAqMU,aChLU,CDrBpB,uDA2MQ,iBAAkB,CAClB,wBCzLY,CD0LZ,QAAS,CA7MjB,6DAgNU,wBC3LU,CDrBpB,uEAoNU,UCrMO,CDfjB,6DAyNU,UAAW,CACX,WAAY,CA1NtB,6ECgHE,cD6GmC,CC5GnC,gBD4GmC,CACzB,kBAAmB,CA9N/B,8DAoOU,UAAW,CACX,WAAY,CACZ,eAAgB,CAtO1B,8ECgHE,cAjEa,CAkEb,gBAlEa,CD/Cf,gEAiPQ,cAAe,CACf,UAAW,CACX,UAAW,CACX,wBC7Ma,CDvCrB,sDAwPQ,wBC/Na,CDzBrB,sEA2PU,wBClOW","file":"style.css","sourcesContent":[".jr-button-wrap {\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  font-size: $--font-xs;\r\n  vertical-align: middle;\r\n  user-select: none;\r\n\r\n  .jr-button {\r\n    min-width: 80px;\r\n    padding: 0 12px;\r\n    border-radius: $--border-radius-base;\r\n    @include center;\r\n    @include removeSpace($--font-xs);\r\n\r\n\r\n    // 文字比较多的时候左右pd设置10\r\n    &.less-padding {\r\n      padding: 0 10px;\r\n    }\r\n\r\n\r\n    // 按钮大小\r\n    &.small {\r\n      height: 32px;\r\n    }\r\n\r\n    &.normal {\r\n      min-width: 90px;\r\n      height: 36px;\r\n      box-shadow: $--box-shadow-btn;\r\n      @include removeSpace($--font-m);\r\n    }\r\n\r\n\r\n    // 禁用按钮\r\n    &-disabled {\r\n      opacity: .5;\r\n      cursor: no-drop;\r\n\r\n      // 绿色按钮\r\n      &.jr-button-success {\r\n        color: $--color-c6 !important;\r\n        background-color: $--color-c8 !important;\r\n      }\r\n\r\n      // 白色按钮\r\n      &.jr-button-plain {\r\n        background-color: $--color-c6 !important;\r\n        color: $--color-c18 !important;\r\n        border: solid 1px $--color-c3 !important;\r\n      }\r\n\r\n      // 红色按钮\r\n      &.jr-button-danger {\r\n        color: $--color-c11 !important;\r\n        border: solid 1px $--color-c3 !important;\r\n      }\r\n\r\n      // 删除按钮\r\n      &.jr-button-delete {\r\n        background-color: rgba($--color-c4, .5) !important;\r\n\r\n        i {\r\n          color: $--color-c18 !important;\r\n        }\r\n      }\r\n\r\n      // +号按钮\r\n      &.jr-button-add {\r\n        .jr-button-text {\r\n          color: $--color-c18 !important;\r\n        }\r\n\r\n        // 圆形+号按钮\r\n        &.circle {\r\n          background-color: $--color-c8 !important;\r\n          border: solid 1px $--color-c8 !important;\r\n\r\n          .jr-button-text {\r\n            color: $--color-c6 !important;\r\n          }\r\n\r\n        }\r\n      }\r\n\r\n      // -号按钮\r\n      &.jr-button-sub {\r\n        .jr-button-text {\r\n          background-color: $--color-c18 !important;\r\n        }\r\n      }\r\n    }\r\n\r\n    // 成功按钮\r\n    &-success {\r\n      color: $--color-c6;\r\n      background-color: $--color-c8;\r\n\r\n      &:hover {\r\n        background-color: $--color-c9;\r\n      }\r\n    }\r\n\r\n    // 白色按钮\r\n    &-plain {\r\n      border: 1px solid $--color-c3;\r\n      background-color: $--color-c6;\r\n      color: $--color-c1;\r\n\r\n      // 前置icon按钮\r\n      .j-icon {\r\n        margin-left: -6px;\r\n      }\r\n\r\n      &:hover {\r\n        border: solid 1px $--color-c9;\r\n        color: $--color-c8;\r\n        background-color: $--color-c6;\r\n\r\n        .j-icon {\r\n          color: $--color-c9;\r\n        }\r\n      }\r\n    }\r\n\r\n\r\n    // 警告按钮\r\n    &-danger {\r\n      border: solid 1px $--color-c3;\r\n      background-color: $--color-c6;\r\n      color: $--color-c11;\r\n\r\n      &:hover {\r\n        border: solid 1px $--color-c11;\r\n      }\r\n    }\r\n\r\n    // 删除按钮\r\n    &-delete {\r\n      padding: 0 10px 0 15px;\r\n      height: 28px !important;\r\n      background-color: rgba($--color-c4, .5);\r\n      border-radius: $--border-radius-tabs;\r\n      line-height: $--font-xs;\r\n      color: $--color-c13;\r\n\r\n      &:hover {\r\n        background-color: rgba($--color-c4, 1);\r\n      }\r\n\r\n      i {\r\n        font-size: $--font-l;\r\n        color: $--color-c18;\r\n\r\n        &:hover {\r\n          color: $--color-c11;\r\n        }\r\n      }\r\n    }\r\n\r\n    // 默认插槽容器样式\r\n    &-img {\r\n      display: flex;\r\n      align-items: center;\r\n\r\n      img {\r\n        width: 14px;\r\n        height: 14px;\r\n        margin-right: 7px;\r\n      }\r\n    }\r\n\r\n\r\n    // +号按钮默认宽高为正方形，隐藏图片\r\n    &-add,\r\n    &-sub {\r\n      min-width: auto !important;\r\n      padding: 0;\r\n      height: 32px;\r\n      width: 32px;\r\n\r\n      .default-img {\r\n        display: none;\r\n      }\r\n\r\n\r\n    }\r\n\r\n    &-add {\r\n      .jr-button-text {\r\n        padding-bottom: 2px;\r\n        @include removeSpace($--font-xl);\r\n        color: $--color-c18;\r\n      }\r\n\r\n      &:hover {\r\n        .jr-button-text {\r\n          color: $--color-c9;\r\n        }\r\n      }\r\n\r\n      // 圆形按钮\r\n      &.circle {\r\n        border-radius: 50%;\r\n        background-color: $--color-c8;\r\n        border: 0;\r\n\r\n        &:hover {\r\n          background-color: $--color-c9;\r\n        }\r\n\r\n        .jr-button-text {\r\n          color: $--color-c6;\r\n        }\r\n\r\n        // 小的\r\n        &.small {\r\n          width: 22px;\r\n          height: 22px;\r\n\r\n          .jr-button-text {\r\n            @include removeSpace(21px);\r\n            padding-bottom: 5px;\r\n          }\r\n        }\r\n\r\n        // 大的\r\n        &.normal {\r\n          width: 28px;\r\n          height: 28px;\r\n          box-shadow: none;\r\n\r\n          .jr-button-text {\r\n            @include removeSpace($--font-l);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &-sub {\r\n      .jr-button-text {\r\n        margin-top: 2px;\r\n        width: 12px;\r\n        height: 2px;\r\n        background-color: $--color-c18;\r\n      }\r\n\r\n      &:hover {\r\n        border: solid 1px $--color-c11;\r\n\r\n        .jr-button-text {\r\n          background-color: $--color-c11;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n\r\n\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 \"./button.scss\";\r\n"]}