@nutui/nutui-react 1.5.2-beta.0 → 1.5.2-beta.2

package/dist/styles/mixins/make-animation.scss

@@ -0,0 +1,24 @@
+@mixin make-animation(
+  $keyframeName,
+  $timingFun: $animation-timing-fun,
+  $duration: $animation-duration
+) {
+  .#{$keyframeName}-enter-active,
+  .#{$keyframeName}In,
+  .#{$keyframeName}-leave-active,
+  .#{$keyframeName}Out {
+    animation-duration: $duration;
+    animation-fill-mode: both;
+    animation-timing-function: $timingFun;
+  }
+
+  .#{$keyframeName}-enter-active,
+  .#{$keyframeName}In {
+    animation-name: #{$keyframeName}In;
+  }
+
+  .#{$keyframeName}-leave-active,
+  .#{$keyframeName}Out {
+    animation-name: #{$keyframeName}Out;
+  }
+}

package/dist/styles/mixins/text-ellipsis.scss

@@ -0,0 +1,20 @@
+@mixin text-ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+// 单行超长省略号
+@mixin oneline-ellipsis($width: 100%) {
+  width: $width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+// 多行超长省略号
+@mixin moreline-ellipsis($line: 2, $width: 100%) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $line;
+  overflow: hidden;
+  word-break: break-all;
+}

package/dist/styles/theme-dark.scss

@@ -0,0 +1,26 @@
+:root,
+page {
+  --nutui-brand-color: #fa2c19;
+  --nutui-brand-color-start: #ff404f;
+  --nutui-brand-color-end: #fa2c19;
+  --nutui-brand-link-color: #396acc;
+  --nutui-brand-text-color: #ffffff;
+  --nutui-gray-0: #000000;
+  --nutui-gray-1: #e6e6e6;
+  --nutui-gray-2: #828282;
+  --nutui-gray-3: #404040;
+  --nutui-gray-4: #0a0a0a;
+  --nutui-gray-5: #141414;
+  --nutui-gray-6: #1f1f1f;
+  --nutui-gray-7: rgba(0, 0, 0, 0.7);
+  --nutui-gray-8: rgba(0, 0, 0, 0.4);
+  --nutui-gray-9: rgba(0, 0, 0, 0.08);
+  --nutui-gray-10: rgba(0, 0, 0, 0.02);
+  --nutui-font-size-0: 10px;
+  --nutui-font-size-1: 12px;
+  --nutui-font-size-2: 14px;
+  --nutui-font-size-3: 16px;
+  --nutui-font-size-4: 18px;
+  --nutui-font-weight-bold: 400;
+  --nutui-line-height-base: 1.5;
+}

package/dist/styles/theme-default.scss

@@ -0,0 +1,40 @@
+:root,
+page {
+  --nutui-brand-color: #fa2c19;
+  --nutui-brand-color-start: #ff404f;
+  --nutui-brand-color-end: #fa2c19;
+  --nutui-brand-link-color: #396acc;
+  --nutui-brand-text-color: #ffffff;
+  --nutui-gray-0: #000000;
+  // 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
+  --nutui-gray-1: #1a1a1a;
+  // 次要文字色，用于次级标题、属性标示、非主要信息引导等。
+  --nutui-gray-2: #757575;
+  // 不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
+  --nutui-gray-3: #bfbfbf;
+  // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
+  --nutui-gray-4: #f4f4f4;
+  // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
+  --nutui-gray-5: #f8f8f8;
+  // 卡片背景色
+  --nutui-gray-6: #ffffff;
+  // 页面全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩
+  --nutui-gray-7: rgba(0, 0, 0, 0.7);
+  // 局部蒙层，用于非整页遮罩
+  --nutui-gray-8: rgba(0, 0, 0, 0.4);
+  // 间隔线/容错线，用于结构或信息分割
+  --nutui-gray-9: rgba(0, 0, 0, 0.08);
+  // 图片容错蒙层
+  --nutui-gray-10: rgba(0, 0, 0, 0.02);
+
+  // 字体
+  --nutui-font-size-0: 10px;
+  --nutui-font-size-1: 12px;
+  --nutui-font-size-2: 14px;
+  --nutui-font-size-3: 16px;
+  --nutui-font-size-4: 18px;
+  // 字重
+  --nutui-font-weight-bold: 400;
+  // 行高
+  --nutui-line-height-base: 1.5;
+}

package/dist/styles/themes/default.scss

