Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue

This commit is contained in:
niunai
2017-03-02 15:53:34 +08:00
135 changed files with 54327 additions and 11654 deletions

View File

@@ -1,6 +1,6 @@
{
"name": "@youzan/zanui-css",
"version": "0.0.4",
"version": "0.0.10",
"description": "zanui css.",
"main": "lib/index.css",
"style": "lib/index.css",

View File

@@ -0,0 +1,71 @@
@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 15px;
box-sizing: border-box;
line-height: 14px;
background-color: $c-background;
color: $c-gray-darker;
font-size: 14px;
text-decoration: none;
white-space: nowrap;
@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;
}
@when 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);
}
}
&::after {
@mixin border-retina (bottom);
}
&:last-child {
&::after {
border-bottom: 0;
}
}
}
}

View File

@@ -1,6 +1,6 @@
@import "./common/var.css";
@component-namespace z {
@component-namespace zan {
@b button {
position: relative;
padding: 0;

View File

@@ -6,16 +6,16 @@
&:last-child {
padding-right: 0;
}
.z-button {
.zan-button {
width: 100%;
}
}
@component-namespace z {
@component-namespace zan {
@b button-group {
font-size: 0;
> .z-button {
> .zan-button {
margin-right: 10px;
&::last-child {
margin-right: 0;

View File

@@ -1,6 +1,6 @@
@import "./mixins/ellipsis.css";
@component-namespace z {
@component-namespace zan {
@b card {
padding: 5px 15px;
background: #FAFAFA;
@@ -27,7 +27,7 @@
display: table;
height: 90px;
.z-card__info {
.zan-card__info {
display: table-cell;
vertical-align: middle;
}
@@ -80,7 +80,7 @@
right: 15px;
bottom: 5px;
.z-button {
.zan-button {
margin-left: 5px;
}
}

View File

@@ -1,10 +1,11 @@
@import "./common/var.css";
@import "./mixins/border_retina.css";
@component-namespace z {
@component-namespace zan {
@b cell-group {
padding-left: 10px;
position: relative;
background-color: #fff;
&::after {
@mixin border-retina (top, bottom);
@@ -19,7 +20,7 @@
box-sizing: border-box;
line-height: 22px;
background-color: $c-white;
color: #333;
color: $c-black;
font-size: 14px;
text-decoration: none;
@@ -42,7 +43,7 @@
display: block;
font-size: 12px;
line-height: 1.2;
color: #666;
color: $c-gray-darker;
}
@e value {
@@ -52,14 +53,18 @@
@when link {
margin-right: 20px;
}
@when alone {
float: left;
}
}
.zui-icon-arrow {
.zan-icon-arrow {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: #999;
color: $c-gray-dark;
font-size: 12px;
}
}

View File

@@ -0,0 +1,44 @@
@import "./common/var.css";
@component-namespace zan {
@b checkbox {
@when disabled {
.zan-icon {
color: #d1dbe5;
}
}
@e input {
position: relative;
height: 22px;
margin-right: 15px;
}
@e control {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
opacity: 0;
margin: 0;
}
@e label {
line-height: 22px;
}
.zan-icon {
font-size: 22px;
line-height: 1;
}
.zan-icon-checked {
color: $c-green;
}
.zan-icon-check {
color: $c-gray-dark;
}
}
}

View File

@@ -33,7 +33,7 @@ $button-disabled-border-color: #cacaca;
:root{
/* z-index
/* zan-index
-------------------------- */
--index-normal: 1;
--index-top: 1000;

View File

@@ -1,6 +1,6 @@
@import "./mixins/border_retina.css";
@component-namespace z {
@component-namespace zan {
@b dialog-wrapper {
position: absolute;
}
@@ -52,11 +52,11 @@
overflow: hidden;
@when twobtn {
.z-dialog__btn {
.zan-dialog__btn {
width: 50%;
}
.z-dialog__cancel {
.zan-dialog__cancel {
&::after {
@mixin border-retina (right);
}

View File

@@ -1,42 +1,42 @@
@import "./common/var.css";
@import "./mixins/border_retina.css";
@component-namespace z {
@component-namespace zan {
@b field {
width: 100%;
overflow: hidden;
@when textarea {
.z-field__control {
.zan-field__control {
min-height: 60px;
}
}
@when nolabel {
.z-cell__title {
.zan-cell__title {
display: none;
}
.z-cell__value {
.zan-cell__value {
width: 100%;
padding-left: 0;
}
}
.z-cell__title,
.z-cell__value {
.zan-cell__title,
.zan-cell__value {
float: none;
box-sizing: border-box;
}
.z-cell__title {
.zan-cell__title {
width: 90px;
position: absolute;
top: 10px;
left: 0;
}
.z-cell__value {
.zan-cell__value {
width: 100%;
padding-left: 90px;
}

View File

@@ -9,10 +9,10 @@
url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype')
}
.zui-icon {
.zan-icon {
display: inline-block;
}
.zui-icon::before {
.zan-icon::before {
font-family: "zuiicon" !important;
font-style: normal;
font-weight: normal;
@@ -39,7 +39,7 @@
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-mozan-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
@@ -47,20 +47,20 @@
/* DO NOT EDIT! Generated by fount */
.zui-icon-album:before { content: '\e800'; } /* '' */
.zui-icon-arrow:before { content: '\e801'; } /* '' */
.zui-icon-camera:before { content: '\e802'; } /* '' */
.zui-icon-certificate:before { content: '\e803'; } /* '' */
.zui-icon-check:before { content: '\e804'; } /* '' */
.zui-icon-checked:before { content: '\e805'; } /* '' */
.zui-icon-close:before { content: '\e806'; } /* '' */
.zui-icon-gift:before { content: '\e807'; } /* '' */
.zui-icon-home:before { content: '\e808'; } /* '' */
.zui-icon-location:before { content: '\e809'; } /* '' */
.zui-icon-message:before { content: '\e80a'; } /* '' */
.zui-icon-send:before { content: '\e80b'; } /* '' */
.zui-icon-shopping-cart:before { content: '\e80c'; } /* '' */
.zui-icon-sign:before { content: '\e80d'; } /* '' */
.zui-icon-store:before { content: '\e80e'; } /* '' */
.zui-icon-topay:before { content: '\e80f'; } /* '' */
.zui-icon-tosend:before { content: '\e810'; } /* '' */
.zan-icon-album:before { content: '\e800'; } /* '' */
.zan-icon-arrow:before { content: '\e801'; } /* '' */
.zan-icon-camera:before { content: '\e802'; } /* '' */
.zan-icon-certificate:before { content: '\e803'; } /* '' */
.zan-icon-check:before { content: '\e804'; } /* '' */
.zan-icon-checked:before { content: '\e805'; } /* '' */
.zan-icon-close:before { content: '\e806'; } /* '' */
.zan-icon-gift:before { content: '\e807'; } /* '' */
.zan-icon-home:before { content: '\e808'; } /* '' */
.zan-icon-location:before { content: '\e809'; } /* '' */
.zan-icon-message:before { content: '\e80a'; } /* '' */
.zan-icon-send:before { content: '\e80b'; } /* '' */
.zan-icon-shopping-cart:before { content: '\e80c'; } /* '' */
.zan-icon-sign:before { content: '\e80d'; } /* '' */
.zan-icon-store:before { content: '\e80e'; } /* '' */
.zan-icon-topay:before { content: '\e80f'; } /* '' */
.zan-icon-tosend:before { content: '\e810'; } /* '' */

View File

@@ -13,5 +13,9 @@
@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';

View File

@@ -19,11 +19,19 @@
}
}
@component-namespace z {
@b loading {
height: 30px;
@component-namespace zan {
@b loading {
width: 30px;
background: url('data:image/png;base64,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') no-repeat center;
height: 30px;
line-height: 0;
font-size: 0;
}
@b spinner {
display: inline-block;
height: 100%;
width: 100%;
background: url('data:image/png;base64,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');
background-size: contain;
-webkit-animation: loading 0.8s linear;
-webkit-animation-iteration-count: infinite;

View File

@@ -1,4 +1,4 @@
@component-namespace z {
@component-namespace zan {
@b panel {
background: #fff;
border-top: 1px solid #E5E5E5;

View File

@@ -1,4 +1,4 @@
@component-namespace z {
@component-namespace zan {
@b picker {
overflow: hidden;
@@ -11,26 +11,26 @@
overflow: hidden;
@m 1 {
.z-picker-column {
.zan-picker-column {
width: 100%;
}
}
@m 2 {
.z-picker-column {
.zan-picker-column {
width: 50%;
}
}
@m 3 {
.z-picker-column {
.zan-picker-column {
width: 33.333%;
}
}
}
}
.z-picker-center-highlight {
.zan-picker-center-highlight {
box-sizing: border-box;
position: absolute;
left: 0;
@@ -40,26 +40,26 @@
pointer-events: none;
}
.z-picker-center-highlight:before,
.z-picker-center-highlight:after {
.zan-picker-center-highlight:before,
.zan-picker-center-highlight:after {
content: '';
position: absolute;
height: 1px;
width: 100%;
background-color: #eaeaea;
display: block;
z-index: 15;
zan-index: 15;
transform: scaleY(0.5);
}
.z-picker-center-highlight:before {
.zan-picker-center-highlight:before {
left: 0;
top: 0;
bottom: auto;
right: auto;
}
.z-picker-center-highlight:after {
.zan-picker-center-highlight:after {
left: 0;
bottom: 0;
right: auto;

View File

@@ -1,4 +1,4 @@
@component-namespace z {
@component-namespace zan {
@b modal {
position: fixed;
width: 100%;

View File

@@ -1,5 +1,44 @@
@component-namespace z {
@b radio {
@import "./common/var.css";
@component-namespace zan {
@b radio {
@when disabled {
.zan-icon {
color: #d1dbe5;
}
}
@e input {
position: relative;
height: 22px;
margin-right: 15px;
}
@e control {
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
opacity: 0;
margin: 0;
}
@e label {
line-height: 22px;
}
.zan-icon {
font-size: 22px;
line-height: 1;
}
.zan-icon-checked {
color: $c-green;
}
.zan-icon-check {
color: $c-gray-dark;
}
}
}

View File

@@ -0,0 +1,53 @@
@import "./common/var.css";
@component-namespace zan {
@b search {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: relative;
box-sizing: border-box;
padding: 4px 15px;
background-color: #F2F2F2;
@when focus {
.zan-search__input-wrap {
width: 82%;
}
span {
display: inline-block;
}
}
@e input-wrap {
position: relative;
width: 90%;
padding: 8px 24px 8px 35px;
border: 1px solid $c-gray-light;
border-radius: 4px;
background-color: $c-white;
span {
display: none;
position: absolute;
right: 5px;
top: 8px;
}
input {
width: 100%;
height: 14px;
font-size: 14px;
color: $c-gray-dark;
border: none;
outline: none;
}
}
@e cancel {
display: none;
color: #44BB00;
font-size: 14px;
white-space: nowrap;
@when focus {
display: block;
}
}
}
}

View File

@@ -1,5 +1,40 @@
@component-namespace z {
@import "./common/var.css";
@component-namespace zan {
@b steps {
color: red;
padding: 15px 0;
.zan-icon {
font-size: 40px;
line-height: 1;
float: left;
}
@e status {
padding: 0 10px;
}
@e message {
display: table;
height: 40px;
padding-right: 50px;
width: 100%;
box-sizing: border-box;
.zan-steps__message-wrapper {
display: table-cell;
vertical-align: middle;
}
}
@e title {
font-size: 14px;
color: $c-black;
}
@e desc {
font-size: 12px;
color: $c-gray-dark;
}
}
}

View File

@@ -1,5 +1,5 @@
@component-namespace z {
@component switch {
@component-namespace zan {
@b switch {
height: 29px;
width: 49px;
display: inline-block;
@@ -7,7 +7,7 @@
position: relative;
border: 1px solid;
@descendent node {
@e node {
width: 27px;
height: 27px;
border-radius: 100%;
@@ -16,16 +16,25 @@
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);
@when on {
left: 0;
left: 20px;
transition: all .5s ease-in-out;
}
@when off {
left: 20px;
left: 0;
transition: all .5s ease-in-out;
}
}
@e loading {
width: 16px;
height: 16px;
position: relative;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
@when on {
background-color: #44db5e;
border-color: #44db5e;
@@ -36,18 +45,8 @@
border-color: rgba(0, 0, 0, .1);
}
@when loading {
/* TODO */
}
@when disabled {
@when off {
background-color: #f2f2f2;
border-color: rgba(0, 0, 0, .1);
}
@when on {
background-color: #a6e7b1;
}
opacity: .4;
}
}
}

View File

@@ -0,0 +1,66 @@
@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;
}
}
}
}