Merge remote-tracking branch 'origin/master' into hotfix/waterfall
This commit is contained in:
pangxie1991
@@ -2,7 +2,7 @@
|
||||
"name": "@youzan/z-button",
|
||||
"version": "0.0.1",
|
||||
"description": "button component",
|
||||
"main": "./lib/index.js",
|
||||
"main": "./index.js",
|
||||
"author": "niunai",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
|
||||
@@ -42,6 +42,12 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click');
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
let { type, nativeType, size, disabled, loading, block } = this;
|
||||
let Tag = this.tag;
|
||||
@@ -60,6 +66,7 @@ export default {
|
||||
'is-block': block
|
||||
}
|
||||
]}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{
|
||||
loading ? <i class="z-icon-loading"></i> : null
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import Card from './src/card';
|
||||
|
||||
export default Card;
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="z-card">
|
||||
<img :src="thumb" alt="" class="z-card__img">
|
||||
<div class="z-card__content" :class="{'is-center': !this.$slots.footer}">
|
||||
<div class="z-card__info">
|
||||
<slot name="title">
|
||||
<h4 v-text="title" class="z-card__title"></h4>
|
||||
</slot>
|
||||
<slot name="desc">
|
||||
<p v-if="desc" v-text="desc" class="z-card__title"></p>
|
||||
</slot>
|
||||
<slot name="tags"></slot>
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'z-card',
|
||||
props: {
|
||||
thumb: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
title: String,
|
||||
desc: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"name": "@youzan/z-cell",
|
||||
"version": "0.0.1",
|
||||
"description": "cell component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<a class="z-cell" :href="url" @click="handleClick">
|
||||
<div class="z-cell-title">
|
||||
<div class="z-cell__title">
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
|
||||
</slot>
|
||||
<slot name="title">
|
||||
<span class="z-cell-text" v-text="title"></span>
|
||||
<span class="z-cell-label" v-if="label" v-text="label"></span>
|
||||
<span class="z-cell__text" v-text="title"></span>
|
||||
<span class="z-cell__label" v-if="label" v-text="label"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="z-cell-value" :class="{ 'is-link' : isLink }">
|
||||
<div class="z-cell__value" :class="{ 'is-link' : isLink }">
|
||||
<slot>
|
||||
<span v-text="value"></span>
|
||||
</slot>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"name": "@youzan/z-dialog",
|
||||
"version": "0.0.1",
|
||||
"description": "dialog component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@@ -2,15 +2,15 @@
|
||||
<transition name="dialog-bounce">
|
||||
<div class="z-dialog-wrapper">
|
||||
<div class="z-dialog" v-show="value">
|
||||
<div class="z-dialog-header" v-if="title">
|
||||
<div class="z-dialog-title" v-text="title"></div>
|
||||
<div class="z-dialog__header" v-if="title">
|
||||
<div class="z-dialog__title" v-text="title"></div>
|
||||
</div>
|
||||
<div class="z-dialog-content" v-if="message">
|
||||
<div class="z-dialog-message" v-html="message"></div>
|
||||
<div class="z-dialog__content" v-if="message">
|
||||
<div class="z-dialog__message" v-html="message"></div>
|
||||
</div>
|
||||
<div class="z-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="z-dialog-btn z-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="z-dialog-btn z-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
<div class="z-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="z-dialog__btn z-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="z-dialog__btn z-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -18,7 +18,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'packages/popup';
|
||||
import Popup from 'src/mixins/popup';
|
||||
|
||||
const CANCEL_TEXT = '取消';
|
||||
const CONFIRM_TEXT = '确认';
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
{
|
||||
"name": "z-field"
|
||||
"name": "@youzan/z-field",
|
||||
"version": "0.0.1",
|
||||
"description": "form field component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
}">
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
class="z-field-control"
|
||||
class="z-field__control"
|
||||
v-model="currentValue"
|
||||
@change="$emit('change', currentValue)"
|
||||
:placeholder="placeholder"
|
||||
@@ -18,7 +18,7 @@
|
||||
</textarea>
|
||||
<input
|
||||
v-else
|
||||
class="z-field-control"
|
||||
class="z-field__control"
|
||||
:value="currentValue"
|
||||
@change="$emit('change', currentValue)"
|
||||
@input="handleInput"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "z-icon",
|
||||
"name": "@youzan/z-icon",
|
||||
"version": "0.0.1",
|
||||
"description": "z-icon",
|
||||
"main": "index.js",
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Loading from './src/loading';
|
||||
|
||||
export default Loading;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/z-loading",
|
||||
"version": "0.0.1",
|
||||
"description": "loading component",
|
||||
"main": "./lib/index.js",
|
||||
"author": "jiangruowei",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="z-loading"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'z-loading'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Panel from './src/panel';
|
||||
|
||||
export default Panel;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/z-panel",
|
||||
"version": "0.0.1",
|
||||
"description": "picker component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="z-panel">
|
||||
<div class="z-panel__header">
|
||||
<slot name="header">
|
||||
<h4 class="z-panel__title" v-text="title"></h4>
|
||||
<span class="z-panel__desc" v-if="desc" v-text="desc"></span>
|
||||
<span class="z-panel__status" v-if="status" v-text="status"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="z-panel__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="z-panel__footer" v-if="this.$slots.footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'z-panel',
|
||||
props: {
|
||||
title: String,
|
||||
desc: String,
|
||||
status: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"name": "@youzan/z-picker",
|
||||
"version": "0.0.1",
|
||||
"description": "picker component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@@ -154,7 +154,9 @@ export default {
|
||||
var el = this.$refs.wrapper;
|
||||
var dragState = {};
|
||||
|
||||
var velocityTranslate, prevTranslate, pickerItems;
|
||||
var velocityTranslate;
|
||||
var prevTranslate;
|
||||
var pickerItems; // eslint-disable-line
|
||||
|
||||
draggable(el, {
|
||||
start: (event) => {
|
||||
@@ -166,7 +168,7 @@ export default {
|
||||
startTop: event.pageY,
|
||||
startTranslateTop: translateUtil.getElementTranslate(el).top
|
||||
};
|
||||
pickerItems = el.querySelectorAll('.z-picker-item');
|
||||
pickerItems = el.querySelectorAll('.z-picker-item'); // eslint-disable-line
|
||||
},
|
||||
|
||||
drag: (event) => {
|
||||
|
||||
@@ -98,7 +98,6 @@ export default {
|
||||
*/
|
||||
getColumnValue(index) {
|
||||
let column = this.getColumn(index);
|
||||
console.log(column)
|
||||
return column && column.values[column.valueIndex];
|
||||
},
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"name": "@youzan/z-popup",
|
||||
"version": "0.0.1",
|
||||
"description": "popup component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"name": "@youzan/z-radio",
|
||||
"version": "0.0.1",
|
||||
"description": "radio component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<z-cell
|
||||
<div
|
||||
class="z-radio"
|
||||
:class="{
|
||||
'is-disabled': disabled
|
||||
@@ -11,19 +11,13 @@
|
||||
<span class="z-radio__label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</z-cell>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zCell from 'packages/cell';
|
||||
|
||||
export default {
|
||||
name: 'z-radio',
|
||||
|
||||
components: {
|
||||
zCell
|
||||
},
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
value: {},
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"name": "@youzan/z-switch",
|
||||
"version": "0.0.1",
|
||||
"description": "switch component",
|
||||
"main": "./lib/index.js",
|
||||
"main": "./index.js",
|
||||
"author": "jiangruowei",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
|
||||
<div class="o2-switch-node" :class="['is-' + switchState]"></div>
|
||||
<div class="z-switch" :class="switchState" @click="toggleState">
|
||||
<div class="z-switch__node" :class="switchState"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -39,15 +39,12 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
switchState: function() {
|
||||
if (this.disabled) {
|
||||
return 'disabled';
|
||||
} else if (this.loading) {
|
||||
return 'loading';
|
||||
} else if (this.checked) {
|
||||
return 'on';
|
||||
} else {
|
||||
return 'off';
|
||||
}
|
||||
let switchState = this.checked ? ['is-on'] : ['is-off'];
|
||||
|
||||
if (this.disabled) switchState.push('is-disabled');
|
||||
if (this.loading) switchState.push('is-loading');
|
||||
|
||||
return switchState;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
# zanui-css
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
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,10 +1,22 @@
|
||||
{
|
||||
"name": "@youzan/zenui",
|
||||
"name": "@youzan/zanui-css",
|
||||
"version": "0.0.1",
|
||||
"description": "wap component style",
|
||||
"main": "./lib/index.js",
|
||||
"author": "niunai",
|
||||
"description": "zanui css.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
"files": [
|
||||
"lib",
|
||||
"src"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "gulp build"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-cssmin": "^0.1.7",
|
||||
"gulp-postcss": "^6.1.1",
|
||||
"postcss-salad": "^1.0.5"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"browsers": ["ie > 8", "last 2 versions"],
|
||||
"features": {
|
||||
"bem": {
|
||||
"shortcuts": {
|
||||
"component": "b",
|
||||
"modifier": "m",
|
||||
"descendent": "e"
|
||||
},
|
||||
"separators": {
|
||||
"descendent": "__",
|
||||
"modifier": "--"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace z {
|
||||
@b button {
|
||||
@@ -63,6 +63,9 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
mini图标默认宽度50px，文字不能超过4个
|
||||
*/
|
||||
@m mini {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
@@ -2,7 +2,7 @@
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-right: 10px;
|
||||
&:last-child {
|
||||
&::last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.z-button {
|
||||
@@ -13,16 +13,23 @@
|
||||
@component-namespace z {
|
||||
@b button-group {
|
||||
font-size: 0;
|
||||
|
||||
> .z-button {
|
||||
margin-right: 10px;
|
||||
&::last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@b button-1-1 {
|
||||
@b button-1 {
|
||||
@mixin button-wrap;
|
||||
width: 100%;
|
||||
}
|
||||
@b button-2-1 {
|
||||
@b button-2 {
|
||||
@mixin button-wrap;
|
||||
width: 50%;
|
||||
}
|
||||
@b button-3-1 {
|
||||
@b button-3 {
|
||||
@mixin button-wrap;
|
||||
width: 33.33%;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
@import "./mixins/ellipsis.css";
|
||||
|
||||
@component-namespace z {
|
||||
@b card {
|
||||
padding: 5px 15px;
|
||||
background: #FAFAFA;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@e img {
|
||||
float: left;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@e content {
|
||||
margin-left: 100px;
|
||||
display: table;
|
||||
|
||||
@when center {
|
||||
display: table;
|
||||
height: 90px;
|
||||
|
||||
.z-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;
|
||||
@mixin multi-ellipsis 2;
|
||||
}
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
.z-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./mixins/border_retina.pcss";
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/border_retina.css";
|
||||
|
||||
@component-namespace z {
|
||||
@component cell-group {
|
||||
@b cell-group {
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@component cell {
|
||||
@b cell {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@@ -33,19 +33,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
@descendent title {
|
||||
@e title {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@descendent label {
|
||||
@e label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@descendent value {
|
||||
@e value {
|
||||
float: right;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
@import "./mixins/border_retina.pcss";
|
||||
@import "./mixins/border_retina.css";
|
||||
|
||||
@component-namespace z {
|
||||
@component dialog-wrapper {
|
||||
@b dialog-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@component dialog {
|
||||
@b dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -18,11 +18,11 @@
|
||||
backface-visibility: hidden;
|
||||
transition: .2s;
|
||||
|
||||
@descendent header {
|
||||
@e header {
|
||||
padding: 15px 0 0;
|
||||
}
|
||||
|
||||
@descendent content {
|
||||
@e content {
|
||||
padding: 15px 20px;
|
||||
min-height: 36px;
|
||||
position: relative;
|
||||
@@ -32,7 +32,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@descendent title {
|
||||
@e title {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
@@ -40,31 +40,31 @@
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@descendent message {
|
||||
@e message {
|
||||
color: #999;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@descendent footer {
|
||||
@e footer {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.is-twobtn {
|
||||
.z-dialog-btn {
|
||||
width: 50%;
|
||||
}
|
||||
@when twobtn {
|
||||
.z-dialog__btn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.z-dialog-cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
.z-dialog__cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@descendent btn {
|
||||
@e btn {
|
||||
line-height: 40px;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
@@ -74,11 +74,11 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@descendent cancel {
|
||||
@e cancel {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@descendent confirm {
|
||||
@e confirm {
|
||||
color: #00C000;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,47 +1,47 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./mixins/border_retina.pcss";
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/border_retina.css";
|
||||
|
||||
@component-namespace z {
|
||||
@component field {
|
||||
@b field {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@when textarea {
|
||||
.z-field-control {
|
||||
.z-field__control {
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@when nolabel {
|
||||
.z-cell-title {
|
||||
.z-cell__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.z-cell-value {
|
||||
.z-cell__value {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.z-cell-title,
|
||||
.z-cell-value {
|
||||
.z-cell__title,
|
||||
.z-cell__value {
|
||||
float: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.z-cell-title {
|
||||
.z-cell__title {
|
||||
width: 90px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.z-cell-value {
|
||||
.z-cell__value {
|
||||
width: 100%;
|
||||
padding-left: 90px;
|
||||
}
|
||||
|
||||
.z-field-control {
|
||||
@e control {
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
css组件库入口，组装成css组件库
|
||||
*/
|
||||
@import './button.css';
|
||||
@import './button_group.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 './panel.css';
|
||||
@@ -1,12 +0,0 @@
|
||||
/**
|
||||
css组件库入口，组装成css组件库
|
||||
*/
|
||||
@import './button.pcss';
|
||||
@import './button_group.pcss';
|
||||
@import './cell.pcss';
|
||||
@import './dialog.pcss';
|
||||
@import './field.pcss';
|
||||
@import './icon.pcss';
|
||||
@import './popup.pcss';
|
||||
@import './picker.pcss';
|
||||
@import './switch.pcss';
|
||||
@@ -0,0 +1,33 @@
|
||||
@-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 z {
|
||||
@b loading {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: url('data:image/png;base64,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') no-repeat center;
|
||||
background-size: contain;
|
||||
-webkit-animation: loading 0.8s linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation: loading 0.8s linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@define-mixin multi-ellipsis $lines {
|
||||
overflow : hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@component-namespace z {
|
||||
@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,14 +1,14 @@
|
||||
.v-modal {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
}
|
||||
|
||||
@component-namespace z {
|
||||
@component popup {
|
||||
@b modal {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
}
|
||||
|
||||
@b popup {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
@@ -17,7 +17,7 @@
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
|
||||
@modifier top {
|
||||
@m top {
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
@@ -25,7 +25,7 @@
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@modifier right {
|
||||
@m right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
@@ -33,7 +33,7 @@
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
@modifier bottom {
|
||||
@m bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
@@ -41,7 +41,7 @@
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@modifier left {
|
||||
@m left {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
@@ -17,28 +17,23 @@
|
||||
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);
|
||||
@when on {
|
||||
left: 0;
|
||||
transition: all .5s ease-in-out;
|
||||
}
|
||||
|
||||
@when off {
|
||||
right: 0;
|
||||
left: 20px;
|
||||
transition: all .5s ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@when on {
|
||||
background-color: #44db5e;
|
||||
border-color: #44db5e;
|
||||
@descendent node {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@when off {
|
||||
background-color: #fff;
|
||||
border-color: rgba(0, 0, 0, .1);
|
||||
@descendent node {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@when loading {
|
||||
@@ -46,8 +41,13 @@
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
background-color: #f2f2f2;
|
||||
border-color: rgba(0, 0, 0, .1);
|
||||
@when off {
|
||||
background-color: #f2f2f2;
|
||||
border-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
@when on {
|
||||
background-color: #a6e7b1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user