@@ -0,0 +1,97 @@
+@import '../theme-default.scss';
+@import '../variables.scss';
+@import '../../styles/font/iconfont.css';
+@import '../../packages/button/button.scss';
+@import '../../packages/cell/cell.scss';
+@import '../../packages/cellgroup/cellgroup.scss';
+@import '../../packages/configprovider/configprovider.scss';
+@import '../../packages/icon/icon.scss';
+@import '../../packages/image/image.scss';
+@import '../../packages/overlay/overlay.scss';
+@import '../../packages/popup/popup.scss';
+@import '../../packages/col/col.scss';
+@import '../../packages/divider/divider.scss';
+@import '../../packages/grid/grid.scss';
+@import '../../packages/griditem/griditem.scss';
+@import '../../packages/layout/layout.scss';
+@import '../../packages/row/row.scss';
+@import '../../packages/sticky/sticky.scss';
+@import '../../packages/elevator/elevator.scss';
+@import '../../packages/fixednav/fixednav.scss';
+@import '../../packages/indicator/indicator.scss';
+@import '../../packages/menu/menu.scss';
+@import '../../packages/menuitem/menuitem.scss';
+@import '../../packages/navbar/navbar.scss';
+@import '../../packages/pagination/pagination.scss';
+@import '../../packages/sidenavbar/sidenavbar.scss';
+@import '../../packages/sidenavbaritem/sidenavbaritem.scss';
+@import '../../packages/subsidenavbar/subsidenavbar.scss';
+@import '../../packages/tabbar/tabbar.scss';
+@import '../../packages/tabbaritem/tabbaritem.scss';
+@import '../../packages/tabpane/tabpane.scss';
+@import '../../packages/tabs/tabs.scss';
+@import '../../packages/calendar/calendar.scss';
+@import '../../packages/calendaritem/calendaritem.scss';
+@import '../../packages/cascader/cascader.scss';
+@import '../../packages/checkbox/checkbox.scss';
+@import '../../packages/checkboxgroup/checkboxgroup.scss';
+@import '../../packages/datepicker/datepicker.scss';
+@import '../../packages/form/form.scss';
+@import '../../packages/formitem/formitem.scss';
+@import '../../packages/input/input.scss';
+@import '../../packages/inputnumber/inputnumber.scss';
+@import '../../packages/numberkeyboard/numberkeyboard.scss';
+@import '../../packages/picker/picker.scss';
+@import '../../packages/radio/radio.scss';
+@import '../../packages/radiogroup/radiogroup.scss';
+@import '../../packages/range/range.scss';
+@import '../../packages/rate/rate.scss';
+@import '../../packages/searchbar/searchbar.scss';
+@import '../../packages/shortpassword/shortpassword.scss';
+@import '../../packages/textarea/textarea.scss';
+@import '../../packages/uploader/uploader.scss';
+@import '../../packages/actionsheet/actionsheet.scss';
+@import '../../packages/backtop/backtop.scss';
+@import '../../packages/dialog/dialog.scss';
+@import '../../packages/drag/drag.scss';
+@import '../../packages/infiniteloading/infiniteloading.scss';
+@import '../../packages/notify/notify.scss';
+@import '../../packages/pulltorefresh/pulltorefresh.scss';
+@import '../../packages/swipe/swipe.scss';
+@import '../../packages/switch/switch.scss';
+@import '../../packages/toast/toast.scss';
+@import '../../packages/animate/animate.scss';
+@import '../../packages/animatingnumbers/animatingnumbers.scss';
+@import '../../packages/audio/audio.scss';
+@import '../../packages/avatar/avatar.scss';
+@import '../../packages/avatargroup/avatargroup.scss';
+@import '../../packages/badge/badge.scss';
+@import '../../packages/circleprogress/circleprogress.scss';
+@import '../../packages/collapse/collapse.scss';
+@import '../../packages/collapseitem/collapseitem.scss';
+@import '../../packages/countdown/countdown.scss';
+@import '../../packages/ellipsis/ellipsis.scss';
+@import '../../packages/empty/empty.scss';
+@import '../../packages/imagepreview/imagepreview.scss';
+@import '../../packages/noticebar/noticebar.scss';
+@import '../../packages/popover/popover.scss';
+@import '../../packages/price/price.scss';
+@import '../../packages/progress/progress.scss';
+@import '../../packages/skeleton/skeleton.scss';
+@import '../../packages/step/step.scss';
+@import '../../packages/steps/steps.scss';
+@import '../../packages/swiper/swiper.scss';
+@import '../../packages/swiperitem/swiperitem.scss';
+@import '../../packages/table/table.scss';
+@import '../../packages/tag/tag.scss';
+@import '../../packages/trendarrow/trendarrow.scss';
+@import '../../packages/video/video.scss';
+@import '../../packages/virtuallist/virtuallist.scss';
+@import '../../packages/watermark/watermark.scss';
+@import '../../packages/address/address.scss';
+@import '../../packages/barrage/barrage.scss';
+@import '../../packages/card/card.scss';
+@import '../../packages/signature/signature.scss';
+@import '../../packages/timedetail/timedetail.scss';
+@import '../../packages/timepannel/timepannel.scss';
+@import '../../packages/timeselect/timeselect.scss';