From e3ab92e353e28681931dfeab32b74d10a81dab87 Mon Sep 17 00:00:00 2001 From: taoqf Date: Sat, 7 Aug 2021 05:41:41 +0000 Subject: [PATCH 1/2] repository --- package.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index fd73267..779b5d7 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,10 @@ "name": "XueYou", "email": "xueyoucd@gmail.com" }, + "repository": { + "type": "git", + "url": "https://gitee.com/xueyou2000/weui-react-v2.git" + }, "license": "MIT", "keywords": [ "react", @@ -96,4 +100,4 @@ "vfile-message": "^2.0.4", "yorkie": "^2.0.0" } -} +} \ No newline at end of file -- Gitee From 43ea96b9081c7c729cb968ff98f44db079086ff8 Mon Sep 17 00:00:00 2001 From: taoqf Date: Sun, 8 Aug 2021 03:53:18 +0000 Subject: [PATCH 2/2] convert less to css --- buildless.sh | 43 ++ .../amount-key-board/demo/index.tsx | 2 +- docs/components/button/demo/block.tsx | 2 +- docs/components/button/demo/disabled.tsx | 2 +- docs/components/button/demo/type.tsx | 2 +- docs/components/dialog/demo/input.tsx | 2 +- docs/components/flex/demo/flex.tsx | 2 +- docs/components/form/demo/index.tsx | 2 +- .../half-screen-dialog/demo/confirm.tsx | 2 +- docs/components/pull-refresh/demo/index.tsx | 2 +- docs/components/spin/demo/inline.tsx | 2 +- docs/components/swipe-action/demo/index.tsx | 2 +- docs/components/tabs/demo/vertical.tsx | 2 +- docs/components/toast/demo/index.tsx | 2 +- src/ActionSheet/style/index.css | 99 +++++ src/ActionSheet/style/index.ts | 4 +- src/AmountKeyBoard/style/index.css | 102 +++++ src/AmountKeyBoard/style/index.ts | 4 +- src/Button/style/index.css | 400 ++++++++++++++++++ src/Button/style/index.ts | 4 +- src/Button/style/mixin.css | 0 src/Checkbox/style/index.css | 70 +++ src/Checkbox/style/index.ts | 4 +- src/DatePicker/style/index.css | 3 + src/DatePicker/style/index.ts | 4 +- src/Dialog/style/index.css | 96 +++++ src/Dialog/style/index.ts | 4 +- src/Flex/style/index.css | 3 + src/Flex/style/index.ts | 2 +- src/Footer/style/index.css | 42 ++ src/Footer/style/index.ts | 4 +- src/Form/style/index.css | 122 ++++++ src/Form/style/index.ts | 4 +- src/Grid/style/index.css | 107 +++++ src/Grid/style/index.ts | 4 +- src/HalfScreenDialog/style/index.css | 72 ++++ src/HalfScreenDialog/style/index.ts | 4 +- src/ImageView/style/index.css | 180 ++++++++ src/ImageView/style/index.ts | 4 +- src/Input/style/index.css | 97 +++++ src/Input/style/index.ts | 4 +- src/List/style/index.css | 154 +++++++ src/List/style/index.ts | 4 +- src/Loading/style/index.css | 113 +++++ src/Loading/style/index.ts | 4 +- src/Loadmore/style/index.css | 51 +++ src/Loadmore/style/index.ts | 4 +- src/NumberInput/style/index.css | 39 ++ src/NumberInput/style/index.ts | 4 +- src/Panel/style/index.css | 181 ++++++++ src/Panel/style/index.ts | 4 +- src/Picker/style/index.css | 107 +++++ src/Picker/style/index.ts | 4 +- src/Popup/style/index.css | 154 +++++++ src/Popup/style/index.ts | 4 +- src/Preview/style/index.css | 168 ++++++++ src/Preview/style/index.ts | 4 +- src/PromptDialog/style/index.css | 20 + src/PromptDialog/style/index.ts | 4 +- src/PullRefresh/style/index.css | 50 +++ src/PullRefresh/style/index.ts | 4 +- src/Rate/style/index.css | 60 +++ src/Rate/style/index.ts | 4 +- src/SafeArea/style/index.css | 8 + src/SafeArea/style/index.ts | 4 +- src/Search/style/index.css | 87 ++++ src/Search/style/index.ts | 4 +- src/SegmentedControl/style/index.css | 36 ++ src/SegmentedControl/style/index.ts | 4 +- src/Skeleton/style/index.css | 16 + src/Skeleton/style/index.ts | 4 +- src/Spin/style/index.css | 165 ++++++++ src/Spin/style/index.ts | 4 +- src/SwipeAction/style/index.css | 53 +++ src/SwipeAction/style/index.ts | 4 +- src/Swiper/style/index.css | 68 +++ src/Swiper/style/index.ts | 4 +- src/Switch/style/index.css | 123 ++++++ src/Switch/style/index.ts | 4 +- src/Tabs/style/index.css | 160 +++++++ src/Tabs/style/index.ts | 4 +- src/TextArea/style/index.css | 39 ++ src/TextArea/style/index.ts | 4 +- src/Toast/style/index.css | 89 ++++ src/Toast/style/index.ts | 4 +- src/Toptips/style/index.css | 30 ++ src/Toptips/style/index.ts | 4 +- src/Upload/style/index.css | 132 ++++++ src/Upload/style/index.ts | 4 +- src/WhiteSpace/style/index.css | 15 + src/WhiteSpace/style/index.ts | 4 +- src/WingBlank/style/index.css | 12 + src/WingBlank/style/index.ts | 4 +- src/style/index.css | 0 src/style/themes/default.css | 0 src/style/themes/index.css | 0 96 files changed, 3656 insertions(+), 90 deletions(-) create mode 100644 buildless.sh create mode 100644 src/ActionSheet/style/index.css create mode 100644 src/AmountKeyBoard/style/index.css create mode 100644 src/Button/style/index.css create mode 100644 src/Button/style/mixin.css create mode 100644 src/Checkbox/style/index.css create mode 100644 src/DatePicker/style/index.css create mode 100644 src/Dialog/style/index.css create mode 100644 src/Flex/style/index.css create mode 100644 src/Footer/style/index.css create mode 100644 src/Form/style/index.css create mode 100644 src/Grid/style/index.css create mode 100644 src/HalfScreenDialog/style/index.css create mode 100644 src/ImageView/style/index.css create mode 100644 src/Input/style/index.css create mode 100644 src/List/style/index.css create mode 100644 src/Loading/style/index.css create mode 100644 src/Loadmore/style/index.css create mode 100644 src/NumberInput/style/index.css create mode 100644 src/Panel/style/index.css create mode 100644 src/Picker/style/index.css create mode 100644 src/Popup/style/index.css create mode 100644 src/Preview/style/index.css create mode 100644 src/PromptDialog/style/index.css create mode 100644 src/PullRefresh/style/index.css create mode 100644 src/Rate/style/index.css create mode 100644 src/SafeArea/style/index.css create mode 100644 src/Search/style/index.css create mode 100644 src/SegmentedControl/style/index.css create mode 100644 src/Skeleton/style/index.css create mode 100644 src/Spin/style/index.css create mode 100644 src/SwipeAction/style/index.css create mode 100644 src/Swiper/style/index.css create mode 100644 src/Switch/style/index.css create mode 100644 src/Tabs/style/index.css create mode 100644 src/TextArea/style/index.css create mode 100644 src/Toast/style/index.css create mode 100644 src/Toptips/style/index.css create mode 100644 src/Upload/style/index.css create mode 100644 src/WhiteSpace/style/index.css create mode 100644 src/WingBlank/style/index.css create mode 100644 src/style/index.css create mode 100644 src/style/themes/default.css create mode 100644 src/style/themes/index.css diff --git a/buildless.sh b/buildless.sh new file mode 100644 index 0000000..9cf66f0 --- /dev/null +++ b/buildless.sh @@ -0,0 +1,43 @@ +npx lessc ./src/ActionSheet/style/index.less ./src/ActionSheet/style/index.css +npx lessc ./src/Loading/style/index.less ./src/Loading/style/index.css +npx lessc ./src/SwipeAction/style/index.less ./src/SwipeAction/style/index.css +npx lessc ./src/AmountKeyBoard/style/index.less ./src/AmountKeyBoard/style/index.css +npx lessc ./src/Loadmore/style/index.less ./src/Loadmore/style/index.css +npx lessc ./src/Swiper/style/index.less ./src/Swiper/style/index.css +npx lessc ./src/Button/style/index.less ./src/Button/style/index.css +npx lessc ./src/NumberInput/style/index.less ./src/NumberInput/style/index.css +npx lessc ./src/Switch/style/index.less ./src/Switch/style/index.css +npx lessc ./src/Button/style/mixin.less ./src/Button/style/mixin.css +npx lessc ./src/Panel/style/index.less ./src/Panel/style/index.css +npx lessc ./src/Tabs/style/index.less ./src/Tabs/style/index.css +npx lessc ./src/Checkbox/style/index.less ./src/Checkbox/style/index.css +npx lessc ./src/Picker/style/index.less ./src/Picker/style/index.css +npx lessc ./src/TextArea/style/index.less ./src/TextArea/style/index.css +npx lessc ./src/DatePicker/style/index.less ./src/DatePicker/style/index.css +npx lessc ./src/Popup/style/index.less ./src/Popup/style/index.css +npx lessc ./src/Toast/style/index.less ./src/Toast/style/index.css +npx lessc ./src/Dialog/style/index.less ./src/Dialog/style/index.css +npx lessc ./src/Preview/style/index.less ./src/Preview/style/index.css +npx lessc ./src/Toptips/style/index.less ./src/Toptips/style/index.css +npx lessc ./src/Flex/style/index.less ./src/Flex/style/index.css +npx lessc ./src/PromptDialog/style/index.less ./src/PromptDialog/style/index.css +npx lessc ./src/Upload/style/index.less ./src/Upload/style/index.css +npx lessc ./src/Footer/style/index.less ./src/Footer/style/index.css +npx lessc ./src/PullRefresh/style/index.less ./src/PullRefresh/style/index.css +npx lessc ./src/WhiteSpace/style/index.less ./src/WhiteSpace/style/index.css +npx lessc ./src/Form/style/index.less ./src/Form/style/index.css +npx lessc ./src/Rate/style/index.less ./src/Rate/style/index.css +npx lessc ./src/WingBlank/style/index.less ./src/WingBlank/style/index.css +npx lessc ./src/Grid/style/index.less ./src/Grid/style/index.css +npx lessc ./src/SafeArea/style/index.less ./src/SafeArea/style/index.css +npx lessc ./src/style/index.less ./src/style/index.css +npx lessc ./src/HalfScreenDialog/style/index.less ./src/HalfScreenDialog/style/index.css +npx lessc ./src/Search/style/index.less ./src/Search/style/index.css +npx lessc ./src/style/themes/default.less ./src/style/themes/default.css +npx lessc ./src/ImageView/style/index.less ./src/ImageView/style/index.css +npx lessc ./src/SegmentedControl/style/index.less ./src/SegmentedControl/style/index.css +npx lessc ./src/style/themes/index.less ./src/style/themes/index.css +npx lessc ./src/Input/style/index.less ./src/Input/style/index.css +npx lessc ./src/Skeleton/style/index.less ./src/Skeleton/style/index.css +npx lessc ./src/List/style/index.less ./src/List/style/index.css +npx lessc ./src/Spin/style/index.less ./src/Spin/style/index.css diff --git a/docs/components/amount-key-board/demo/index.tsx b/docs/components/amount-key-board/demo/index.tsx index e18b3fc..2186b54 100644 --- a/docs/components/amount-key-board/demo/index.tsx +++ b/docs/components/amount-key-board/demo/index.tsx @@ -4,7 +4,7 @@ */ import React, { useState } from 'react'; import { AmountKeyBoard, Toast } from 'weui-react-v2'; -import './index.less'; +import './index.css'; export default function AmountKeyBoardDemo() { const [amount, setAmount] = useState(45.65); diff --git a/docs/components/button/demo/block.tsx b/docs/components/button/demo/block.tsx index f7cd874..40b9a98 100644 --- a/docs/components/button/demo/block.tsx +++ b/docs/components/button/demo/block.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; import { Button } from 'weui-react-v2'; -import './btn-demo.less'; +import './btn-demo.css'; export default () => { return ( diff --git a/docs/components/button/demo/disabled.tsx b/docs/components/button/demo/disabled.tsx index ef2de17..49769e3 100644 --- a/docs/components/button/demo/disabled.tsx +++ b/docs/components/button/demo/disabled.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; import { Button } from 'weui-react-v2'; -import './btn-demo.less'; +import './btn-demo.css'; export default () => { return ( diff --git a/docs/components/button/demo/type.tsx b/docs/components/button/demo/type.tsx index 848bae3..31c632d 100644 --- a/docs/components/button/demo/type.tsx +++ b/docs/components/button/demo/type.tsx @@ -4,7 +4,7 @@ */ import React, { useState } from 'react'; import { Button } from 'weui-react-v2'; -import './btn-demo.less'; +import './btn-demo.css'; export default () => { const [loading, setLoading] = useState(false); diff --git a/docs/components/dialog/demo/input.tsx b/docs/components/dialog/demo/input.tsx index 9f3bd03..e4076f3 100644 --- a/docs/components/dialog/demo/input.tsx +++ b/docs/components/dialog/demo/input.tsx @@ -4,7 +4,7 @@ */ import React, { useState } from 'react'; import { Button, Dialog, WhiteSpace } from 'weui-react-v2'; -import './index.less'; +import './index.css'; export default function () { const [visible, setVisible] = useState(true); diff --git a/docs/components/flex/demo/flex.tsx b/docs/components/flex/demo/flex.tsx index 4b68a80..8f7d728 100644 --- a/docs/components/flex/demo/flex.tsx +++ b/docs/components/flex/demo/flex.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; import { Flex, FlexItem } from 'weui-react-v2'; -import './flex-demo.less'; +import './flex-demo.css'; export default () => { return ( diff --git a/docs/components/form/demo/index.tsx b/docs/components/form/demo/index.tsx index 207f0e8..ecea094 100644 --- a/docs/components/form/demo/index.tsx +++ b/docs/components/form/demo/index.tsx @@ -22,7 +22,7 @@ import { ValidateConfig, } from 'weui-react-v2'; import { singlePickerData } from '../../picker/demo/picker-data'; -import './index.less'; +import './index.css'; interface Model { phone: string; diff --git a/docs/components/half-screen-dialog/demo/confirm.tsx b/docs/components/half-screen-dialog/demo/confirm.tsx index dc9f51f..e4bd2ac 100644 --- a/docs/components/half-screen-dialog/demo/confirm.tsx +++ b/docs/components/half-screen-dialog/demo/confirm.tsx @@ -4,7 +4,7 @@ */ import React, { useState } from 'react'; import { HalfScreenDialog, HalfScreenDialogPop, Button, WhiteSpace } from 'weui-react-v2'; -import './demo.less'; +import './demo.css'; export default () => { const [visible, setVisible] = useState(true); diff --git a/docs/components/pull-refresh/demo/index.tsx b/docs/components/pull-refresh/demo/index.tsx index 4a4c3bb..ecf4da8 100644 --- a/docs/components/pull-refresh/demo/index.tsx +++ b/docs/components/pull-refresh/demo/index.tsx @@ -4,7 +4,7 @@ */ import React, { useState } from 'react'; import { Loadmore, PullRefresh, PullRefreshAction, SafeArea, Skeleton } from 'weui-react-v2'; -import './index.less'; +import './index.css'; const MAX = 20; diff --git a/docs/components/spin/demo/inline.tsx b/docs/components/spin/demo/inline.tsx index c597e1a..0b7a529 100644 --- a/docs/components/spin/demo/inline.tsx +++ b/docs/components/spin/demo/inline.tsx @@ -4,7 +4,7 @@ */ import React, { useState } from 'react'; import { Spin, Button } from 'weui-react-v2'; -import './index.less'; +import './index.css'; export default () => { const [inline, setInline] = useState(false); diff --git a/docs/components/swipe-action/demo/index.tsx b/docs/components/swipe-action/demo/index.tsx index 7d13c91..672f941 100644 --- a/docs/components/swipe-action/demo/index.tsx +++ b/docs/components/swipe-action/demo/index.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; import { List, ListItem, SwipeAction } from 'weui-react-v2'; -import './index.less'; +import './index.css'; export default () => { return ( diff --git a/docs/components/tabs/demo/vertical.tsx b/docs/components/tabs/demo/vertical.tsx index 8b33df2..1456a12 100644 --- a/docs/components/tabs/demo/vertical.tsx +++ b/docs/components/tabs/demo/vertical.tsx @@ -6,7 +6,7 @@ import classNames from 'classnames'; import React from 'react'; import { Tabs, TabPanel, SwipeableTabContent, ScrollableTabBar } from 'weui-react-v2'; import data from './data.json'; -import './index.less'; +import './index.css'; let allFoods: IDishInfo[] = data.reduce((pre: any, cur: any) => { return pre.concat(cur.foods); diff --git a/docs/components/toast/demo/index.tsx b/docs/components/toast/demo/index.tsx index 42c59fa..b424d74 100644 --- a/docs/components/toast/demo/index.tsx +++ b/docs/components/toast/demo/index.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; import { Button, Toast } from 'weui-react-v2'; -import './demo.less'; +import './demo.css'; export default () => { return ( diff --git a/src/ActionSheet/style/index.css b/src/ActionSheet/style/index.css new file mode 100644 index 0000000..5347061 --- /dev/null +++ b/src/ActionSheet/style/index.css @@ -0,0 +1,99 @@ +.weui-actionsheet { + z-index: 100; + position: fixed; + left: 2%; + height: 100vh; + width: 96%; + border-radius: 24px 24px 0px; + background: #fff; + touch-action: none; + z-index: 1000; + overflow: hidden; +} +.weui-actionsheet-wrapper.with-root-mask { + background: rgba(0, 0, 0, 0.1); +} +.weui-actionsheet-mask { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.4); + user-select: none; + -webkit-overflow-scrolling: touch; + overflow: hidden; +} +.weui-actionsheet-inner { + background-color: #eae7e8; +} +.weui-actionsheet-title { + position: relative; + height: 112px; + padding: 0 48px; + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + font-size: 28px; + color: rgba(0, 0, 0, 0.5); + line-height: 1.4; + background: #ffffff; + user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; +} +.weui-actionsheet-title:before { + content: ' '; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 2px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + transform-origin: 0 100%; + transform: scaleY(0.5); +} +.weui-actionsheet-menu { + color: rgba(0, 0, 0, 0.9); + background-color: #ffffff; +} +.weui-actionsheet-loading-icon { + display: inline-block; + margin-right: 10px; + color: #999; + font-size: 0.8em; +} +.weui-actionsheet-cell { + position: relative; + padding: 32px; + text-align: center; + font-size: 34px; + line-height: 1.41176471; + user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; +} +.weui-actionsheet-cell:active { + background-color: #ececec; +} +.weui-actionsheet-cell:before { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 2px; + border-top: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + transform-origin: 0 0; + transform: scaleY(0.5); +} +.weui-actionsheet-action { + margin-top: 16px; + background-color: #ffffff; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); +} diff --git a/src/ActionSheet/style/index.ts b/src/ActionSheet/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/ActionSheet/style/index.ts +++ b/src/ActionSheet/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/AmountKeyBoard/style/index.css b/src/AmountKeyBoard/style/index.css new file mode 100644 index 0000000..41b648b --- /dev/null +++ b/src/AmountKeyBoard/style/index.css @@ -0,0 +1,102 @@ +.weui-keyboard { + background-color: #ededed; +} +.weui-keyboard-wrapper { + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 4000; + padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); + user-select: none; + -webkit-user-select: none; + background-color: #ededed; +} +.weui-keyboard-inner { + height: 480px; + position: relative; + background-color: #fff; +} +.weui-keyboard-key { + position: absolute; + font-size: 48px; + font-family: sans-serif; + color: #000; + display: block; + width: 25%; + border: 2px solid #dedfe2; + margin: -2px; + background-color: #fafafb; + font-family: 'PingFang SC', 'Microsoft yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; + height: 120px; + line-height: 120px; + box-sizing: content-box; + user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + transition: 0.3s; + overflow: hidden; + text-align: center; +} +.weui-keyboard-key.down { + background: #eaeaea; +} +.weui-keyboard-key.confirm-btn { + height: 360px; +} +.weui-keyboard .left-0 { + left: 0; +} +.weui-keyboard .left-1 { + left: 25%; +} +.weui-keyboard .left-2 { + left: 50%; +} +.weui-keyboard .left-3 { + left: 75%; +} +.weui-keyboard .top-0 { + top: 0; +} +.weui-keyboard .top-1 { + top: 120px; +} +.weui-keyboard .top-2 { + top: 240px; +} +.weui-keyboard .top-3 { + top: 360px; +} +.weui-keyboard [data-code='backspace'] img { + width: 66px; + border: 0; + box-sizing: border-box; +} +.weui-keyboard-key:active .submit-btn { + background-color: #048140; +} +.weui-keyboard .submit-btn { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + height: 100%; + color: #fff; + background-color: #06ad56; + letter-spacing: 2px; + transition: 0.3s; + line-height: 1.5; +} +.weui-keyboard .submit-btn.disabled { + cursor: not-allowed; + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; +} +.weui-keyboard .submit-btn.loading { + display: block; + width: 100%; + height: 100%; +} diff --git a/src/AmountKeyBoard/style/index.ts b/src/AmountKeyBoard/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/AmountKeyBoard/style/index.ts +++ b/src/AmountKeyBoard/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Button/style/index.css b/src/Button/style/index.css new file mode 100644 index 0000000..8183ccb --- /dev/null +++ b/src/Button/style/index.css @@ -0,0 +1,400 @@ +.weui-btn { + font-feature-settings: 'liga', 'kern'; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + display: inline-block; + box-sizing: border-box; + padding: 12px 40px; + font-size: 28px; + font-weight: 500; + text-align: center; + border-radius: 8px; + overflow: hidden; + user-select: none; + -webkit-user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + border: none; + outline: none; + cursor: pointer; +} +.weui-btn > span { + display: inline-block; +} +.weui-btn-block { + padding: 17px 0; + padding-right: 0; + width: 100%; + display: block; +} +.weui-btn-block + .weui-btn-block { + margin-top: 25px; +} +.weui-btn-default { + color: #000; + background: rgba(239, 239, 239); + border-color: rgba(239, 239, 239); +} +.weui-btn-default > a:only-child { + color: currentColor; +} +.weui-btn-default > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-default:active { + background-color: rgb(220 220 220); +} +.weui-btn-default[disabled], +.weui-btn-default[disabled]:hover, +.weui-btn-default[disabled]:focus, +.weui-btn-default[disabled]:active { + color: rgba(0, 0, 0, 0.25); + background: #f5f5f5; + border-color: #d9d9d9; + text-shadow: none; + box-shadow: none; +} +.weui-btn-default[disabled] > a:only-child, +.weui-btn-default[disabled]:hover > a:only-child, +.weui-btn-default[disabled]:focus > a:only-child, +.weui-btn-default[disabled]:active > a:only-child { + color: currentColor; +} +.weui-btn-default[disabled] > a:only-child::after, +.weui-btn-default[disabled]:hover > a:only-child::after, +.weui-btn-default[disabled]:focus > a:only-child::after, +.weui-btn-default[disabled]:active > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-primary { + color: #fff; + background: #06b258; + border-color: #06b258; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); +} +.weui-btn-primary > a:only-child { + color: currentColor; +} +.weui-btn-primary > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-primary:active { + background-color: #048140; +} +.weui-btn-primary[disabled], +.weui-btn-primary[disabled]:hover, +.weui-btn-primary[disabled]:focus, +.weui-btn-primary[disabled]:active { + color: rgba(0, 0, 0, 0.25); + background: #f5f5f5; + border-color: #d9d9d9; + text-shadow: none; + box-shadow: none; +} +.weui-btn-primary[disabled] > a:only-child, +.weui-btn-primary[disabled]:hover > a:only-child, +.weui-btn-primary[disabled]:focus > a:only-child, +.weui-btn-primary[disabled]:active > a:only-child { + color: currentColor; +} +.weui-btn-primary[disabled] > a:only-child::after, +.weui-btn-primary[disabled]:hover > a:only-child::after, +.weui-btn-primary[disabled]:focus > a:only-child::after, +.weui-btn-primary[disabled]:active > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-dashed { + color: #1d1d1d; + background: transparent; + border-color: #d9d9d9; + border-style: dashed; + border-width: 1px; + padding: calc(12px - 2px) 40px; +} +.weui-btn-dashed > a:only-child { + color: currentColor; +} +.weui-btn-dashed > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-dashed:active { + border-color: #06b258; + color: #06b258; +} +.weui-btn-dashed[disabled], +.weui-btn-dashed[disabled]:hover, +.weui-btn-dashed[disabled]:focus, +.weui-btn-dashed[disabled]:active { + color: rgba(0, 0, 0, 0.25); + background: #f5f5f5; + border-color: #d9d9d9; + text-shadow: none; + box-shadow: none; +} +.weui-btn-dashed[disabled] > a:only-child, +.weui-btn-dashed[disabled]:hover > a:only-child, +.weui-btn-dashed[disabled]:focus > a:only-child, +.weui-btn-dashed[disabled]:active > a:only-child { + color: currentColor; +} +.weui-btn-dashed[disabled] > a:only-child::after, +.weui-btn-dashed[disabled]:hover > a:only-child::after, +.weui-btn-dashed[disabled]:focus > a:only-child::after, +.weui-btn-dashed[disabled]:active > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-text { + color: #1d1d1d; + background: transparent; + border-color: transparent; +} +.weui-btn-text > a:only-child { + color: currentColor; +} +.weui-btn-text > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-text:active { + color: #1d1d1d; + background: rgba(0, 0, 0, 0.028); + border-color: transparent; +} +.weui-btn-text[disabled], +.weui-btn-text[disabled]:hover, +.weui-btn-text[disabled]:focus, +.weui-btn-text[disabled]:active { + color: rgba(0, 0, 0, 0.25); + background: transparent; + border-color: transparent; + text-shadow: none; + box-shadow: none; +} +.weui-btn-text[disabled] > a:only-child, +.weui-btn-text[disabled]:hover > a:only-child, +.weui-btn-text[disabled]:focus > a:only-child, +.weui-btn-text[disabled]:active > a:only-child { + color: currentColor; +} +.weui-btn-text[disabled] > a:only-child::after, +.weui-btn-text[disabled]:hover > a:only-child::after, +.weui-btn-text[disabled]:focus > a:only-child::after, +.weui-btn-text[disabled]:active > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-link { + color: #06b258; + background: transparent; + border-color: transparent; +} +.weui-btn-link > a:only-child { + color: currentColor; +} +.weui-btn-link > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-link:active { + color: #048140; +} +.weui-btn-link[disabled], +.weui-btn-link[disabled]:hover, +.weui-btn-link[disabled]:focus, +.weui-btn-link[disabled]:active { + color: rgba(0, 0, 0, 0.25); + background: transparent; + border-color: transparent; + text-shadow: none; + box-shadow: none; +} +.weui-btn-link[disabled] > a:only-child, +.weui-btn-link[disabled]:hover > a:only-child, +.weui-btn-link[disabled]:focus > a:only-child, +.weui-btn-link[disabled]:active > a:only-child { + color: currentColor; +} +.weui-btn-link[disabled] > a:only-child::after, +.weui-btn-link[disabled]:hover > a:only-child::after, +.weui-btn-link[disabled]:focus > a:only-child::after, +.weui-btn-link[disabled]:active > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-dangerous { + color: #ff4d4f; + background: rgba(239, 239, 239); + border-color: #ff4d4f; +} +.weui-btn-dangerous > a:only-child { + color: currentColor; +} +.weui-btn-dangerous > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-dangerous:active { + color: #e60003; + background: rgba(239, 239, 239); + border-color: #e60003; +} +.weui-btn-dangerous:active > a:only-child { + color: currentColor; +} +.weui-btn-dangerous:active > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-dangerous[disabled], +.weui-btn-dangerous[disabled]:hover, +.weui-btn-dangerous[disabled]:focus, +.weui-btn-dangerous[disabled]:active { + color: rgba(0, 0, 0, 0.25); + background: #f5f5f5; + border-color: #d9d9d9; + text-shadow: none; + box-shadow: none; +} +.weui-btn-dangerous[disabled] > a:only-child, +.weui-btn-dangerous[disabled]:hover > a:only-child, +.weui-btn-dangerous[disabled]:focus > a:only-child, +.weui-btn-dangerous[disabled]:active > a:only-child { + color: currentColor; +} +.weui-btn-dangerous[disabled] > a:only-child::after, +.weui-btn-dangerous[disabled]:hover > a:only-child::after, +.weui-btn-dangerous[disabled]:focus > a:only-child::after, +.weui-btn-dangerous[disabled]:active > a:only-child::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: transparent; + content: ''; +} +.weui-btn-dangerous.weui-btn-link, +.weui-btn-dangerous.weui-btn-text { + background-color: transparent; +} +.weui-btn-dangerous.weui-btn-link:active, +.weui-btn-dangerous.weui-btn-text:active, +.weui-btn-dangerous.weui-btn-link:hover, +.weui-btn-dangerous.weui-btn-text:hover { + background-color: transparent; +} +.weui-btn-size-large { + padding: 16px 48px; + font-weight: 700; + font-size: 32px; +} +.weui-btn-size-default { + padding: 12px 40px; + font-size: 28px; + font-weight: 500; +} +.weui-btn-size-small { + padding: 12px 32px; + font-weight: 500; + font-size: 24px; +} +.weui-btn::before { + position: absolute; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + z-index: 1; + display: none; + background: #fff; + border-radius: inherit; + opacity: 0.35; + transition: opacity 0.2s; + content: ''; + pointer-events: none; +} +.weui-btn-loading { + position: relative; +} +.weui-btn-loading:not([disabled]) { + pointer-events: none; +} +.weui-btn-loading::before { + display: block; +} +.weui-btn-loading .weui-btn-loading-icon { + margin-right: 16px; +} +.weui-btn > .weui-btn-loading-icon { + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); +} +.weui-btn > .weui-btn-loading-icon:only-child .anticon { + padding-right: 0; +} diff --git a/src/Button/style/index.ts b/src/Button/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Button/style/index.ts +++ b/src/Button/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Button/style/mixin.css b/src/Button/style/mixin.css new file mode 100644 index 0000000..e69de29 diff --git a/src/Checkbox/style/index.css b/src/Checkbox/style/index.css new file mode 100644 index 0000000..c31652b --- /dev/null +++ b/src/Checkbox/style/index.css @@ -0,0 +1,70 @@ +.weui-checkbox { + user-select: none; + cursor: pointer; + font-size: 28px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +.weui-checkbox-label { + cursor: pointer; + margin-left: 6px; +} +.weui-checkbox-box { + position: relative; + display: inline-block; + line-height: unset; + white-space: nowrap; + vertical-align: middle; + outline: none; + top: -0.09em; + user-select: none; + cursor: pointer; +} +.weui-checkbox .checkbox-icon { + display: inline-block; + vertical-align: middle; + width: 48px; + height: 48px; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask-size: 100%; + background-color: currentColor; +} +.weui-checkbox-input { + position: absolute; + left: 0; + z-index: 9999; + opacity: 0; + top: 0; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + cursor: pointer; +} +.weui-checkbox .weui-icon-checked { + color: rgba(0, 0, 0, 0.3); + -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E); + mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E); +} +.weui-checkbox-checked .weui-icon-checked { + color: #06ad56; + -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E); + mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E); +} +.weui-checkbox-disabled { + color: rgba(0, 0, 0, 0.5); +} +.weui-checkbox-disabled .weui-icon-checked { + color: #d9d9d9; +} +.weui-checkbox-size-small .checkbox-icon { + width: 36px; + height: 36px; +} +.weui-checkbox-size-large .checkbox-icon { + width: 54px; + height: 54px; +} diff --git a/src/Checkbox/style/index.ts b/src/Checkbox/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Checkbox/style/index.ts +++ b/src/Checkbox/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/DatePicker/style/index.css b/src/DatePicker/style/index.css new file mode 100644 index 0000000..64fb23a --- /dev/null +++ b/src/DatePicker/style/index.css @@ -0,0 +1,3 @@ +.datepicker-content.mode-datetime .weui-half-screen-dialog-bd { + padding: 0; +} diff --git a/src/DatePicker/style/index.ts b/src/DatePicker/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/DatePicker/style/index.ts +++ b/src/DatePicker/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Dialog/style/index.css b/src/Dialog/style/index.css new file mode 100644 index 0000000..dc48002 --- /dev/null +++ b/src/Dialog/style/index.css @@ -0,0 +1,96 @@ +.weui-dialog { + overflow: hidden; + display: flex; + flex-direction: column; +} +.weui-dialog-popup { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 3000; +} +.weui-dialog-wrapper { + top: -5%; + transform: translate(0, -50%); + background-color: #ffffff; + border-radius: 24px; + display: flex; + flex-direction: column; + max-height: 90%; + max-width: 90%; + text-align: center; + overflow: hidden; +} +.weui-dialog-hd { + padding: 34px 48px 10px 32px; +} +.weui-dialog-title { + font-weight: 700; + font-size: 34px; + line-height: 1.4; +} +.weui-dialog-bd { + flex: 1; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + padding: 10px 48px 48px; + font-size: 34px; + line-height: 1.4; + word-wrap: break-word; + -webkit-hyphens: auto; + hyphens: auto; + color: rgba(0, 0, 0, 0.5); + min-width: 540px; +} +.weui-dialog-ft { + position: relative; + line-height: 90px; + min-height: 90px; + font-size: 34px; + display: flex; +} +.weui-dialog-ft:after { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 2px; + border-top: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + transform-origin: 0 0; + transform: scaleY(0.5); +} +.weui-dialog-ft .weui-btn { + display: block; + flex: 1; + background: #fff; + font-weight: 700; + text-decoration: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + position: relative; +} +.weui-dialog-ft .weui-btn:active { + background-color: #ececec; +} +.weui-dialog-ft .weui-btn:after { + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 2px; + bottom: 0; + border-left: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + transform-origin: 0 0; + transform: scaleX(0.5); +} +.weui-dialog-ft .weui-btn.weui-btn-primary { + color: #047c3d; +} diff --git a/src/Dialog/style/index.ts b/src/Dialog/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Dialog/style/index.ts +++ b/src/Dialog/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Flex/style/index.css b/src/Flex/style/index.css new file mode 100644 index 0000000..e81fc50 --- /dev/null +++ b/src/Flex/style/index.css @@ -0,0 +1,3 @@ +.ant-col.average { + flex: 1; +} diff --git a/src/Flex/style/index.ts b/src/Flex/style/index.ts index ab6776d..d967622 100644 --- a/src/Flex/style/index.ts +++ b/src/Flex/style/index.ts @@ -1,2 +1,2 @@ import 'xy-grid/assets/index.css'; -import './index.less'; +import './index.css'; diff --git a/src/Footer/style/index.css b/src/Footer/style/index.css new file mode 100644 index 0000000..cdc24e5 --- /dev/null +++ b/src/Footer/style/index.css @@ -0,0 +1,42 @@ +.weui-footer { + color: rgba(0, 0, 0, 0.3); + font-size: 28px; + line-height: 1.4; + text-align: center; +} +.weui-footer a { + color: #576b95; +} +.weui-footer__links { + font-size: 0; +} +.weui-footer__links a { + display: inline-block; + vertical-align: top; + margin: 0 16px; + position: relative; + font-size: 28px; + color: #576b95; +} +.weui-footer__links a:not(:first-child):before { + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 2px; + bottom: 0; + border-left: 2px solid #c7c7c7; + color: #c7c7c7; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleX(0.5); + transform: scaleX(0.5); + left: -16px; + top: 0.36em; + bottom: 0.36em; +} +.weui-footer__text { + padding: 0 34px; + font-size: 28px; + line-height: 46px; +} diff --git a/src/Footer/style/index.ts b/src/Footer/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Footer/style/index.ts +++ b/src/Footer/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Form/style/index.css b/src/Form/style/index.css new file mode 100644 index 0000000..84e4f97 --- /dev/null +++ b/src/Form/style/index.css @@ -0,0 +1,122 @@ +.weui-form-item-label { + display: block; + font-size: 32px; + word-wrap: break-word; + word-break: break-all; +} +.weui-form .weui-item { + padding: 20px 40px; + color: rgba(0, 0, 0, 0.9); +} +.weui-form .weui-item:before { + left: 40px; + right: 40px; +} +.weui-form .weui-form-item-error .weui-form-item-label { + color: #ff4d4f; +} +.weui-form .weui-form-item-error .weui-item-bd > *, +.weui-form .weui-form-item-error .weui-item-bd > select { + color: #ff4d4f; +} +.weui-form-item.weui-form-item-pos-top .weui-item-inner { + flex-wrap: wrap; +} +.weui-form-item.weui-form-item-pos-top .weui-item-hd { + width: 100%; + padding-bottom: 15px; + margin-bottom: 15px; + position: relative; +} +.weui-form-item.weui-form-item-pos-top .weui-item-hd:after { + content: ' '; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 2px; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + z-index: 2; +} +.weui-form .weui-list:before { + display: none; +} +.weui-form .weui-list:before, +.weui-form .weui-list:after { + left: 40px; + right: 40px; +} +.weui-form .weui-item-bd > .weui-checkbox { + display: flex; + align-items: center; + margin: -40px; + padding: 40px; +} +.weui-form .weui-item-bd > .weui-checkbox .weui-checkbox-box { + top: 0; +} +.weui-form .weui-item-bd > .weui-checkbox .weui-checkbox-label { + flex: 1; +} +.weui-form .weui-item-bd { + font-size: 32px; +} +.weui-form .weui-picker-item .weui-item-bd { + font-size: 34px; +} +.weui-form .virtual-select .weui-item-hd select, +.weui-form .weui-item-bd > select { + -webkit-appearance: none; + border: 0; + outline: 0; + background-color: transparent; + width: 100%; + font-size: 32px; + height: 56px; + line-height: 56px; + position: relative; + z-index: 1; + color: rgba(0, 0, 0, 0.9); +} +.weui-form .virtual-select .weui-item-hd { + position: relative; +} +.weui-form .virtual-select .weui-form-item-label:before { + content: ' '; + width: 24px; + height: 48px; + -webkit-mask-position: 0 0; + mask-position: 0 0; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask-size: 100%; + background-color: currentColor; + color: rgba(0, 0, 0, 0.3); + -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); + mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); + position: absolute; + top: 50%; + right: 15px; + margin-top: -24px; +} +.weui-form .virtual-select .weui-form-item-label:after { + content: ' '; + position: absolute; + right: 0; + top: 0; + width: 2px; + bottom: 0; + border-right: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 100% 0; + transform-origin: 100% 0; + -webkit-transform: scaleX(0.5); + transform: scaleX(0.5); + margin: -20px 0; +} diff --git a/src/Form/style/index.ts b/src/Form/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Form/style/index.ts +++ b/src/Form/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Grid/style/index.css b/src/Grid/style/index.css new file mode 100644 index 0000000..8be7342 --- /dev/null +++ b/src/Grid/style/index.css @@ -0,0 +1,107 @@ +.weui-grids { + position: relative; + overflow: hidden; + display: flex; + flex-wrap: wrap; + user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + background-color: #fff; +} +.weui-grids:before { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 2px; + border-top: 2px solid #d9d9d9; + color: #d9d9d9; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +.weui-grids:after { + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 2px; + bottom: 0; + border-left: 2px solid #d9d9d9; + color: #d9d9d9; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleX(0.5); + transform: scaleX(0.5); +} +.weui-grid { + position: relative; + float: left; + padding: 20px 20px; + width: 33.33333333%; + box-sizing: border-box; + flex-basis: 33.333%; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + cursor: pointer; +} +.weui-grid:before { + content: ' '; + position: absolute; + right: 0; + top: 0; + width: 2px; + bottom: 0; + border-right: 2px solid #d9d9d9; + color: #d9d9d9; + -webkit-transform-origin: 100% 0; + transform-origin: 100% 0; + -webkit-transform: scaleX(0.5); + transform: scaleX(0.5); +} +.weui-grid:after { + content: ' '; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 2px; + border-bottom: 2px solid #d9d9d9; + color: #d9d9d9; + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +.weui-grid:active { + background-color: #ececec; +} +.weui-grid-icon { + width: 56px; + height: 56px; + font-size: 56px; + margin: 0 auto; +} +.weui-grid-icon > img { + display: block; + width: 100%; + height: 100%; +} +.weui-grid-label { + display: block; + text-align: center; + color: rgba(0, 0, 0, 0.9); + font-size: 28px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; +} +.weui-grid-icon + .weui-grid-label { + margin-top: 15px; + margin-bottom: 8px; +} diff --git a/src/Grid/style/index.ts b/src/Grid/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Grid/style/index.ts +++ b/src/Grid/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/HalfScreenDialog/style/index.css b/src/HalfScreenDialog/style/index.css new file mode 100644 index 0000000..4240345 --- /dev/null +++ b/src/HalfScreenDialog/style/index.css @@ -0,0 +1,72 @@ +.weui-half-screen-dialog-wrapper { + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + line-height: 1.4; + background-color: #ffffff; + border-top-left-radius: 24px; + border-top-right-radius: 24px; + overflow: hidden; + padding-bottom: env(safe-area-inset-bottom); + user-select: none; + -webkit-user-select: none; +} +.weui-half-screen-dialog-bd { + padding: 0 48px; + word-wrap: break-word; + -webkit-hyphens: auto; + hyphens: auto; + overflow-y: auto; + max-height: 72vh; +} +.weui-half-screen-dialog-hd { + font-size: 16px; + display: flex; + align-items: center; + padding: 40px 48px; +} +.weui-half-screen-dialog-hd_side { + position: relative; + left: -16px; + font-size: 32px; +} +.weui-half-screen-dialog-hd_main { + text-align: center; + padding: 0 80px; + flex: 1; +} +.weui-half-screen-dialog-hd_main + .weui-half-screen-dialog-hd_side .side-btn { + right: 0; +} +.weui-half-screen-dialog-hd_title { + display: block; + color: rgba(0, 0, 0, 0.9); + font-weight: 700; + font-size: 30px; +} +.weui-half-screen-dialog-hd_subtitle { + display: block; + color: rgba(0, 0, 0, 0.5); + font-size: 22px; + margin: 0; +} +.weui-half-screen-dialog-hd .side-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); +} +.weui-half-screen-dialog-ft { + padding: 64px 96px; + text-align: center; + display: flex; +} +.weui-half-screen-dialog-ft .weui-btn:nth-last-child(n + 2), +.weui-half-screen-dialog-ft .weui-btn:nth-last-child(n + 2) ~ .weui-btn { + display: inline-block; + vertical-align: top; + margin: 0 16px; + width: 240px; + font-size: 32px; +} diff --git a/src/HalfScreenDialog/style/index.ts b/src/HalfScreenDialog/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/HalfScreenDialog/style/index.ts +++ b/src/HalfScreenDialog/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/ImageView/style/index.css b/src/ImageView/style/index.css new file mode 100644 index 0000000..4cdac25 --- /dev/null +++ b/src/ImageView/style/index.css @@ -0,0 +1,180 @@ +.weui-gallery { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; +} +.weui-gallery-popup .weui-popup-mask { + background: #000; +} +.weui-gallery-wrapper { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; +} +.weui-gallery > .weui-gallery-container { + touch-action: none; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; +} +.weui-gallery-container .weui-swiper-carousel { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + touch-action: none; +} +.weui-gallery-container .weui-swiper-item { + width: 100%; + height: 100%; +} +.weui-gallery-ui { + -webkit-font-smoothing: auto; + visibility: visible; + opacity: 1; + z-index: 1550; +} +.weui-gallery-topbar { + position: absolute; + left: 0; + top: 0; + height: 88px; + width: 100%; + transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); + background-color: rgba(0, 0, 0, 0.3); +} +.weui-gallery-counter { + position: absolute; + left: 0; + top: 0; + height: 88px; + font-size: 26px; + line-height: 88px; + color: #fff; + opacity: 0.75; + padding: 0 20px; + user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; +} +.weui-gallery-skin-btn { + font-size: 42px; + width: 88px; + height: 88px; + position: relative; + background: none; + cursor: pointer; + overflow: visible; + -webkit-appearance: none; + display: block; + border: 0; + padding: 0; + margin: 0; + float: right; + opacity: 0.75; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; + -webkit-box-shadow: none; + box-shadow: none; + color: #fff; + background: url(./default-skin.png) 0 0 no-repeat; + background-size: 528px 176px; +} +.weui-gallery-skin-btn:focus { + border: none; + outline: none; +} +.weui-gallery .btn-close { + background-position: 0 -88px; +} +.weui-gallery .btn-share { + background-position: -88px -88px; +} +.weui-gallery .btn-zoom { + background-position: -176px 0; +} +.weui-gallery .btn-arrow-left { + top: 50%; + height: 60px; + width: 64px; + position: absolute; + left: 0; + background-color: rgba(0, 0, 0, 0.3); + background-size: 528px 176px; + background-position: -276px -88px; +} +.weui-gallery .btn-arrow-right { + top: 50%; + height: 60px; + width: 64px; + position: absolute; + right: 0; + background-color: rgba(0, 0, 0, 0.3); + background-size: 528px 176px; + background-position: -188px -88px; +} +.weui-gallery-caption { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + min-height: 44px; + transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); + background-color: rgba(0, 0, 0, 0.3); + box-sizing: border-box; +} +.weui-gallery-caption-inner { + text-align: left; + margin: 0 auto; + font-size: 26px; + padding: 20px; + line-height: 40px; + color: #ccc; +} +.weui-gallery-caption-inner small { + font-size: 22px; + color: #bbb; +} +.weui-gallery-bottom { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + min-height: 44px; + transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); + background: #0d0d0d; + box-sizing: border-box; + z-index: 10; + color: #fff; + font-size: 28px; + padding-bottom: env(safe-area-inset-bottom); +} +.weui-image-view { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + touch-action: none; + background-size: cover; + background-repeat: no-repeat; + background-position: center center; +} +.weui-image-view img { + width: 100%; + user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; +} diff --git a/src/ImageView/style/index.ts b/src/ImageView/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/ImageView/style/index.ts +++ b/src/ImageView/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Input/style/index.css b/src/Input/style/index.css new file mode 100644 index 0000000..6438f89 --- /dev/null +++ b/src/Input/style/index.css @@ -0,0 +1,97 @@ +.weui-input { + display: flex; + align-items: center; + width: 100%; + overflow: hidden; + box-sizing: border-box; + margin: 0; + padding: 0; + color: rgba(0, 0, 0, 0.65); + font-size: 32px; + font-variant: tabular-nums; + line-height: 1.5; + list-style: none; + font-feature-settings: 'tnum'; + position: relative; +} +.weui-input-prefix { + flex-shrink: 0; + margin-right: 10px; + box-sizing: border-box; +} +.weui-input-suffix { + flex-shrink: 0; + margin-left: 10px; + text-align: right; + box-sizing: border-box; +} +.weui-input-outter { + overflow: hidden; + width: 100%; +} +.weui-input-inner { + width: 100%; + flex: 1; + position: relative; + text-align: inherit; + min-height: 100%; + margin: 0; + padding: 0; + border: 0; + outline: 0; + height: 56px; + line-height: 1.5; + -webkit-appearance: none; + background-color: transparent; + font-size: 32px; + box-sizing: border-box; + color: inherit; +} +.weui-input-clear { + visibility: hidden; + flex-shrink: 0; + display: inline-block; + vertical-align: middle; + box-sizing: border-box; + width: 36px; + height: 36px; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask-size: 100%; + background-color: currentColor; + -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.06%2012l3.006-3.005-1.06-1.06L12%2010.938%208.995%207.934l-1.06%201.06L10.938%2012l-3.005%203.005%201.06%201.06L12%2013.062l3.005%203.005%201.06-1.06L13.062%2012zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%2F%3E%3C%2Fsvg%3E); + mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.06%2012l3.006-3.005-1.06-1.06L12%2010.938%208.995%207.934l-1.06%201.06L10.938%2012l-3.005%203.005%201.06%201.06L12%2013.062l3.005%203.005%201.06-1.06L13.062%2012zM12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010z%22%2F%3E%3C%2Fsvg%3E); + background: rgba(0, 0, 0, 0.3); + border: 0; + padding: 0; + outline: 0; +} +.weui-input-clear.visible { + visibility: visible; +} +.weui-input-disabled .weui-input-inner { + color: rgba(0, 0, 0, 0.3); +} +/** rest**/ +textarea::-moz-placeholder, +input::-moz-placeholder { + color: rgba(0, 0, 0, 0.3); + opacity: 1; +} +textarea:-ms-input-placeholder, +input:-ms-input-placeholder { + color: rgba(0, 0, 0, 0.3); +} +textarea::-webkit-input-placeholder, +input::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.3); +} +input[type='text'], +input[type='password'], +input[type='number'], +textarea { + -webkit-appearance: none; +} diff --git a/src/Input/style/index.ts b/src/Input/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Input/style/index.ts +++ b/src/Input/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/List/style/index.css b/src/List/style/index.css new file mode 100644 index 0000000..bbb0770 --- /dev/null +++ b/src/List/style/index.css @@ -0,0 +1,154 @@ +.weui-item { + padding: 32px; + position: relative; + user-select: none; + -webkit-user-select: none; + font-size: 26px; + background-color: #fff; + box-sizing: border-box; + display: flex; + align-items: center; +} +.weui-item-inner { + display: flex; + width: 100%; + align-items: center; +} +.weui-item:not(:first-child):before { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 2px; + border-top: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + left: 32px; + z-index: 2; +} +.weui-item-access { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + color: inherit; + transition: 0.24s; +} +.weui-item-access:active { + background-color: #ececec; +} +.weui-item[class*='weui-item-arrow'] .weui-item-ft { + padding-right: 44px; + position: relative; +} +.weui-item[class*='weui-item-arrow'] .weui-item-ft:after { + content: ' '; + width: 24px; + height: 48px; + -webkit-mask-position: 0 0; + mask-position: 0 0; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask-size: 100%; + background-color: currentColor; + color: rgba(0, 0, 0, 0.3); + -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); + mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); + position: absolute; + top: 50%; + right: 0; + margin-top: -24px; +} +.weui-item-arrow-down.weui-item-access .weui-item-ft:after { + transform: rotate(90deg); +} +.weui-item-arrow-up.weui-item-access .weui-item-ft:after { + transform: rotate(-90deg); +} +.weui-item-hd, +.weui-item-thumb { + flex-shrink: 0; + margin-right: 15px; + user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; +} +.weui-item-hd { + font-size: 28px; +} +.weui-item-bd { + font-size: 28px; + flex: 1; + overflow: hidden; +} +.weui-item-ft { + flex-shrink: 0; + text-align: right; + font-size: 26px; + color: rgba(0, 0, 0, 0.5); +} +.weui-item-align-right .weui-item-bd { + text-align: right; +} +.weui-item-align-center .weui-item-bd { + text-align: center; +} +.weui-list { + margin-top: 16px; + background-color: #ffffff; + line-height: 1.41176471; + overflow: hidden; + position: relative; + outline: none; + user-select: none; + -webkit-user-select: none; +} +.weui-list.title .weui-list-inner { + margin-top: 16px; +} +.weui-list:before { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 2px; + border-top: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + z-index: 2; +} +.weui-list:after { + content: ' '; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 2px; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + z-index: 2; +} +.weui-list-title { + margin-top: 32px; + margin-bottom: 6px; + padding-left: 32px; + padding-right: 32px; + color: rgba(0, 0, 0, 0.5); + font-size: 26px; + line-height: 1.4; + user-select: none; + -webkit-user-select: none; +} +.weui-list:last-child:after { + display: none; +} diff --git a/src/List/style/index.ts b/src/List/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/List/style/index.ts +++ b/src/List/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Loading/style/index.css b/src/Loading/style/index.css new file mode 100644 index 0000000..b9ee9bf --- /dev/null +++ b/src/Loading/style/index.css @@ -0,0 +1,113 @@ +.weui-loading-ball { + background-color: #06ad56; + border-radius: 50%; + position: relative; + -webkit-animation: spVolRot 0.6s infinite linear; + animation: spVolRot 0.6s infinite linear; + width: 64px; + height: 64px; + clear: both; +} +.weui-loading-ball:after { + content: ''; + border-radius: 50%; + position: absolute; + display: block; + width: 20px; + height: 20px; + left: 10px; + top: 10px; + background-color: white; +} +@keyframes spVolRot { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} +.weui-loading-circle { + border: 8px rgba(0, 0, 0, 0.25) solid; + border-top: 8px #06ad56 solid; + border-radius: 50%; + animation: spCircRot 0.6s infinite linear; + width: 64px; + height: 64px; + clear: both; +} +@keyframes spCircRot { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} +.weui-loading-wave { + border-radius: 50%; + position: relative; + opacity: 1; + width: 64px; + height: 64px; + clear: both; +} +.weui-loading-wave:before, +.weui-loading-wave:after { + content: ''; + border: 2px #06ad56 solid; + border-radius: 50%; + width: 100%; + height: 100%; + position: absolute; + left: 0px; +} +.weui-loading-wave:before { + transform: scale(1, 1); + opacity: 1; + -webkit-animation: spWaveBe 0.6s infinite linear; + animation: spWaveBe 0.6s infinite linear; +} +.weui-loading-wave:after { + transform: scale(0, 0); + opacity: 0; + -webkit-animation: spWaveAf 0.6s infinite linear; + animation: spWaveAf 0.6s infinite linear; +} +@keyframes spWaveAf { + from { + transform: scale(0.5, 0.5); + opacity: 0; + } + to { + transform: scale(1, 1); + opacity: 1; + } +} +@keyframes spWaveBe { + from { + -webkit-transform: scale(1, 1); + opacity: 1; + } + to { + -webkit-transform: scale(1.5, 1.5); + opacity: 0; + } +} +.weui-loading-multistage { + width: 42px; + height: 42px; + display: inline-block; + vertical-align: middle; + animation: weuiLoading 1s steps(12, end) infinite; + background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat; + background-size: 100%; +} +@keyframes weuiLoading { + 0% { + transform: rotate3d(0, 0, 1, 0deg); + } + 100% { + transform: rotate3d(0, 0, 1, 360deg); + } +} diff --git a/src/Loading/style/index.ts b/src/Loading/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Loading/style/index.ts +++ b/src/Loading/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Loadmore/style/index.css b/src/Loadmore/style/index.css new file mode 100644 index 0000000..f016a40 --- /dev/null +++ b/src/Loadmore/style/index.css @@ -0,0 +1,51 @@ +.weui-loadmore { + display: flex; + align-items: center; + justify-content: center; + width: 85%; + margin: 20px auto; + line-height: 1.6em; + font-size: 28px; + text-align: center; + user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; +} +.weui-loadmore-tips { + display: inline-block; + vertical-align: middle; + color: rgba(0, 0, 0, 0.9); +} +.weui-loadmore-line:before, +.weui-loadmore-line:after { + content: ''; + display: inline-block; + vertical-align: middle; + flex: 1; + max-width: 40%; + height: 2px; + background-color: rgba(0, 0, 0, 0.1); +} +.weui-loadmore-line .weui-loadmore-tips { + position: relative; + padding: 0 0.55em; + color: rgba(0, 0, 0, 0.5); +} +.weui-loadmore-dot .weui-loadmore-tips { + padding: 0 0.16em; + margin: 0 10px; +} +.weui-loadmore-dot .weui-loadmore-tips:before { + content: ' '; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.1); + display: inline-block; + position: relative; + vertical-align: 0; + top: -0.16em; +} +.weui-loadmore .weui-loading { + margin-right: 10px; +} diff --git a/src/Loadmore/style/index.ts b/src/Loadmore/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Loadmore/style/index.ts +++ b/src/Loadmore/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/NumberInput/style/index.css b/src/NumberInput/style/index.css new file mode 100644 index 0000000..02c3fb0 --- /dev/null +++ b/src/NumberInput/style/index.css @@ -0,0 +1,39 @@ +.weui-number-input { + display: flex; + align-items: center; + width: 100%; +} +.weui-number-input-control { + flex-shrink: 0; + border: 2px solid #ddd; + border-radius: 10px; + overflow: hidden; + color: #000; + display: inline-block; + box-sizing: content-box; + font-size: 30px; + width: 60px; + height: 60px; + line-height: 60px; + text-align: center; +} +.weui-number-input-control:active { + background-color: #ddd; +} +.weui-number-input-control.disabled { + color: rgba(0, 0, 0, 0.25); + background-color: #f5f5f5; + border-color: #d9d9d9; +} +.weui-number-input .control-down { + margin-right: 10px; +} +.weui-number-input .control-up { + margin-left: 10px; +} +.weui-number-input-show-control .weui-input-inner { + text-align: center; +} +.weui-number-input-show-control .weui-input-clear { + display: none; +} diff --git a/src/NumberInput/style/index.ts b/src/NumberInput/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/NumberInput/style/index.ts +++ b/src/NumberInput/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Panel/style/index.css b/src/Panel/style/index.css new file mode 100644 index 0000000..73f2b46 --- /dev/null +++ b/src/Panel/style/index.css @@ -0,0 +1,181 @@ +.weui-panel { + background-color: #ffffff; + margin-top: 20px; + position: relative; + overflow: hidden; +} +.weui-panel:first-child { + margin-top: 0; +} +.weui-panel:before { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 2px; + border-top: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +.weui-panel:after { + content: ' '; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 2px; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +.weui-panel__hd { + padding: 32px 32px 26px; + color: rgba(0, 0, 0, 0.9); + font-size: 28px; + font-weight: 700; + position: relative; + user-select: none; + -webkit-user-select: none; +} +.weui-panel__hd:after { + content: ' '; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 2px; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + left: 30px; +} +.weui-panel-item { + padding: 32px; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + color: inherit; + transition: 0.24s; +} +.weui-panel-item:before { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 2px; + border-top: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + left: 32px; +} +.weui-panel-item:first-child:before { + display: none; +} +.weui-panel-item_arrow:active { + background-color: #ececec; +} +.weui-panel-item_title { + font-weight: 400; + font-size: 28px; + line-height: 1.4; + color: rgba(0, 0, 0, 0.9); + width: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; + word-wrap: break-word; + word-break: break-all; + margin: 0; + user-select: none; + -webkit-user-select: none; +} +.weui-panel-item_desc { + user-select: none; + -webkit-user-select: none; + color: rgba(0, 0, 0, 0.3); + font-size: 26px; + line-height: 1.4; + padding-top: 8px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} +.weui-panel-item_info { + margin: 32px 0 0 0; + padding: 0 0 8px; + font-size: 26px; + color: #cecece; + line-height: 1em; + list-style: none; + overflow: hidden; + user-select: none; + -webkit-user-select: none; +} +.weui-panel-item_thumb { + width: 100%; + max-height: 100%; + vertical-align: top; + border-radius: 10px; +} +.weui-panel-item_ft { + padding-right: 44px; + position: relative; +} +.weui-panel-item_ft:after { + content: ' '; + width: 24px; + height: 48px; + -webkit-mask-position: 0 0; + mask-position: 0 0; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask-size: 100%; + background-color: currentColor; + color: rgba(0, 0, 0, 0.3); + -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); + mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E); + position: absolute; + top: 50%; + right: 0; + margin-top: -24px; +} +.weui-panel-item_compact { + display: flex; + align-items: center; +} +.weui-panel-item_compact .weui-panel-item_hd { + margin-right: 32px; + width: 120px; + height: 120px; + line-height: 120px; + text-align: center; +} +.weui-panel-item_compact .weui-panel-item_bd { + flex: 1; + min-width: 0; +} +.weui-brief { + float: left; + padding-right: 1em; +} +.weui-brief_divider { + padding-left: 1em; + border-left: 2px solid #cecece; +} diff --git a/src/Panel/style/index.ts b/src/Panel/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Panel/style/index.ts +++ b/src/Panel/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Picker/style/index.css b/src/Picker/style/index.css new file mode 100644 index 0000000..176376a --- /dev/null +++ b/src/Picker/style/index.css @@ -0,0 +1,107 @@ +.weui-picker.disabled .weui-item-bd { + color: rgba(0, 0, 0, 0.25); +} +.weui-picker .default-picker-item { + box-sizing: border-box; + user-select: none; + -webkit-user-select: none; +} +.weui-picker-placeholder { + color: rgba(0, 0, 0, 0.3); +} +.weui-picker-item { + width: 100%; +} +.weui-picker-panel { + display: flex; + position: relative; + background-color: #fff; + overflow: hidden; + user-select: none; + height: 480px; + -webkit-user-select: none; + scroll-behavior: 'unset'; + -webkit-overflow-scrolling: none; +} +.weui-picker__col { + flex: 1; + position: relative; + height: 100%; + font-size: 32px; + touch-action: none; +} +.weui-picker__col:last-child .weui-picker__item { + padding-right: constant(safe-area-inset-right); + padding-right: env(safe-area-inset-right); +} +.weui-picker__col:first-child .weui-picker__item { + padding-left: constant(safe-area-inset-left); + padding-left: env(safe-area-inset-left); +} +.weui-picker__mask { + top: 0; + height: 100%; + margin: 0 auto; + background: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)), -webkit-linear-gradient(bottom, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)); + background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)); + background-position: top, bottom; + background-size: 100% 184px; + background-repeat: no-repeat; + -webkit-transform: translateZ(0); + transform: translateZ(0); + pointer-events: none; +} +.weui-picker__indicator { + height: 112px; + top: 184px; +} +.weui-picker__indicator:after, +.weui-picker__indicator:before { + content: ' '; + position: absolute; + left: 0; + right: 0; + height: 2px; + color: rgba(0, 0, 0, 0.1); +} +.weui-picker__indicator:before { + top: 0; + border-top: 2px solid rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +.weui-picker__indicator:after { + bottom: 0; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +.weui-picker__content { + position: absolute; + top: 0; + left: 0; + width: 100%; +} +.weui-picker__item { + height: 96px; + line-height: 96px; + text-align: center; + color: rgba(0, 0, 0, 0.9); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.weui-picker__disabled { + color: rgba(0, 0, 0, 0.5); +} +.weui-picker__indicator, +.weui-picker__mask { + position: absolute; + left: 0; + width: 100%; + z-index: 3; +} diff --git a/src/Picker/style/index.ts b/src/Picker/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Picker/style/index.ts +++ b/src/Picker/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Popup/style/index.css b/src/Popup/style/index.css new file mode 100644 index 0000000..a24c08a --- /dev/null +++ b/src/Popup/style/index.css @@ -0,0 +1,154 @@ +.weui-popup.weui-popup-open .weui-popup-mask { + display: block; + animation: fadeIn ease 0.3s forwards; +} +.weui-popup.weui-popup-state-exited, +.weui-popup.weui-popup-state-unmounted { + display: none; +} +.weui-popup-mask { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); + user-select: none; + -webkit-overflow-scrolling: touch; + animation: fadeOut ease 0.3s forwards; + overflow: hidden; +} +.weui-popup-mask.weui-popup-mask.hidden-mask { + display: none !important; +} +.weui-popup-content { + position: relative; + z-index: 1001; +} +/** 渐入渐出动画 **/ +.fade { + display: flex; + animation: fadeOut ease 0.3s forwards; +} +.fade.fade-open { + display: flex; + animation: fadeIn ease 0.3s forwards; +} +.fade.fade-state-unmounted { + display: none; +} +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +/** 渐入渐出动画并缩放 **/ +.fade-scale { + display: flex; + animation: fadeScaleOut ease 0.3s forwards; +} +.fade-scale.fade-scale-open { + display: flex; + animation: fadeScaleIn ease 0.3s forwards; +} +.fade-scale.fade-scale-state-unmounted { + display: none; +} +@keyframes fadeScaleIn { + 0% { + opacity: 0; + transform: scale(0); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +@keyframes fadeScaleOut { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(0); + } +} +/** 底部拉出动画 **/ +.drill { + display: block; + animation: drillOut ease 0.3s forwards; +} +.drill.drill-open { + display: block; + animation: drillIn ease 0.3s forwards; +} +.drill.drill-state-unmounted { + display: none; +} +@keyframes drillIn { + 0% { + display: block; + opacity: 0; + transform: translate(0, 100%); + } + 100% { + display: block; + opacity: 1; + transform: translate(0, 0); + } +} +@keyframes drillOut { + 0% { + opacity: 1; + transform: translate(0, 0); + } + 100% { + opacity: 0; + transform: translate(0, 100%); + } +} +/** 顶部拉出动画 **/ +.drillUp { + display: block; + animation: drillUpOut ease 0.3s forwards; +} +.drillUp.drillUp-open { + display: block; + animation: drillUpIn ease 0.3s forwards; +} +.drillUp.drillUp-state-unmounted { + display: none; +} +@keyframes drillUpIn { + 0% { + opacity: 0; + transform: translateY(-120%); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +@keyframes drillUpOut { + 0% { + opacity: 1; + transform: translateY(0); + } + 100% { + opacity: 0; + transform: translateY(-120%); + } +} diff --git a/src/Popup/style/index.ts b/src/Popup/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Popup/style/index.ts +++ b/src/Popup/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Preview/style/index.css b/src/Preview/style/index.css new file mode 100644 index 0000000..fe5e2f3 --- /dev/null +++ b/src/Preview/style/index.css @@ -0,0 +1,168 @@ +.weui-preview { + position: relative; + background-color: #ffffff; + font-size: 28px; +} +.weui-preview:before { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 2px; + border-top: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +.weui-preview:after { + content: ' '; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 2px; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +.weui-preview__hd { + position: relative; + padding: 15px 32px; + text-align: right; + line-height: 2.5em; +} +.weui-preview__hd:after { + content: ' '; + position: absolute; + left: 0; + bottom: 0; + right: 0; + height: 2px; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +.weui-preview__hd .weui-preview__label { + text-align-last: auto; + color: #666; +} +.weui-preview__hd .weui-preview__value { + font-style: normal; + font-size: 32px; + color: #333; +} +.weui-preview__bd { + padding: 32px; + font-size: 28px; + text-align: right; + color: rgba(0, 0, 0, 0.5); + line-height: 2; +} +.weui-preview__ft { + position: relative; + line-height: 100px; + display: flex; +} +.weui-preview__ft:before { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 2px; + border-top: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +.weui-preview__item { + overflow: hidden; +} +.weui-preview__label { + float: left; + margin-right: 1em; + min-width: 4em; + color: rgba(0, 0, 0, 0.5); + text-align: justify; + text-align-last: justify; +} +.weui-preview__value { + display: block; + overflow: hidden; + word-break: normal; + word-wrap: break-word; + min-height: 2em; + font-size: 28px; +} +.weui-preview__btn { + position: relative; + display: block; + -webkit-box-flex: 1; + -webkit-flex: 1; + flex: 1; + color: #576b95; + text-align: center; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + user-select: none; + -webkit-user-select: none; +} +.weui-preview__btn:active { + background-color: #ececec; +} +.weui-preview__btn:after { + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 2px; + bottom: 0; + border-left: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleX(0.5); + transform: scaleX(0.5); +} +.weui-preview__btn:last-child:before { + content: ' '; + position: absolute; + right: 0; + top: 0; + width: 2px; + bottom: 0; + border-right: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleX(0.5); + transform: scaleX(0.5); +} +.weui-preview__btn_default { + color: rgba(0, 0, 0, 0.9); +} +.weui-preview__btn_primary { + color: #047c3d; +} +.weui-preview-align-left .weui-preview__bd { + text-align: left; +} +.preview-item:before, +.preview-item:after { + content: ''; + display: table; + box-sizing: border-box; +} +.preview-item:after { + clear: both; +} diff --git a/src/Preview/style/index.ts b/src/Preview/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Preview/style/index.ts +++ b/src/Preview/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/PromptDialog/style/index.css b/src/PromptDialog/style/index.css new file mode 100644 index 0000000..80757ae --- /dev/null +++ b/src/PromptDialog/style/index.css @@ -0,0 +1,20 @@ +.weui-prompt .weui-dialog-bd { + min-width: auto; +} +.prompt-body .prompt-message { + margin-bottom: 20px; +} +.prompt-body .prompt-input { + border-radius: 12px; + background: #f6f6f6; + padding: 10px 20px; + box-sizing: border-box; +} +.prompt-body .prompt-error { + font-size: 30px; + color: #ff4d4f; + margin: 20px 0 0 0; +} +.prompt-body.valid-fail .weui-input-inner { + color: #ff4d4f; +} diff --git a/src/PromptDialog/style/index.ts b/src/PromptDialog/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/PromptDialog/style/index.ts +++ b/src/PromptDialog/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/PullRefresh/style/index.css b/src/PullRefresh/style/index.css new file mode 100644 index 0000000..813bd06 --- /dev/null +++ b/src/PullRefresh/style/index.css @@ -0,0 +1,50 @@ +.weui-pull-refresh { + position: relative; + box-sizing: border-box; + overflow: hidden; +} +.weui-pull-refresh-body { + position: relative; +} +.weui-pull-refresh.action-pulling-enough .weui-pull-refresh-head .arrow { + transform: rotate(180deg); +} +.weui-pull-refresh-head { + position: absolute; + transform: translate3d(0px, -100%, 0px); + width: 100%; +} +.weui-pull-refresh-head-default { + text-align: center; + font-size: 28px; + line-height: 100px; + color: #7676a1; +} +.weui-pull-refresh-head-default .arrow { + transition: 0.3s; + margin-right: 10px; +} +.weui-pull-refresh-head-default .weui-loadmore-tips { + font-size: 28px; + color: #7676a1; +} +.weui-pull-refresh-head-default .refresh-complete { + text-align: center; + overflow: hidden; + border-radius: 8px; +} +.weui-pull-refresh-head-default .anticon-check-circle { + font-size: 1.3em; + vertical-align: sub; + margin-right: 10px; +} +.weui-pull-refresh-footer-default { + text-align: center; + font-size: 28px; + line-height: 100px; + color: #7676a1; +} +.weui-pull-refresh-footer-default .weui-loadmore-tips { + font-size: 28px; + color: #7676a1; +} diff --git a/src/PullRefresh/style/index.ts b/src/PullRefresh/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/PullRefresh/style/index.ts +++ b/src/PullRefresh/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Rate/style/index.css b/src/Rate/style/index.css new file mode 100644 index 0000000..3dee443 --- /dev/null +++ b/src/Rate/style/index.css @@ -0,0 +1,60 @@ +.weui-rate { + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: rgba(0, 0, 0, 0.65); + font-size: 28px; + font-variant: tabular-nums; + line-height: 1.5; + -webkit-font-feature-settings: 'tnum'; + font-feature-settings: 'tnum'; + display: inline-block; + margin: 0; + padding: 0; + color: #fadb14; + font-size: 20px; + line-height: unset; + list-style: none; + outline: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.weui-rate-star { + position: relative; + display: inline-block; + margin: 0; + padding: 0; + color: inherit; + cursor: pointer; + -webkit-transition: all 0.3s; + transition: all 0.3s; +} +.weui-rate-star:not(:last-child) { + margin-right: 8px; +} +.weui-rate-star.weui-rate-full .weui-rate-second { + color: inherit; +} +.weui-rate .weui-icon-star { + -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2264%2064%20896%20896%22%20focusable%3D%22false%22%20%20data-icon%3D%22star%22%20width%3D%221em%22%20height%3D%221em%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M908.1%20353.1l-253.9-36.9L540.7%2086.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9%2014.5L369.8%20316.2l-253.9%2036.9c-7%201-13.4%204.3-18.3%209.3a32.05%2032.05%200%200%200%20.6%2045.3l183.7%20179.1-43.4%20252.9a31.95%2031.95%200%200%200%2046.4%2033.7L512%20754l227.1%20119.4c6.2%203.3%2013.4%204.4%2020.3%203.2%2017.4-3%2029.1-19.5%2026.1-36.9l-43.4-252.9%20183.7-179.1c5-4.9%208.3-11.3%209.3-18.3%202.7-17.5-9.5-33.7-27-36.3z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); + mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2264%2064%20896%20896%22%20focusable%3D%22false%22%20%20data-icon%3D%22star%22%20width%3D%221em%22%20height%3D%221em%22%20fill%3D%22currentColor%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M908.1%20353.1l-253.9-36.9L540.7%2086.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9%2014.5L369.8%20316.2l-253.9%2036.9c-7%201-13.4%204.3-18.3%209.3a32.05%2032.05%200%200%200%20.6%2045.3l183.7%20179.1-43.4%20252.9a31.95%2031.95%200%200%200%2046.4%2033.7L512%20754l227.1%20119.4c6.2%203.3%2013.4%204.4%2020.3%203.2%2017.4-3%2029.1-19.5%2026.1-36.9l-43.4-252.9%20183.7-179.1c5-4.9%208.3-11.3%209.3-18.3%202.7-17.5-9.5-33.7-27-36.3z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); +} +.weui-rate-second { + color: #e8e8e8; + transition: all 0.3s; +} +[class^='weui-icon-'], +[class*=' weui-icon-'] { + display: inline-block; + vertical-align: middle; + width: 48px; + height: 48px; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask-size: 100%; + background-color: currentColor; +} diff --git a/src/Rate/style/index.ts b/src/Rate/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Rate/style/index.ts +++ b/src/Rate/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/SafeArea/style/index.css b/src/SafeArea/style/index.css new file mode 100644 index 0000000..b720395 --- /dev/null +++ b/src/SafeArea/style/index.css @@ -0,0 +1,8 @@ +.weui-safearea { + padding: 0 constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); + padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); + box-sizing: border-box; +} +.weui-safearea-height { + min-height: 100%; +} diff --git a/src/SafeArea/style/index.ts b/src/SafeArea/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/SafeArea/style/index.ts +++ b/src/SafeArea/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Search/style/index.css b/src/Search/style/index.css new file mode 100644 index 0000000..b4a1fef --- /dev/null +++ b/src/Search/style/index.css @@ -0,0 +1,87 @@ +.weui-search { + position: relative; + padding: 16px; + display: -webkit-box; + display: -webkit-flex; + display: flex; + box-sizing: border-box; + background-color: #ededed; + align-items: center; + font-size: 32px; + text-align: left; +} +.weui-search .cancel-btn { + color: #576b95; + white-space: nowrap; + margin-left: 16px; + margin-right: -80px; + opacity: 0; + transition: margin-right 0.3s, opacity 0.3s; + transition-delay: 0.1s; +} +.weui-search__form { + position: relative; + -webkit-box-flex: 1; + -webkit-flex: auto; + flex: auto; + background-color: #ffffff; + border-radius: 8px; + overflow: hidden; +} +.weui-search__box { + position: relative; + padding-left: 56px; + padding-right: 64px; + height: 100%; + width: 100%; + box-sizing: border-box; + z-index: 1; +} +.weui-search__input { + padding: 0; + width: 100%; + border: 0; + box-sizing: border-box; + background: transparent; + caret-color: #07c160; + z-index: 2; +} +.weui-search__input .weui-input-inner { + height: 66px; +} +.weui-search .search-icon { + margin-right: 10px; +} +.weui-search__synthetic-ph { + position: absolute; + top: 0; + left: 0; + transition: width 0.3s; + display: block; + text-align: center; + box-sizing: content-box; + z-index: 1; + font-size: 30px; + height: 66px; + line-height: 66px; + width: 100%; + color: #bbb; +} +.weui-search .synthetic-ph__inner { + display: inline-block; +} +.weui-search.focus.has-value .search_txt { + visibility: hidden; +} +.weui-search.focus .cancel-btn { + margin-right: 0px; + opacity: 1; +} +.weui-search.focus .weui-search__synthetic-ph { + padding-left: 15px; + width: 100%; +} +.weui-search.focus .weui-search__input { + visibility: visible; + padding: 0 20px 0 55px; +} diff --git a/src/Search/style/index.ts b/src/Search/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Search/style/index.ts +++ b/src/Search/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/SegmentedControl/style/index.css b/src/SegmentedControl/style/index.css new file mode 100644 index 0000000..5bae001 --- /dev/null +++ b/src/SegmentedControl/style/index.css @@ -0,0 +1,36 @@ +.weui-segmented { + display: flex; + border-radius: 5px; + overflow: hidden; + font-size: 28px; +} +.weui-segmented-item { + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex: 1; + color: #06ad56; + box-sizing: border-box; + border: 1px solid #06ad56; + line-height: 1.5; + padding: 3px 0; + transition: 0.3s; + cursor: pointer; + border-left: none; +} +.weui-segmented-item:active { + background-color: #e7fef2; +} +.weui-segmented-item:first-child { + border-left-width: 1px; + border-radius: 10px 0 0 10px; + border-left: 1px solid #06ad56; +} +.weui-segmented-item:last-child { + border-radius: 0 10px 10px 0; +} +.weui-segmented-item.selected { + background: #06ad56; + color: #fff; +} diff --git a/src/SegmentedControl/style/index.ts b/src/SegmentedControl/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/SegmentedControl/style/index.ts +++ b/src/SegmentedControl/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Skeleton/style/index.css b/src/Skeleton/style/index.css new file mode 100644 index 0000000..420e1a3 --- /dev/null +++ b/src/Skeleton/style/index.css @@ -0,0 +1,16 @@ +.weui-stripe { + height: 32px; + margin: 8px 0; + border-radius: 4px; + background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); + animation: stripe-loading 1.4s ease infinite; + background-size: 400% 100%; +} +@keyframes stripe-loading { + 0% { + background-position: 100% 50%; + } + to { + background-position: 0 50%; + } +} diff --git a/src/Skeleton/style/index.ts b/src/Skeleton/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Skeleton/style/index.ts +++ b/src/Skeleton/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Spin/style/index.css b/src/Spin/style/index.css new file mode 100644 index 0000000..aed827f --- /dev/null +++ b/src/Spin/style/index.css @@ -0,0 +1,165 @@ +.weui-spin-nested { + position: relative; +} +.weui-spin-nested .weui-spin { + font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif; + font-size: 28px; + line-height: 1.5; + box-sizing: border-box; + margin: 0; + padding: 0; + list-style: none; + color: #06ad56; + vertical-align: middle; + text-align: center; + opacity: 0; + transition: all 0.25s cubic-bezier(0.78, 0.14, 0.15, 0.86); + visibility: hidden; + pointer-events: none; + position: absolute; + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 4; +} +.weui-spin-nested .weui-spin-text { + padding-top: 20px; + text-shadow: 0 2px 4px #fff; + color: #06ad56; +} +.weui-spin-text { + margin: 0; +} +.weui-spin-indicator { + font-size: 56px; + color: #06ad56; +} +.weui-spin-indicator-spin { + transform: rotate(45deg); + animation: spin-rotate 1.2s infinite linear; + position: relative; + display: inline-block; + width: 60px; + height: 60px; +} +.weui-spin-indicator-spin i { + width: 26px; + height: 26px; + border-radius: 100%; + background-color: #06ad56; + transform: scale(0.75); + display: block; + position: absolute; + opacity: 0.3; + animation: spin-opacityMove 1s infinite linear alternate; + transform-origin: 50% 50%; +} +.weui-spin-indicator-spin i:first-child { + left: 0; + top: 0; +} +.weui-spin-indicator-spin i:nth-child(2) { + right: 0; + top: 0; + animation-delay: 0.4s; +} +.weui-spin-indicator-spin i:nth-child(3) { + right: 0; + bottom: 0; + animation-delay: 0.8s; +} +.weui-spin-indicator-spin i:nth-child(4) { + left: 0; + bottom: 0; + animation-delay: 1.2s; +} +.weui-spin-container { + position: relative; + zoom: 1; +} +.weui-spin-container:before { + box-sizing: border-box; + content: ''; + display: table; +} +.weui-spin-container:after { + box-sizing: border-box; + content: ''; + display: table; + clear: both; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: #fff; + opacity: 0.3; + transition: all 0.3s; + z-index: 10; +} +.weui-spin.weui-spin-spinning { + opacity: 1; + position: static; + display: inline-block; + visibility: visible; + pointer-events: auto; +} +.weui-spin-nested.spinning .weui-spin { + position: absolute; + height: 100%; + width: 100%; + z-index: 4; + display: flex; +} +.weui-spin-nested.spinning .weui-spin-container { + pointer-events: none; + user-select: none; + overflow: hidden; + opacity: 0.7; + -webkit-filter: blur(0.5px); + filter: blur(0.5px); +} +.weui-spin-show-text .weui-spin-indicator-spin { + margin-top: -40px; +} +.weui-spin-nested.inline { + display: inline-block; +} +.weui-spin-nested.inline .weui-spin-container { + display: inline-block; +} +.weui-spin-size-small .weui-spin-indicator { + font-size: 42px; +} +.weui-spin-size-small .weui-spin-indicator-spin { + width: 46px; + height: 46px; +} +.weui-spin-size-small .weui-spin-indicator-spin i { + width: 24px; + height: 24px; +} +.weui-spin-size-large .weui-spin-indicator { + font-size: 112px; +} +.weui-spin-size-large .weui-spin-indicator-spin { + width: 78px; + height: 78px; +} +.weui-spin-size-large .weui-spin-indicator-spin i { + width: 32px; + height: 32px; +} +@keyframes spin-rotate { + to { + transform: rotate(405deg); + } +} +@keyframes spin-opacityMove { + to { + opacity: 1; + } +} diff --git a/src/Spin/style/index.ts b/src/Spin/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Spin/style/index.ts +++ b/src/Spin/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/SwipeAction/style/index.css b/src/SwipeAction/style/index.css new file mode 100644 index 0000000..a14831e --- /dev/null +++ b/src/SwipeAction/style/index.css @@ -0,0 +1,53 @@ +.weui-swiper-action { + position: relative; + overflow: hidden; + background-color: #ddd; +} +.weui-swiper-action:not(:first-child):before { + content: ' '; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 2px; + border-top: 2px solid rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.1); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + left: 32px; + z-index: 2; +} +.weui-swiper-action-actions { + position: absolute; + top: 0; + bottom: 0; + display: flex; + align-items: center; + overflow: hidden; + white-space: nowrap; +} +.weui-swiper-action-actions.actions-left { + left: 0; +} +.weui-swiper-action-actions.actions-right { + left: 100%; +} +.weui-swiper-action-content { + touch-action: pan-y; +} +.weui-swiper-action-btn { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + background-color: #dddddd; + color: white; + font-size: 26px; + padding: 0 1.1em; + height: 100%; +} +.weui-swiper-action-btn + .weui-swiper-action-btn { + border-left: 2px solid #cecece; +} diff --git a/src/SwipeAction/style/index.ts b/src/SwipeAction/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/SwipeAction/style/index.ts +++ b/src/SwipeAction/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Swiper/style/index.css b/src/Swiper/style/index.css new file mode 100644 index 0000000..72a82fb --- /dev/null +++ b/src/Swiper/style/index.css @@ -0,0 +1,68 @@ +.weui-swiper { + position: relative; + overflow: hidden; +} +.weui-swiper-carousel { + position: relative; + will-change: transform; + display: flex; + flex-direction: row; + width: 100%; + flex-wrap: nowrap; +} +.weui-swiper-item { + position: relative; + width: 100%; + left: 0; + flex-shrink: 0; + will-change: transform; +} +.weui-swiper-decorator { + position: absolute; + bottom: 0px; + width: 100%; + text-align: center; +} +.weui-swiper-decorator-inner { + text-align: center; + zoom: 1; + width: 100%; +} +.weui-swiper-dot { + display: inline-block; + zoom: 1; +} +.weui-swiper-dot > span { + display: block; + width: 16px; + height: 16px; + margin: 0 6px; + border-radius: 50%; + background: #fff; +} +.weui-swiper-dot.active > span { + background: #06ad56; +} +.weui-swiper-vertical { + overflow: hidden; +} +.weui-swiper-vertical .weui-swiper-item { + position: absolute; + height: 100%; +} +.weui-swiper-vertical .weui-swiper-carousel { + height: 100%; +} +.weui-swiper-vertical .weui-swiper-decorator { + right: 0; + bottom: auto; + width: auto; + height: 100%; + top: 0; + display: flex; + align-items: center; +} +.weui-swiper-vertical .weui-swiper-dot { + display: block; + margin: 6px 0; +} diff --git a/src/Swiper/style/index.ts b/src/Swiper/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Swiper/style/index.ts +++ b/src/Swiper/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Switch/style/index.css b/src/Switch/style/index.css new file mode 100644 index 0000000..b576bf0 --- /dev/null +++ b/src/Switch/style/index.css @@ -0,0 +1,123 @@ +.weui-switch { + margin: 0; + padding: 0; + color: rgba(0, 0, 0, 0.65); + font-size: 28px; + list-style: none; + font-feature-settings: 'tnum'; + position: relative; + display: inline-block; + box-sizing: border-box; + min-width: 88px; + height: 44px; + line-height: 44px; + vertical-align: middle; + background-color: rgba(0, 0, 0, 0.25); + border: 2px solid transparent; + border-radius: 200px; + cursor: pointer; + transition: all 0.36s; + user-select: none; + overflow: hidden; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +.weui-switch::before { + content: ''; + border-color: #ccc; + border-collapse: separate; + animation-name: none; +} +.weui-switch:after { + position: absolute; + top: 2px; + left: 2px; + width: 36px; + height: 36px; + background-color: #fff; + border-radius: 50%; + cursor: pointer; + transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86); + content: ' '; +} +.weui-switch-inner { + display: block; + margin-right: 12px; + margin-left: 48px; + color: #fff; + font-size: 28px; +} +.weui-switch-input { + position: absolute; + left: 0; + z-index: 1; + opacity: 0; + top: 0; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + cursor: pointer; +} +.weui-switch-checked { + background-color: #06ad56; +} +.weui-switch-checked:after { + left: 100%; + margin-left: -2px; + transform: translateX(-100%); +} +.weui-switch-checked .weui-switch-inner { + margin-right: 48px; + margin-left: 12px; +} +.weui-switch-disabled { + cursor: not-allowed; + opacity: 0.4; +} +.weui-switch-size-default { + min-width: 100px; + height: 54px; + line-height: 50px; +} +.weui-switch-size-default:after { + top: 3px; + width: 44px; + height: 44px; +} +.weui-switch-size-default .weui-switch-inner { + margin-right: 14px; + margin-left: 60px; +} +.weui-switch-size-default.weui-switch-checked::before { + min-width: 100px; + height: 54px; + line-height: 54px; +} +.weui-switch-size-default.weui-switch-checked .weui-switch-inner { + margin-right: 60px; + margin-left: 14px; +} +.weui-switch-size-large { + min-width: 120px; + height: 64px; + line-height: 62px; +} +.weui-switch-size-large:after { + top: 4px; + width: 52px; + height: 52px; +} +.weui-switch-size-large .weui-switch-inner { + margin-right: 14px; + margin-left: 70px; + font-size: 28px; +} +.weui-switch-size-large.weui-switch-checked::before { + min-width: 120px; + height: 64px; + line-height: 62px; +} +.weui-switch-size-large.weui-switch-checked .weui-switch-inner { + margin-right: 60px; + margin-left: 14px; +} diff --git a/src/Switch/style/index.ts b/src/Switch/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Switch/style/index.ts +++ b/src/Switch/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Tabs/style/index.css b/src/Tabs/style/index.css new file mode 100644 index 0000000..cc86af1 --- /dev/null +++ b/src/Tabs/style/index.css @@ -0,0 +1,160 @@ +.weui-tabs { + overflow: hidden; + font-size: 28px; +} +.weui-tab { + display: inline-block; + box-sizing: border-box; + height: 100%; + margin: 0 32px 0; + padding: 24px 32px; + text-decoration: none; + cursor: pointer; + outline: none; + transition: color, border 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + margin-bottom: -4px; + border-bottom: 4px solid transparent; +} +.weui-tab.active { + background-color: none; + border-bottom: 4px solid #06ad56; +} +.weui-tab.active { + color: #06ad56; +} +.weui-tab.disabled { + color: rgba(0, 0, 0, 0.25); + cursor: not-allowed; +} +.weui-tab:last-child { + margin-right: 0; +} +.weui-tab-panel { + width: 100%; + opacity: 1; + box-sizing: border-box; +} +.weui-tab-panel.active { + display: block; +} +.weui-tabbar { + user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + zoom: 1; +} +.weui-tabbar:after { + display: block; + content: '.'; + clear: both; + line-height: 0; + visibility: hidden; +} +.weui-scrollable-tabbar { + position: relative; + box-sizing: border-box; +} +.weui-scrollable-tabbar-wrap { + overflow: hidden; + margin: 0 0 32px 0; + border-bottom: 2px solid #e8e8e8; +} +.weui-scrollable-tabbar-inner { + display: flex; + flex-direction: row; + width: 100%; +} +.weui-scrollable-tabbar.vertical .tabs-icon { + margin-top: 0; +} +.weui-scrollable-tabbar.vertical .weui-scrollable-tabbar-inner, +.weui-scrollable-tabbar.vertical .weui-scrollable-tabbar-wrap { + height: 100%; +} +.weui-scrollable-tabbar.vertical .weui-tab { + height: auto; +} +.weui-scrollable-tabbar.vertical .tabs-arrow.tab-prev { + left: 0; + top: 0; +} +.weui-scrollable-tabbar.vertical .tabs-arrow.tab-next { + left: 0; + top: initial; + bottom: 0; +} +.weui-scrollable-tabbar .weui-tab { + flex-basis: 33%; + flex: none; +} +.weui-scrollable-tabbar .weui-tabbar { + transition: transform 0.3s cubic-bezier(0.35, 0, 0.25, 1); + justify-content: space-between; +} +.weui-scrollable-tabbar .tabs-arrow { + display: none; + align-items: center; + justify-content: center; + margin-right: -4px; + width: 0; + height: 0; + top: 0; + text-align: center; + opacity: 0; + transition: 0.3s; + opacity: 1; + width: 0px; + height: 100%; + position: absolute; + user-select: none; + z-index: 1; + cursor: pointer; + color: #ccc; + overflow: hidden; +} +.weui-scrollable-tabbar .tabs-arrow:hover { + color: #333; +} +.weui-scrollable-tabbar .tabs-arrow.tab-prev { + left: 0; +} +.weui-scrollable-tabbar .tabs-arrow.tab-next { + right: 4px; +} +.weui-scrollable-tabbar .tabs-icon { + position: relative; + display: inline-block; + font-style: normal; + font-weight: normal; + font-variant: normal; + line-height: inherit; + vertical-align: baseline; + text-align: center; + text-transform: none; + font-family: sans-serif; + vertical-align: sub; +} +.weui-scrollable-tabbar.arrow.overflow { + padding: 0 64px; +} +.weui-scrollable-tabbar.arrow.overflow .weui-tabbar { + border: none; +} +.weui-scrollable-tabbar.arrow.overflow .tabs-arrow { + display: flex; + width: 64px; +} +.weui-scrollable-tabbar.arrow.overflow .weui-tabbar { + justify-content: initial; +} +.weui-scrollable-tabbar.vertical .weui-scrollable-tabbar-wrap { + border-bottom: none; +} +.weui-scrollable-tabbar.arrow.vertical.overflow { + padding: 46px 0; +} +.weui-scrollable-tabbar.arrow.vertical.overflow .tabs-arrow { + display: flex; + width: 100%; + height: 46px; +} diff --git a/src/Tabs/style/index.ts b/src/Tabs/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Tabs/style/index.ts +++ b/src/Tabs/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/TextArea/style/index.css b/src/TextArea/style/index.css new file mode 100644 index 0000000..1ae0256 --- /dev/null +++ b/src/TextArea/style/index.css @@ -0,0 +1,39 @@ +.weui-textarea { + display: block; + width: 100%; + box-sizing: border-box; +} +.weui-textarea-inner { + display: block; + border: 0; + resize: none; + background: transparent; + width: 100%; + color: inherit; + font-size: 32px; + line-height: inherit; + outline: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + caret-color: #06ad56; + -webkit-appearance: none; + padding: 0; +} +.weui-textarea-counter { + color: rgba(0, 0, 0, 0.3); + text-align: right; + font-size: 28px; +} +.weui-textarea.disabled { + color: rgba(0, 0, 0, 0.25); +} +/** rest**/ +textarea::-moz-placeholder { + color: rgba(0, 0, 0, 0.3); + opacity: 1; +} +textarea:-ms-input-placeholder { + color: rgba(0, 0, 0, 0.3); +} +textarea::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.3); +} diff --git a/src/TextArea/style/index.ts b/src/TextArea/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/TextArea/style/index.ts +++ b/src/TextArea/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Toast/style/index.css b/src/Toast/style/index.css new file mode 100644 index 0000000..eb2c116 --- /dev/null +++ b/src/Toast/style/index.css @@ -0,0 +1,89 @@ +.weui-toast { + min-width: 140px; +} +.weui-toast[data-type] { + padding: 25px 25px; +} +.weui-toast[data-type='text'] { + padding: 15px 25px; +} +.weui-toast-popup { + position: fixed; + z-index: 4020; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; +} +.weui-toast-wrapper { + position: relative; + z-index: 4020; + top: -40px; + background: hsla(0, 0%, 7%, 0.7); + text-align: center; + border-radius: 9px; + color: #fff; + animation: fadeOut ease 0.3s forwards; + animation-fill-mode: forwards; + display: flex; + flex-direction: column; + justify-content: center; + margin: auto; + box-sizing: border-box; + user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + max-width: 50%; +} +.weui-toast-icon { + display: flex; + justify-content: center; + margin-bottom: 10px; +} +.weui-toast-icon .weui-icon { + width: 120px; + height: 120px; + box-sizing: border-box; +} +.weui-toast-icon .weui-loading { + width: 80px; + height: 80px; + box-sizing: border-box; +} +.weui-toast-msg { + font-size: 26px; + color: #fff; +} +.weui-toast .weui-loading { + display: inline-block; + vertical-align: middle; + border-left-color: rgba(255, 255, 255, 0.25); + border-right-color: rgba(255, 255, 255, 0.25); + border-bottom-color: rgba(255, 255, 255, 0.25); +} +.weui-icon-success { + -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E); + mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E); + color: #07c160; +} +.weui-icon-warn { + -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E); + mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-.763-15.864l.11%207.596h1.305l.11-7.596h-1.525zm.759%2010.967c.512%200%20.902-.383.902-.882%200-.5-.39-.882-.902-.882a.878.878%200%2000-.896.882c0%20.499.396.882.896.882z%22%2F%3E%3C%2Fsvg%3E); + color: #ff4d4f; +} +[class^='weui-icon-'], +[class*=' weui-icon-'] { + display: inline-block; + vertical-align: middle; + width: 48px; + height: 48px; + -webkit-mask-position: 50% 50%; + mask-position: 50% 50%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100%; + mask-size: 100%; + background-color: currentColor; +} diff --git a/src/Toast/style/index.ts b/src/Toast/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Toast/style/index.ts +++ b/src/Toast/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Toptips/style/index.css b/src/Toptips/style/index.css new file mode 100644 index 0000000..cc920e2 --- /dev/null +++ b/src/Toptips/style/index.css @@ -0,0 +1,30 @@ +.weui-toptips { + padding: 20px; + border-radius: 16px; + box-sizing: border-box; + user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; +} +.weui-toptips-type-success { + background-color: #07c160; +} +.weui-toptips-type-fail { + background-color: #ff4d4f; +} +.weui-toptips-type-default { + background-color: #9e9e9e; +} +.weui-toptips-wrapper { + position: fixed; + top: 0; + left: 16px; + right: 16px; + font-size: 28px; + text-align: center; + color: #fff; + word-wrap: break-word; + word-break: break-all; + touch-action: none; + z-index: 1000; +} diff --git a/src/Toptips/style/index.ts b/src/Toptips/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Toptips/style/index.ts +++ b/src/Toptips/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/Upload/style/index.css b/src/Upload/style/index.css new file mode 100644 index 0000000..ffd2de0 --- /dev/null +++ b/src/Upload/style/index.css @@ -0,0 +1,132 @@ +.weui-image-item { + position: relative; + width: 160px; + height: 160px; +} +.weui-image-item-remove { + width: 30px; + height: 30px; + position: absolute; + right: 12px; + top: 12px; + text-align: right; + vertical-align: top; + z-index: 10; + background-size: 30px; + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnIHZpZXdCb3g9JzAgMCAxNiAxNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZyBmaWxsPSdub25lJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnPjxjaXJjbGUgZmlsbC1vcGFjaXR5PScuNCcgZmlsbD0nIzQwNDA0MCcgY3g9JzgnIGN5PSc4JyByPSc4Jy8+PHBhdGggZD0nTTExLjg5OCA0LjEwMWEuMzQ1LjM0NSAwIDAgMC0uNDg4IDBMOCA3LjUxMWwtMy40MTEtMy40MWEuMzQ1LjM0NSAwIDAgMC0uNDg4LjQ4OGwzLjQxMSAzLjQxLTMuNDEgMy40MTJhLjM0NS4zNDUgMCAwIDAgLjQ4OC40ODhMOCA4LjQ4N2wzLjQxMSAzLjQxMWEuMzQ1LjM0NSAwIDAgMCAuNDg4LS40ODhMOC40ODggOGwzLjQxLTMuNDEyYS4zNDQuMzQ0IDAgMCAwIDAtLjQ4N3onIGZpbGw9JyNGRkYnLz48L2c+PC9zdmc+); +} +.weui-image-item-content { + height: 100%; + width: 100%; + border-radius: 6px; + background-size: cover; +} +.weui-image-item.disable-delete .weui-image-item-remove { + display: none; +} +.weui-image-item.status-fail .weui-image-item-error { + display: flex; +} +.weui-image-item.status-uploading .weui-image-item-uploading { + display: flex; +} +.weui-image-item-error { + display: none; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + z-index: 5; + justify-content: center; + align-items: center; + font-size: 60px; + color: #ff4d4f; +} +.weui-image-item-uploading { + display: none; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + z-index: 5; + justify-content: center; + align-items: center; + font-size: 60px; +} +.weui-single-upload { + position: relative; + width: 160px; + height: 160px; +} +.weui-single-upload .weui-upload, +.weui-single-upload .weui-image-item { + width: 100%; + height: 100%; +} +.weui-single-upload-uploadBtn { + width: 100%; + height: 100%; + box-sizing: border-box; + border-radius: 6px; + border: 2px solid #dddddd; + background-color: #ffffff; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + font-size: 60px; + color: #999; +} +.weui-multi-upload .flexbox { + display: flex; + align-items: center; + flex-wrap: wrap; + margin-bottom: 12px; +} +.weui-multi-upload .flexbox-item { + flex: 1; + position: relative; + margin-right: 10px; +} +.weui-multi-upload .flexbox-item:last-child { + margin-right: 0; +} +.weui-multi-upload .flexbox-item:after { + display: block; + content: ' '; + padding-bottom: 100%; +} +.weui-multi-upload .weui-upload, +.weui-multi-upload .weui-image-item { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 100%; + height: 100%; +} +.weui-multi-upload-uploadBtn { + width: 100%; + height: 100%; + box-sizing: border-box; + border-radius: 6px; + border: 2px solid #dddddd; + background-color: #ffffff; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + font-size: 60px; + color: #999; +} +.upload-image-view__delete { + padding: 24px 0 60px 0; + text-align: center; + font-size: 32px; + line-height: 1.5; + user-select: none; + -webkit-user-select: none; +} diff --git a/src/Upload/style/index.ts b/src/Upload/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/Upload/style/index.ts +++ b/src/Upload/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/WhiteSpace/style/index.css b/src/WhiteSpace/style/index.css new file mode 100644 index 0000000..6b459d0 --- /dev/null +++ b/src/WhiteSpace/style/index.css @@ -0,0 +1,15 @@ +.weui-whitespace-xl { + height: 42px; +} +.weui-whitespace-lg { + height: 30px; +} +.weui-whitespace-md { + height: 18px; +} +.weui-whitespace-sm { + height: 12px; +} +.weui-whitespace-xs { + height: 6px; +} diff --git a/src/WhiteSpace/style/index.ts b/src/WhiteSpace/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/WhiteSpace/style/index.ts +++ b/src/WhiteSpace/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/WingBlank/style/index.css b/src/WingBlank/style/index.css new file mode 100644 index 0000000..299def8 --- /dev/null +++ b/src/WingBlank/style/index.css @@ -0,0 +1,12 @@ +.weui-wingblank-sm { + margin-left: 12px; + margin-right: 12px; +} +.weui-wingblank-lg { + margin-left: 30px; + margin-right: 30px; +} +.weui-wingblank-md { + margin-left: 18px; + margin-right: 18px; +} diff --git a/src/WingBlank/style/index.ts b/src/WingBlank/style/index.ts index 3a3ab0d..c7fe8e6 100644 --- a/src/WingBlank/style/index.ts +++ b/src/WingBlank/style/index.ts @@ -1,2 +1,2 @@ -import '../../style/index.less'; -import './index.less'; +import '../../style/index.css'; +import './index.css'; diff --git a/src/style/index.css b/src/style/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/style/themes/default.css b/src/style/themes/default.css new file mode 100644 index 0000000..e69de29 diff --git a/src/style/themes/index.css b/src/style/themes/index.css new file mode 100644 index 0000000..e69de29 -- Gitee