component css

This commit is contained in:
cookfront 2017-02-22 18:49:50 +08:00
parent 4589081506
commit c4b59b4a7b
4 changed files with 19 additions and 19 deletions

View File

@ -1,15 +1,15 @@
<template> <template>
<a class="z-cell" :href="url" @click="handleClick"> <a class="z-cell" :href="url" @click="handleClick">
<div class="z-cell-title"> <div class="z-cell__title">
<slot name="icon"> <slot name="icon">
<i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i> <i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
</slot> </slot>
<slot name="title"> <slot name="title">
<span class="z-cell-text" v-text="title"></span> <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__abel" v-if="label" v-text="label"></span>
</slot> </slot>
</div> </div>
<div class="z-cell-value" :class="{ 'is-link' : isLink }"> <div class="z-cell__value" :class="{ 'is-link' : isLink }">
<slot> <slot>
<span v-text="value"></span> <span v-text="value"></span>
</slot> </slot>

View File

@ -8,7 +8,7 @@
}"> }">
<textarea <textarea
v-if="type === 'textarea'" v-if="type === 'textarea'"
class="z-field-control" class="z-field__control"
v-model="currentValue" v-model="currentValue"
@change="$emit('change', currentValue)" @change="$emit('change', currentValue)"
:placeholder="placeholder" :placeholder="placeholder"
@ -18,7 +18,7 @@
</textarea> </textarea>
<input <input
v-else v-else
class="z-field-control" class="z-field__control"
:value="currentValue" :value="currentValue"
@change="$emit('change', currentValue)" @change="$emit('change', currentValue)"
@input="handleInput" @input="handleInput"

View File

@ -2,7 +2,7 @@
@import "./mixins/border_retina.pcss"; @import "./mixins/border_retina.pcss";
@component-namespace z { @component-namespace z {
@component cell-group { @b cell-group {
padding-left: 10px; padding-left: 10px;
position: relative; position: relative;
@ -11,7 +11,7 @@
} }
} }
@component cell { @b cell {
display: block; display: block;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -33,19 +33,19 @@
} }
} }
@descendent title { @empty-cells: show title {
float: left; float: left;
overflow: hidden; overflow: hidden;
} }
@descendent label { @e label {
display: block; display: block;
font-size: 12px; font-size: 12px;
line-height: 1.2; line-height: 1.2;
color: #666; color: #666;
} }
@descendent value { @e value {
float: right; float: right;
overflow: hidden; overflow: hidden;

View File

@ -2,46 +2,46 @@
@import "./mixins/border_retina.pcss"; @import "./mixins/border_retina.pcss";
@component-namespace z { @component-namespace z {
@component field { @b field {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@when textarea { @when textarea {
.z-field-control { .z-field__control {
min-height: 60px; min-height: 60px;
} }
} }
@when nolabel { @when nolabel {
.z-cell-title { .z-cell__title {
display: none; display: none;
} }
.z-cell-value { .z-cell__value {
width: 100%; width: 100%;
padding-left: 0; padding-left: 0;
} }
} }
.z-cell-title, .z-cell__title,
.z-cell-value { .z-cell__value {
float: none; float: none;
box-sizing: border-box; box-sizing: border-box;
} }
.z-cell-title { .z-cell__title {
width: 90px; width: 90px;
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 0; left: 0;
} }
.z-cell-value { .z-cell__value {
width: 100%; width: 100%;
padding-left: 90px; padding-left: 90px;
} }
.z-field-control { @e control {
border: 0; border: 0;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;