mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
remove zanui-css
This commit is contained in:
cookfront
parent
8eeb21f331
commit
3c120ed07a
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@youzan/zanui-css",
|
||||
"name": "vant",
|
||||
"version": "0.1.2",
|
||||
"description": "zanui css.",
|
||||
"description": "vant css.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
"files": [
|
||||
|
||||
@ -1 +0,0 @@
|
||||
# zanui-css
|
||||
Binary file not shown.
@ -1,13 +0,0 @@
|
||||
var gulp = require('gulp');
|
||||
var postcss = require('gulp-postcss');
|
||||
var cssmin = require('gulp-cssmin');
|
||||
var salad = require('postcss-salad')(require('./salad.config.json'));
|
||||
|
||||
gulp.task('compile', function() {
|
||||
return gulp.src('./src/*.css')
|
||||
.pipe(postcss([salad]))
|
||||
.pipe(cssmin())
|
||||
.pipe(gulp.dest('./lib'));
|
||||
});
|
||||
|
||||
gulp.task('build', ['compile']);
|
||||
@ -1,23 +0,0 @@
|
||||
{
|
||||
"name": "@youzan/zanui-css",
|
||||
"version": "0.2.0",
|
||||
"description": "zanui css.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
"files": [
|
||||
"lib",
|
||||
"src"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "gulp build",
|
||||
"build:icons": "sh scripts/build.sh"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-cssmin": "^0.1.7",
|
||||
"gulp-postcss": "^6.1.1",
|
||||
"postcss-salad": "^1.0.5"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
{
|
||||
"browsers": ["ie > 8", "last 2 versions"],
|
||||
"features": {
|
||||
"bem": {
|
||||
"shortcuts": {
|
||||
"component": "b",
|
||||
"modifier": "m",
|
||||
"descendent": "e"
|
||||
},
|
||||
"separators": {
|
||||
"descendent": "__",
|
||||
"modifier": "--"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,83 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
basepath=$(dirname $0)
|
||||
server_prefix=/zanui/icon
|
||||
|
||||
# convert relative path to absolute path
|
||||
function abspath() {
|
||||
pushd . > /dev/null; if [ -d "$1" ]; then cd "$1"; dirs -l +0; else cd "`dirname \"$1\"`"; cur_dir=`dirs -l +0`; if [ "$cur_dir" == "/" ]; then echo "$cur_dir`basename \"$1\"`"; else echo "$cur_dir/`basename \"$1\"`"; fi; fi; popd > /dev/null;
|
||||
}
|
||||
|
||||
command_exists () {
|
||||
type "$1" >/dev/null 2>&1
|
||||
}
|
||||
|
||||
fontname() {
|
||||
if command_exists superman ; then
|
||||
echo "https://b.yzcdn.cn$server_prefix/$(basename $basepath/../build/font/zanui-icon-*.$1)"
|
||||
else
|
||||
echo "$(abspath $basepath/../build/font/zanui-icon-*.$1)"
|
||||
fi
|
||||
}
|
||||
|
||||
# generate font files from sketch file
|
||||
$basepath/extract-icons.sh
|
||||
$basepath/generate-font.sh
|
||||
|
||||
if command_exists superman ; then
|
||||
# upload to cdn
|
||||
superman cdn $server_prefix $basepath/../build/font/zanui-icon-*
|
||||
fi
|
||||
|
||||
# generate fontface style
|
||||
eot=$(fontname eot)
|
||||
cat > $basepath/../src/icon.css <<EOF
|
||||
/* DO NOT EDIT! Generated by fount */
|
||||
|
||||
@font-face {
|
||||
font-family: 'zan-icon';
|
||||
src: url('$eot');
|
||||
src: url('$eot?#iefix') format('embedded-opentype'),
|
||||
url('$(fontname woff2)') format('woff2'),
|
||||
url('$(fontname woff)') format('woff'),
|
||||
url('$(fontname ttf)') format('truetype')
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
.zan-icon::before {
|
||||
font-family: "zan-icon" !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
/* margin-left: .2em; */
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
EOF
|
||||
|
||||
cat $basepath/../build/css/zanui-icon-codes.css >> $basepath/../src/icon.css
|
||||
@ -1,6 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
basepath=$(dirname $0)
|
||||
|
||||
rm -rf $basepath/../icons
|
||||
sketchtool export slices --formats=svg --overwriting=YES --save-for-web=YES --output=$basepath/../icons $basepath/../assets/icons.sketch
|
||||
@ -1,164 +0,0 @@
|
||||
module.exports = {
|
||||
name: 'zanui-icon',
|
||||
output: '../build',
|
||||
meta: {
|
||||
author: 'houzi, zhangmin',
|
||||
license: 'MIT',
|
||||
license_url: 'https://opensource.org/licenses/MIT',
|
||||
homepage: 'http://github.com/youzan',
|
||||
css_prefix_text: 'zan-icon-',
|
||||
filename_hash: true
|
||||
},
|
||||
hinting: true,
|
||||
glyphs_dir: '../icons',
|
||||
glyphs: [
|
||||
{
|
||||
keywords: ['qr', 'invalid'],
|
||||
src: '二维码失效.svg',
|
||||
css: 'qr-invalid'
|
||||
},
|
||||
{
|
||||
keywords: ['qr'],
|
||||
src: '二维码.svg',
|
||||
css: 'qr'
|
||||
},
|
||||
{
|
||||
keywords: ['exchange'],
|
||||
src: '兑换.svg',
|
||||
css: 'exchange',
|
||||
'correct_contour_direction': true
|
||||
},
|
||||
{
|
||||
keywords: ['close'],
|
||||
src: '关闭.svg',
|
||||
css: 'close'
|
||||
},
|
||||
{
|
||||
keywords: ['location'],
|
||||
src: '其他分店.svg',
|
||||
css: 'location'
|
||||
},
|
||||
{
|
||||
keywords: ['upgrade'],
|
||||
src: '升级地址.svg',
|
||||
css: 'upgrade'
|
||||
},
|
||||
{
|
||||
keywords: ['check'],
|
||||
src: '单选.svg',
|
||||
css: 'check'
|
||||
},
|
||||
{
|
||||
keywords: ['checked'],
|
||||
src: '选中.svg',
|
||||
css: 'checked'
|
||||
},
|
||||
{
|
||||
keywords: ['like', 'outline'],
|
||||
src: '喜欢.svg',
|
||||
css: 'like-o'
|
||||
},
|
||||
{
|
||||
keywords: ['like', 'filled'],
|
||||
src: '喜欢2.svg',
|
||||
css: 'like'
|
||||
},
|
||||
{
|
||||
keywords: ['chat'],
|
||||
src: '客服.svg',
|
||||
css: 'chat',
|
||||
'correct_contour_direction': true
|
||||
},
|
||||
{
|
||||
keywords: ['shop'],
|
||||
src: '店铺.svg',
|
||||
css: 'shop'
|
||||
},
|
||||
{
|
||||
keywords: ['photograph'],
|
||||
src: '拍照.svg',
|
||||
css: 'photograph'
|
||||
},
|
||||
{
|
||||
keywords: ['add'],
|
||||
src: '新增地址.svg',
|
||||
css: 'add'
|
||||
},
|
||||
{
|
||||
keywords: ['add2'],
|
||||
src: '添加.svg',
|
||||
css: 'add2'
|
||||
},
|
||||
{
|
||||
keywords: ['photo'],
|
||||
src: '照片.svg',
|
||||
css: 'photo'
|
||||
},
|
||||
{
|
||||
keywords: ['logistics'],
|
||||
src: '物流.svg',
|
||||
css: 'logistics'
|
||||
},
|
||||
{
|
||||
keywords: ['edit'],
|
||||
src: '编辑地址.svg',
|
||||
css: 'edit'
|
||||
},
|
||||
{
|
||||
keywords: ['passed'],
|
||||
src: '认证通过.svg',
|
||||
css: 'passed'
|
||||
},
|
||||
{
|
||||
keywords: ['cart'],
|
||||
src: '购物车.svg',
|
||||
css: 'cart'
|
||||
},
|
||||
{
|
||||
keywords: ['arrow'],
|
||||
src: '进入箭头.svg',
|
||||
css: 'arrow'
|
||||
},
|
||||
{
|
||||
keywords: ['gift'],
|
||||
src: '送礼.svg',
|
||||
css: 'gift'
|
||||
},
|
||||
{
|
||||
keywords: ['search'],
|
||||
src: '搜索.svg',
|
||||
css: 'search'
|
||||
},
|
||||
{
|
||||
keywords: ['clear'],
|
||||
src: '清除搜索.svg',
|
||||
css: 'clear'
|
||||
},
|
||||
{
|
||||
keywords: ['success'],
|
||||
src: '成功.svg',
|
||||
css: 'success'
|
||||
},
|
||||
{
|
||||
keywords: ['fail'],
|
||||
src: '失败.svg',
|
||||
css: 'fail'
|
||||
},
|
||||
{
|
||||
keywords: ['contact'],
|
||||
src: '联系人.svg',
|
||||
css: 'contact',
|
||||
'correct_contour_direction': true
|
||||
},
|
||||
{
|
||||
keywords: ['wechat'],
|
||||
src: '微信支付.svg',
|
||||
css: 'wechat'
|
||||
},
|
||||
{
|
||||
keywords: ['alipay'],
|
||||
src: '支付宝支付.svg',
|
||||
css: 'alipay'
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
basepath=$(dirname $0)
|
||||
|
||||
iconfount --config $basepath/fount-config.js
|
||||
@ -1,82 +0,0 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/border_retina.css';
|
||||
@import './popup.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b actionsheet {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
background-color: #e0e0e0;
|
||||
|
||||
@m withtitle {
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
@e item {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
color: $c-black;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
background-color: $c-white;
|
||||
|
||||
@m loading {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
}
|
||||
|
||||
@e subname {
|
||||
color: $c-gray-darker;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@e loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@e button {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
line-height: 50px;
|
||||
color: $c-black;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
@e header {
|
||||
line-height: 44px;
|
||||
color: $c-black;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
|
||||
.zan-icon-close {
|
||||
position: absolute;
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
top: 11px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actionsheet-float-enter,
|
||||
.actionsheet-float-leave-active {
|
||||
transform: translate3d(-50%, 100%, 0);
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b badge-group {
|
||||
position: relative;
|
||||
width: 85px;
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
}
|
||||
|
||||
@b badge {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20px 12px;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.4;
|
||||
background-color: $c-background;
|
||||
color: $c-gray-darker;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
|
||||
@m select {
|
||||
font-weight: bold;
|
||||
color: $c-black;
|
||||
background-color: $c-white;
|
||||
.zan-badge__active {
|
||||
display: block;
|
||||
}
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (right);
|
||||
@mixin border-retina (left);
|
||||
}
|
||||
}
|
||||
|
||||
@e active {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background-color: #FF4444;
|
||||
}
|
||||
|
||||
@e info {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-size: 10px;
|
||||
transform:scale(0.8);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 6px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 9px;
|
||||
background-color: #FF4444;
|
||||
color: $c-white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,122 +0,0 @@
|
||||
@import './common/var.css';
|
||||
@import './loading.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b button {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
line-height: 43px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute 0 0 0 0;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:not(.is-disabled):active::after {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
@e icon-loading {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@m default {
|
||||
color: $button-default-color;
|
||||
background-color: $button-default-background-color;
|
||||
border: 1px solid $button-default-border-color;
|
||||
}
|
||||
|
||||
@m primary {
|
||||
color: $button-primary-color;
|
||||
background-color: $button-primary-background-color;
|
||||
border: 1px solid $button-primary-border-color;
|
||||
}
|
||||
|
||||
@m danger {
|
||||
color: $button-danger-color;
|
||||
background-color: $button-danger-background-color;
|
||||
border: 1px solid $button-danger-border-color;
|
||||
}
|
||||
|
||||
@m large {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@m normal {
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@m small {
|
||||
min-width: 60px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
mini图标默认宽度50px，文字不能超过4个
|
||||
*/
|
||||
@m mini {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
font-size: 10px;
|
||||
|
||||
& + .zan-button--mini {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@m disabled {
|
||||
color: $button-disabled-color;
|
||||
background-color: $button-disabled-background-color;
|
||||
border: 1px solid $button-disabled-border-color;
|
||||
}
|
||||
|
||||
@m block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@m loading {
|
||||
.zan-button__text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@m bottom-action {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: $bottom-action-button-default-background-color;
|
||||
color: $bottom-action-button-default-color;
|
||||
font-size: 16px;
|
||||
|
||||
&.zan-button--primary {
|
||||
background-color: $bottom-action-button-primary-background-color;
|
||||
color: $bottom-action-button-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,93 +0,0 @@
|
||||
@import './mixins/ellipsis.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b card {
|
||||
padding: 5px 15px 5px 115px;
|
||||
height: 90px;
|
||||
background: #FAFAFA;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@e img {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
@e content {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
@m center {
|
||||
display: table;
|
||||
height: 90px;
|
||||
|
||||
.zan-card__info {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e row {
|
||||
overflow: hidden;
|
||||
padding-right: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@e title {
|
||||
line-height: 20px;
|
||||
color: #333;
|
||||
max-height: 40px;
|
||||
margin-bottom: 5px;
|
||||
word-break: break-all;
|
||||
@mixin multi-ellipsis 2;
|
||||
}
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
max-height: 20px;
|
||||
word-break: break-all;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
|
||||
@e price {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@e footer {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 5px;
|
||||
|
||||
.zan-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,88 +0,0 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/border_retina.css';
|
||||
@import './icon.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b cell-group {
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@b cell {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 10px 15px 10px 0;
|
||||
box-sizing: border-box;
|
||||
line-height: 24px;
|
||||
background-color: $c-white;
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@e label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
color: $c-gray-darker;
|
||||
}
|
||||
|
||||
@e value {
|
||||
float: right;
|
||||
overflow: hidden;
|
||||
|
||||
@m link {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@m alone {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
@m required {
|
||||
overflow: visible;
|
||||
|
||||
&::before {
|
||||
content: '*';
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
font-size: 14px;
|
||||
color: #f44;
|
||||
}
|
||||
|
||||
.zan-cell__title {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-icon-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
transform: translateY(-50%);
|
||||
color: $c-gray-dark;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b checkbox {
|
||||
overflow: hidden;
|
||||
|
||||
@m disabled {
|
||||
.zan-icon {
|
||||
color: #d1dbe5;
|
||||
}
|
||||
}
|
||||
|
||||
@e input {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@e control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@e label {
|
||||
line-height: 22px;
|
||||
margin-left: 37px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zan-icon-checked {
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
.zan-icon-check {
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
.zan-col {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.zan-col-1 { width: 4.166666666666667%; }
|
||||
.zan-col-2 { width: 8.333333333333334%; }
|
||||
.zan-col-3 { width: 12.5%; }
|
||||
.zan-col-4 { width: 16.666666666666668%; }
|
||||
.zan-col-5 { width: 20.833333333333336%; }
|
||||
.zan-col-6 { width: 25%; }
|
||||
.zan-col-7 { width: 29.166666666666668%; }
|
||||
.zan-col-8 { width: 33.333333333333336%; }
|
||||
.zan-col-9 { width: 37.5%; }
|
||||
.zan-col-10 { width: 41.66666666666667%; }
|
||||
.zan-col-11 { width: 45.833333333333336%; }
|
||||
.zan-col-12 { width: 50%; }
|
||||
.zan-col-13 { width: 54.16666666666667%; }
|
||||
.zan-col-14 { width: 58.333333333333336%; }
|
||||
.zan-col-15 { width: 62.50000000000001%; }
|
||||
.zan-col-16 { width: 66.66666666666667%; }
|
||||
.zan-col-17 { width: 70.83333333333334%; }
|
||||
.zan-col-18 { width: 75%; }
|
||||
.zan-col-19 { width: 79.16666666666667%; }
|
||||
.zan-col-20 { width: 83.33333333333334%; }
|
||||
.zan-col-21 { width: 87.5%; }
|
||||
.zan-col-22 { width: 91.66666666666667%; }
|
||||
.zan-col-23 { width: 95.83333333333334%; }
|
||||
.zan-col-24 { width: 100%; }
|
||||
.zan-col-offset-1 { margin-left: 4.166666666666667%; }
|
||||
.zan-col-offset-2 { margin-left: 8.333333333333334%; }
|
||||
.zan-col-offset-3 { margin-left: 12.5%; }
|
||||
.zan-col-offset-4 { margin-left: 16.666666666666668%; }
|
||||
.zan-col-offset-5 { margin-left: 20.833333333333336%; }
|
||||
.zan-col-offset-6 { margin-left: 25%; }
|
||||
.zan-col-offset-7 { margin-left: 29.166666666666668%; }
|
||||
.zan-col-offset-8 { margin-left: 33.333333333333336%; }
|
||||
.zan-col-offset-9 { margin-left: 37.5%; }
|
||||
.zan-col-offset-10 { margin-left: 41.66666666666667%; }
|
||||
.zan-col-offset-11 { margin-left: 45.833333333333336%; }
|
||||
.zan-col-offset-12 { margin-left: 50%; }
|
||||
.zan-col-offset-13 { margin-left: 54.16666666666667%; }
|
||||
.zan-col-offset-14 { margin-left: 58.333333333333336%; }
|
||||
.zan-col-offset-15 { margin-left: 62.50000000000001%; }
|
||||
.zan-col-offset-16 { margin-left: 66.66666666666667%; }
|
||||
.zan-col-offset-17 { margin-left: 70.83333333333334%; }
|
||||
.zan-col-offset-18 { margin-left: 75%; }
|
||||
.zan-col-offset-19 { margin-left: 79.16666666666667%; }
|
||||
.zan-col-offset-20 { margin-left: 83.33333333333334%; }
|
||||
.zan-col-offset-21 { margin-left: 87.5%; }
|
||||
.zan-col-offset-22 { margin-left: 91.66666666666667%; }
|
||||
.zan-col-offset-23 { margin-left: 95.83333333333334%; }
|
||||
.zan-col-offset-24 { margin-left: 100%; }
|
||||
@ -1,40 +0,0 @@
|
||||
/* UI标准色 */
|
||||
$c-white: #fff;
|
||||
$c-black: #333;
|
||||
$c-green: #06bf04;
|
||||
$c-green-wx: #4b0;
|
||||
$c-red: #ed5050;
|
||||
$c-gray: #c9c9c9;
|
||||
$c-gray-light: #e5e5e5;
|
||||
$c-gray-darker: #666;
|
||||
$c-gray-dark: #999;
|
||||
$c-yellow: #f09000;
|
||||
$c-yellow-light: #fcff00;
|
||||
$c-orange: #f60;
|
||||
$c-orange-dark: #f15a0c;
|
||||
$c-blue: #38f;
|
||||
|
||||
$c-background: #f8f8f8;
|
||||
|
||||
/* 按钮颜色 */
|
||||
$button-primary-color: $c-white;
|
||||
$button-primary-background-color: $c-green-wx;
|
||||
$button-primary-border-color: #0a0;
|
||||
|
||||
$button-default-color: $c-black;
|
||||
$button-default-background-color: $c-white;
|
||||
$button-default-border-color: #bbb;
|
||||
|
||||
$button-danger-color: $c-white;
|
||||
$button-danger-background-color: #f44;
|
||||
$button-danger-border-color: #e33;
|
||||
|
||||
$button-disabled-color: $c-gray-dark;
|
||||
$button-disabled-background-color: $c-gray-light;
|
||||
$button-disabled-border-color: #cacaca;
|
||||
|
||||
$bottom-action-button-default-color: $c-white;
|
||||
$bottom-action-button-default-background-color: #f85;
|
||||
|
||||
$bottom-action-button-primary-color: $c-white;
|
||||
$bottom-action-button-primary-background-color: #f44;
|
||||
@ -1,101 +0,0 @@
|
||||
@import './mixins/border_retina.css';
|
||||
@import './popup.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b dialog-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@b dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
background-color: #fff;
|
||||
width: 85%;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
transition: .2s;
|
||||
|
||||
@e header {
|
||||
padding: 15px 0 0;
|
||||
}
|
||||
|
||||
@e content {
|
||||
padding: 15px 20px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e message {
|
||||
color: #999;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
||||
@m notitle {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@e footer {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
|
||||
@when twobtn {
|
||||
.zan-dialog__btn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.zan-dialog__cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e btn {
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@e cancel {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e confirm {
|
||||
color: #00C000;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-bounce-enter {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.7);
|
||||
}
|
||||
.dialog-bounce-leave-active {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.9);
|
||||
}
|
||||
@ -1,89 +0,0 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/border_retina.css';
|
||||
@import './cell.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b field {
|
||||
width: 100%;
|
||||
|
||||
@m hastextarea {
|
||||
.zan-field__control {
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@m nolabel {
|
||||
.zan-cell__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zan-cell__value {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@m disabled {
|
||||
.zan-field__control {
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@m error {
|
||||
.zan-field__control {
|
||||
color: $c-red;
|
||||
}
|
||||
}
|
||||
|
||||
@m border {
|
||||
.zan-field__control {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-radius: 2px;
|
||||
@mixin border-retina (top, right, bottom, left);
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@m autosize {
|
||||
.zan-field__control {
|
||||
min-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-cell__title,
|
||||
.zan-cell__value {
|
||||
float: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zan-cell__title {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.zan-cell__value {
|
||||
width: 100%;
|
||||
padding-left: 90px;
|
||||
}
|
||||
|
||||
@e control {
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,78 +0,0 @@
|
||||
/* DO NOT EDIT! Generated by fount */
|
||||
|
||||
@font-face {
|
||||
font-family: 'zan-icon';
|
||||
src: url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.eot');
|
||||
src: url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.eot?#iefix') format('embedded-opentype'),
|
||||
url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.woff2') format('woff2'),
|
||||
url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.woff') format('woff'),
|
||||
url('https://b.yzcdn.cn/zanui/icon/zanui-icon-8884a88b28.ttf') format('truetype')
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
.zan-icon::before {
|
||||
font-family: "zan-icon" !important;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
/* margin-left: .2em; */
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
/* DO NOT EDIT! Generated by iconfount */
|
||||
|
||||
|
||||
.zan-icon-qr-invalid:before { content: '\e800'; } /* '' */
|
||||
.zan-icon-qr:before { content: '\e801'; } /* '' */
|
||||
.zan-icon-exchange:before { content: '\e802'; } /* '' */
|
||||
.zan-icon-close:before { content: '\e803'; } /* '' */
|
||||
.zan-icon-location:before { content: '\e804'; } /* '' */
|
||||
.zan-icon-upgrade:before { content: '\e805'; } /* '' */
|
||||
.zan-icon-check:before { content: '\e806'; } /* '' */
|
||||
.zan-icon-checked:before { content: '\e807'; } /* '' */
|
||||
.zan-icon-like-o:before { content: '\e808'; } /* '' */
|
||||
.zan-icon-like:before { content: '\e809'; } /* '' */
|
||||
.zan-icon-chat:before { content: '\e80a'; } /* '' */
|
||||
.zan-icon-shop:before { content: '\e80b'; } /* '' */
|
||||
.zan-icon-photograph:before { content: '\e80c'; } /* '' */
|
||||
.zan-icon-add:before { content: '\e80d'; } /* '' */
|
||||
.zan-icon-add2:before { content: '\e80e'; } /* '' */
|
||||
.zan-icon-photo:before { content: '\e80f'; } /* '' */
|
||||
.zan-icon-logistics:before { content: '\e810'; } /* '' */
|
||||
.zan-icon-edit:before { content: '\e811'; } /* '' */
|
||||
.zan-icon-passed:before { content: '\e812'; } /* '' */
|
||||
.zan-icon-cart:before { content: '\e813'; } /* '' */
|
||||
.zan-icon-arrow:before { content: '\e814'; } /* '' */
|
||||
.zan-icon-gift:before { content: '\e815'; } /* '' */
|
||||
.zan-icon-search:before { content: '\e816'; } /* '' */
|
||||
.zan-icon-clear:before { content: '\e817'; } /* '' */
|
||||
.zan-icon-success:before { content: '\e818'; } /* '' */
|
||||
.zan-icon-fail:before { content: '\e819'; } /* '' */
|
||||
.zan-icon-contact:before { content: '\e81a'; } /* '' */
|
||||
.zan-icon-wechat:before { content: '\e81b'; } /* '' */
|
||||
.zan-icon-alipay:before { content: '\e81c'; } /* '' */
|
||||
@ -1,36 +0,0 @@
|
||||
@import './swipe.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b image-preview {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
@e image {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
@m center {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.zan-image-preview__image--big {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
.zan-swipe {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
/**
|
||||
css组件库入口，组装成css组件库
|
||||
*/
|
||||
@import './button.css';
|
||||
@import './cell.css';
|
||||
@import './card.css';
|
||||
@import './dialog.css';
|
||||
@import './field.css';
|
||||
@import './icon.css';
|
||||
@import './loading.css';
|
||||
@import './picker.css';
|
||||
@import './popup.css';
|
||||
@import './radio.css';
|
||||
@import './switch.css';
|
||||
@import './badge.css';
|
||||
@import './search.css';
|
||||
@import './panel.css';
|
||||
@import './steps.css';
|
||||
@import './tag.css';
|
||||
@import './checkbox.css';
|
||||
@import './tab.css';
|
||||
@import './col.css';
|
||||
@import './row.css';
|
||||
@import './image_preview.css';
|
||||
@import './actionsheet.css';
|
||||
@import './quantity.css';
|
||||
@import './progress.css';
|
||||
@import './toast.css';
|
||||
@import './uploader.css';
|
||||
@import './swipe.css';
|
||||
@ -1,68 +0,0 @@
|
||||
@-webkit-keyframes loading {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@component-namespace zan {
|
||||
@b loading {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
|
||||
@e spinner {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
-webkit-animation: loading 0.8s linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation: loading 0.8s linear;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
@m circle {
|
||||
border-radius: 100%;
|
||||
border: 3px solid transparent;
|
||||
box-sizing: border-box;
|
||||
&.zan-loading__spinner--black {
|
||||
border-color: $c-gray;
|
||||
border-top-color: $c-gray-darker;
|
||||
}
|
||||
&.zan-loading__spinner--white {
|
||||
border-color: rgba(0, 0, 0, .5);
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@m gradient-circle {
|
||||
&.zan-loading__spinner--black {
|
||||
background: url('data:image/png;base64,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');
|
||||
background-size: contain;
|
||||
}
|
||||
&.zan-loading__spinner--white {
|
||||
background: url('data:image/png;base64,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');
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
$border-poses: top, right, bottom, left;
|
||||
|
||||
@define-mixin border-retina $poses: $border-poses, $border-retina-color: #e5e5e5 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform: scale(.5);
|
||||
transform-origin: left top;
|
||||
-webkit-perspective: 1000;
|
||||
-webkit-backface-visibility: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
@each $pos in $poses {
|
||||
border-$(pos): 1px solid $border-retina-color;
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
@define-mixin clearfix {
|
||||
&::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
@define-mixin multi-ellipsis $lines {
|
||||
overflow : hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
@component-namespace zan {
|
||||
@b panel {
|
||||
background: #fff;
|
||||
border-top: 1px solid #E5E5E5;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
|
||||
@e header {
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@e status {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
color: #FF4444;
|
||||
}
|
||||
|
||||
@e footer {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,143 +0,0 @@
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b picker {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
|
||||
@e toolbar {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@e cancel {
|
||||
color: #3388FF;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@e confirm {
|
||||
color: #3388FF;
|
||||
float: right;
|
||||
}
|
||||
|
||||
@e columns {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@m 1 {
|
||||
.zan-picker-column {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 2 {
|
||||
.zan-picker-column {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 3 {
|
||||
.zan-picker-column {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 4 {
|
||||
.zan-picker-column {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 5 {
|
||||
.zan-picker-column {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zan-picker-center-highlight {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
margin-top: -18px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.zan-picker-center-highlight:before,
|
||||
.zan-picker-center-highlight:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #eaeaea;
|
||||
display: block;
|
||||
zan-index: 15;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.zan-picker-center-highlight:before {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.zan-picker-center-highlight:after {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
@b picker-column {
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
||||
@e item {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 10px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #707274;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition-duration: .3s;
|
||||
backface-visibility: hidden;
|
||||
|
||||
@m selected {
|
||||
color: #000;
|
||||
transform: translate3d(0, 0, 0) rotateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker-column-wrapper {
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease-out;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.picker-column-wrapper.dragging,
|
||||
.picker-column-wrapper.dragging .picker-item {
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
@ -1,78 +0,0 @@
|
||||
@component-namespace zan {
|
||||
@b modal {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
transition: all .5s ease-out;
|
||||
}
|
||||
|
||||
@b popup {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
|
||||
@m top {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@m right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
@m bottom {
|
||||
width: 100%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@m left {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-slide-top-enter,
|
||||
.popup-slide-top-leave-active {
|
||||
transform: translate3d(-50%, -100%, 0);
|
||||
}
|
||||
|
||||
.popup-slide-right-enter,
|
||||
.popup-slide-right-leave-active {
|
||||
transform: translate3d(100%, -50%, 0);
|
||||
}
|
||||
|
||||
.popup-slide-bottom-enter,
|
||||
.popup-slide-bottom-leave-active {
|
||||
transform: translate3d(-50%, 100%, 0);
|
||||
}
|
||||
|
||||
.popup-slide-left-enter, .popup-slide-left-leave-active {
|
||||
transform: translate3d(-100%, -50%, 0);
|
||||
}
|
||||
|
||||
.popup-fade-enter, .popup-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b progress {
|
||||
@e bar {
|
||||
height: 4px;
|
||||
border-radius: 4.5px;
|
||||
width: 100%;
|
||||
background: $c-gray-light;
|
||||
position: relative;
|
||||
|
||||
@e finished-portion {
|
||||
border-radius: 4.5px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
@e pivot {
|
||||
padding: 2px 0;
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
width: 28px;
|
||||
background-color: $c-gray-light;
|
||||
line-height: 8px;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b quantity {
|
||||
font-size: 0;
|
||||
|
||||
@e stepper {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
background-color: $c-white;
|
||||
border: 1px solid $c-gray-dark;
|
||||
position: relative;
|
||||
outline: 0;
|
||||
padding: 5px;
|
||||
vertical-align: middle;
|
||||
|
||||
&::before {
|
||||
width: 9px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 1px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #6c6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
@e minus {
|
||||
border-radius: 2px 0 0 2px;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@m disabled {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #e8e8e8 #999 #e8e8e8 #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
@e plus {
|
||||
border-radius: 0 2px 2px 0;
|
||||
|
||||
@m disabled {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #e8e8e8 #e8e8e8 #e8e8e8 #999;
|
||||
}
|
||||
}
|
||||
|
||||
@e input {
|
||||
width: 33px;
|
||||
height: 26px;
|
||||
padding: 1px;
|
||||
border: 1px solid $c-gray-dark;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
box-sizing: content-box;
|
||||
color: $c-gray-darker;
|
||||
font-size: 14px;
|
||||
outline: 0;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace zan {
|
||||
@b radio {
|
||||
overflow: hidden;
|
||||
|
||||
@m disabled {
|
||||
.zan-icon {
|
||||
color: #d1dbe5;
|
||||
}
|
||||
}
|
||||
|
||||
@e input {
|
||||
position: relative;
|
||||
height: 22px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@e control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@e label {
|
||||
line-height: 22px;
|
||||
display: block;
|
||||
margin-left: 37px;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zan-icon-checked {
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
.zan-icon-check {
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
.zan-row {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
zoom: 1;
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
@import './common/var.css';
|
||||
@import './icon.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b search {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 15px;
|
||||
background-color: #F2F2F2;
|
||||
|
||||
@m focus {
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
@e input-wrap {
|
||||
position: relative;
|
||||
padding: 8px 24px 8px 35px;
|
||||
border: 1px solid $c-gray-light;
|
||||
border-radius: 4px;
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
@e input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
color: $c-gray-dark;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@e cancel {
|
||||
position: absolute;
|
||||
line-height: 34px;
|
||||
padding: 4px 0;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
font-size: 14px;
|
||||
color: $c-green;
|
||||
}
|
||||
|
||||
.zan-icon-search {
|
||||
color: $c-gray-darker;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zan-icon-clear {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 9px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,159 +0,0 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/ellipsis.css';
|
||||
@import './icon.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b steps {
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
|
||||
@m 4 {
|
||||
.zan-step {
|
||||
width: 33.2%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 3 {
|
||||
.zan-step {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@e icon {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@e message {
|
||||
display: table;
|
||||
height: 40px;
|
||||
margin: 15px 0;
|
||||
|
||||
.zan-steps__message-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: 14px;
|
||||
color: $c-black;
|
||||
}
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: $c-gray-dark;
|
||||
max-height: 18px;
|
||||
@mixin multi-ellipsis 1;
|
||||
}
|
||||
|
||||
@e items {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
|
||||
@m alone {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@b step {
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
position: relative;
|
||||
color: $c-gray-dark;
|
||||
|
||||
@m finish {
|
||||
color: $c-black;
|
||||
|
||||
.zan-step__circle,
|
||||
.zan-step__line {
|
||||
background-color: $c-green;
|
||||
}
|
||||
}
|
||||
|
||||
@m process {
|
||||
color: $c-black;
|
||||
|
||||
.zan-step__circle-container {
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
font-size: 12px;
|
||||
color: $c-green;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.zan-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
|
||||
.zan-step__title {
|
||||
transform: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.zan-step__circle-container {
|
||||
left: auto;
|
||||
right: -9px;
|
||||
}
|
||||
|
||||
.zan-step__line {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-step__circle-container {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: -8px;
|
||||
padding: 0 8px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@e circle {
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #888;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: 12px;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
@e line {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $c-gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b swipe {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@e indicators {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@e indicator {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #999;
|
||||
opacity: .8;
|
||||
margin: 0 3px;
|
||||
z-index: 1;
|
||||
|
||||
@m active {
|
||||
background: $c-orange;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@e items {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@b swipe-item {
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b switch {
|
||||
height: 31px;
|
||||
width: 51px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
&::after{
|
||||
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
|
||||
border-width: 3px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
@e node {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 13.5px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
z-index: 2;
|
||||
&::after {
|
||||
@mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
|
||||
border-radius: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
@e loading {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
|
||||
@m on {
|
||||
background-color: #44db5e;
|
||||
&::after { border-color: #44db5e; }
|
||||
.zan-switch__node {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
@m off {
|
||||
background-color: #fff;
|
||||
border-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
@m disabled {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,122 +0,0 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b tabs {
|
||||
position: relative;
|
||||
|
||||
@m col-2 {
|
||||
.zan-tab {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@m col-3 {
|
||||
.zan-tab {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
@m col-4 {
|
||||
.zan-tab {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@m col-5 {
|
||||
.zan-tab {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@e nav {
|
||||
overflow: hidden;
|
||||
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
|
||||
@m line {
|
||||
height: 44px;
|
||||
background-color: $c-white;
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@m card {
|
||||
height: 28px;
|
||||
margin: 0 15px;
|
||||
background-color: $c-white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #666666;
|
||||
overflow: hidden;
|
||||
|
||||
.zan-tab {
|
||||
color: #666666;
|
||||
line-height: 28px;
|
||||
border-right: 1px solid #666666;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
&.zan-tab--active {
|
||||
background-color: #666666;
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e nav-bar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #f13e3a;
|
||||
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@b tab {
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
transition: color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
float: left;
|
||||
|
||||
@m active {
|
||||
color: #FF4444;
|
||||
}
|
||||
|
||||
@e pane {
|
||||
display: none;
|
||||
|
||||
@m select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b tag {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 14px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
background: $c-gray;
|
||||
color: $c-white;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, right, bottom, left), $c-gray;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@m success {
|
||||
background: $c-green;
|
||||
|
||||
&::after {
|
||||
border-color: $c-green;
|
||||
}
|
||||
|
||||
@when plain {
|
||||
color: $c-green;
|
||||
}
|
||||
}
|
||||
|
||||
@m danger {
|
||||
background: $button-danger-background-color;
|
||||
|
||||
&::after {
|
||||
border-color: $button-danger-background-color;
|
||||
}
|
||||
|
||||
@when plain {
|
||||
color: $button-danger-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@m primary {
|
||||
background: $c-blue;
|
||||
|
||||
&::after {
|
||||
border-color: $c-blue;
|
||||
}
|
||||
|
||||
@when plain {
|
||||
color: $c-blue;
|
||||
}
|
||||
}
|
||||
|
||||
@when plain {
|
||||
background: $c-white;
|
||||
color: $c-gray;
|
||||
}
|
||||
|
||||
@when mark {
|
||||
border-radius: 0 8px 8px 0;
|
||||
|
||||
&::after {
|
||||
border-radius: 0 16px 16px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b toast {
|
||||
position: fixed;
|
||||
z-index: 3001;
|
||||
border-radius: 5px;
|
||||
background-color: #272727;
|
||||
opacity: .7;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
font-size: 12px;
|
||||
color: $c-white;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
|
||||
@e overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: transparent;
|
||||
height: 100vh;
|
||||
width: 100vh;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
@m loading {
|
||||
padding: 45px;
|
||||
}
|
||||
|
||||
@m text, html {
|
||||
padding: 12px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
@m default {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
.zan-toast__icon {
|
||||
padding-top: 20px;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.zan-toast__text {
|
||||
padding: 15px 0 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zan-toast-fade-enter, .zan-toast-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
|
||||
@component-namespace zan {
|
||||
@b uploader {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
@e input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
input[type="file" i]::-webkit-file-upload-button {
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user