Skip to content

E
Element
Commit febdd3bb authored by iamkun's avatar iamkun Committed by Zhi Cun
Browse files
Options

chore: init theme (#14508) 

* chore: init theme

* chore: update faas config
parent 2604c619
Hide whitespace changes
Inline Side-by-side
Showing with 5536 additions and 789 deletions
build/webpack.demo.js
View file @ febdd3bb
......@@ -172,6 +172,9 @@ const webpackConfig = {
]),
new ProgressBarPlugin(),
new VueLoaderPlugin(),
new webpack.DefinePlugin({
'process.env.FAAS_ENV': JSON.stringify(process.env.FAAS_ENV)
}),
new webpack.LoaderOptionsPlugin({
vue: {
compilerOptions: {
......
examples/color.js 0 → 100644
View file @ febdd3bb
export const tintColor = (c, tint) => {
const color = c.replace('#', '');
let red = parseInt(color.slice(0, 2), 16);
let green = parseInt(color.slice(2, 4), 16);
let blue = parseInt(color.slice(4, 6), 16);
if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',');
} else {
red += Math.round(tint * (255 - red));
green += Math.round(tint * (255 - green));
blue += Math.round(tint * (255 - blue));
red = red.toString(16);
green = green.toString(16);
blue = blue.toString(16);
return `#${ red }${ green }${ blue }`;
}
};
examples/components/header.vue
View file @ febdd3bb
......@@ -17,6 +17,7 @@
.container {
height: 100%;
box-sizing: border-box;
border-bottom: 1px solid #DCDFE6;
}
.nav-lang-spe {
......@@ -122,23 +123,24 @@
a {
text-decoration: none;
color: #888;
color: #1989FA;
opacity: 0.5;
display: block;
padding: 0 22px;
&.active,
&:hover {
color: #333;
opacity: 1;
}
&.active::after {
content: '';
display: inline-block;
position: absolute;
bottom: 15px;
left: calc(50% - 7px);
width: 14px;
height: 4px;
bottom: 0;
left: calc(50% - 15px);
width: 30px;
height: 2px;
background: #409EFF;
}
}
......@@ -356,7 +358,8 @@
<!--theme picker-->
<li class="nav-item nav-theme-switch" v-show="isComponentPage">
<theme-picker></theme-picker>
<theme-configurator :key="lang" v-if="showThemeConfigurator"></theme-configurator>
<theme-picker v-else></theme-picker>
</li>
</ul>
</div>
......@@ -365,9 +368,12 @@
</template>
<script>
import ThemePicker from './theme-picker.vue';
import ThemeConfigurator from './theme-configurator';
import AlgoliaSearch from './search.vue';
import compoLang from '../i18n/component.json';
import Element from 'main/index.js';
import bus from '../bus';
const { version } = Element;
export default {
......@@ -389,6 +395,7 @@
components: {
ThemePicker,
ThemeConfigurator,
AlgoliaSearch
},
......@@ -404,6 +411,10 @@
},
isComponentPage() {
return /^component/.test(this.$route.name);
},
showThemeConfigurator() {
const host = location.hostname;
return host.match('localhost') || host.match('elenet');
}
},
......@@ -441,6 +452,17 @@
};
xhr.open('GET', '/versions.json');
xhr.send();
let primaryLast = '#409EFF';
bus.$on('user-theme-config-update', (val) => {
let primaryColor = val.global['$--color-primary'];
if (!primaryColor) primaryColor = '#409EFF';
const base64svg = 'data:image/svg+xml;base64,';
const imgSet = document.querySelectorAll('h1 img');
imgSet.forEach((img) => {
img.src = `${base64svg}${window.btoa(window.atob(img.src.replace(base64svg, '')).replace(primaryLast, primaryColor))}`;
});
primaryLast = primaryColor;
});
}
};
</script>
examples/components/theme-configurator/docStyle.vue 0 → 100644
View file @ febdd3bb
<script>
const ORIGINAL_THEME = '#409EFF';
import { get as ajaxGet } from './utils/ajax';
import { updateDomHeadStyle } from './utils/utils.js';
export default {
data() {
return {
docs: '', // content of docs css
theme: ORIGINAL_THEME
};
},
methods: {
updateDocStyle(e) {
const val = e.global['$--color-primary'] || ORIGINAL_THEME;
const oldVal = this.theme;
const getHandler = (variable, id) => {
return () => {
let newStyle = this.updateStyle(this[variable], ORIGINAL_THEME, val);
updateDomHeadStyle(id, newStyle);
};
};
const docsHandler = getHandler('docs', 'docs-style');
if (!this.docs) {
const links = [].filter.call(document.querySelectorAll('link'), link => {
return /docs\..+\.css/.test(link.href || '');
});
links[0] && this.getCSSString(links[0].href, docsHandler, 'docs');
} else {
docsHandler();
}
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText;
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text);
});
styles.forEach(style => {
const { innerText } = style;
if (typeof innerText !== 'string') return;
style.innerText = this.updateStyle(innerText, oldVal, val);
});
this.theme = val;
},
updateStyle(style, oldColor, newColor) {
return style.replace(new RegExp(oldColor, 'ig'), newColor);
},
getCSSString(url, callback, variable) {
ajaxGet(url).then((res) => {
this[variable] = res;
callback();
});
}
}
};
</script>
examples/components/theme-configurator/download.vue 0 → 100644
View file @ febdd3bb
<template>
<div class="action-area">
<div class="action-area-main">
<div class="action-button">
<el-button type="warning" @click.stop="onReset">{{getActionDisplayName("reset-theme")}}</el-button>
</div>
<div class="action-button">
<el-button
type="primary"
:loading=downloading
@click.stop="onDownload">
{{getActionDisplayName("download-theme")}}
</el-button>
</div>
</div>
</div>
</template>
<style>
.action-area {
width: 24%;
max-width: 400px;
position: fixed;
right: 0;
bottom: 0;
padding-right: 1%;
}
@media (min-width: 1600px) {
.action-area {
padding-right: calc((100% - 1600px) / 2);
}
}
.action-area-main {
opacity: .95;
background: #F5F7FA;
height: 70px;
bottom: 0;
width: 97%;
box-sizing: border-box;
margin: 0 .5% 0 5%;
}
.action-button {
width: 50%;
text-align: center;
display: inline-block;
padding-top: 15px;
}
</style>
<script>
import { getActionDisplayName } from './utils/utils.js';
export default {
data() {
return {
downloading: false
};
},
methods: {
onReset() {
this.$parent.onReset();
},
getActionDisplayName(key) {
return getActionDisplayName(key);
},
onDownload() {
this.downloading = true;
this.$parent.onDownload()
.then()
.catch((err) => {
this.$parent.onError(err);
})
.then(() => {
this.downloading = false;
});
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/borderRadius.vue 0 → 100644
View file @ febdd3bb
<template>
<section class="config" :key="displayName">
<div class="config-label">
{{displayName}}
</div>
<div class="config-content">
<theme-input
v-if="isGlobal"
:val="value"
@change="onChange"
></theme-input>
<el-select
v-if="!isGlobal"
v-model="value"
class="select"
@change="onSelectChange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</section>
</template>
<style>
.select {
width: 100%;
}
</style>
<script>
import Mixin from './mixin';
import Input from './input';
import { getStyleDisplayName } from '../utils/utils.js';
export default {
data() {
return {
options: [],
value: ''
};
},
components: {
themeInput: Input
},
mixins: [Mixin],
computed: {
isGlobalInputValue() {
return this.config.value.startsWith('$');
}
},
methods: {
onSelectChange(e) {
this.onChange(e);
},
initSelectOption() {
this.options = [];
const golbalV = this.golbalValue.border;
if (golbalV) {
Object.keys(golbalV).forEach((font) => {
if (font.includes('border-radius')) {
const size = golbalV[font];
this.options.push({
value: size.key,
label: getStyleDisplayName(size)
});
}
});
}
}
},
watch: {
'mergedValue': {
immediate: true,
handler(value) {
this.initSelectOption();
this.value = this.mergedValue;
}
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/boxShadow.vue 0 → 100644
View file @ febdd3bb
<template>
<section class="config" :key="displayName">
<div class="config-label">
{{displayName}}
<el-button
class="plus-button"
size="mini"
round
icon="el-icon-plus"
@click.stop="onAddShadow"
>
</el-button>
</div>
<div class="config-content" v-for="(each, key) in valueArr" :key="key">
<div class="content-10">
<color-picker
size="mini"
class="colorPicker"
v-model="each.color"
@change="val => onInputChange(val, key, 'color')"
show-alpha
></color-picker>
<span class="content-tip">Color</span>
</div>
<div class="content-20">
<theme-input
size="mini"
:val="each.offsetX"
@change="val => onInputChange(Number(val), key, 'offsetX')"
>
</theme-input>
<span class="content-tip">X-px</span>
</div>
<div class="content-20">
<theme-input
size="mini"
:val="each.offsetY"
@change="val => onInputChange(Number(val), key, 'offsetY')"
>
</theme-input>
<span class="content-tip">Y-px</span>
</div>
<div class="content-20">
<theme-input
size="mini"
:val="each.spreadRadius"
@change="val => onInputChange(Number(val), key, 'spreadRadius')"
>
</theme-input>
<span class="content-tip">Spread</span>
</div>
<div class="content-20">
<theme-input
size="mini"
:val="each.blurRadius"
@change="val => onInputChange(Number(val), key, 'blurRadius')"
>
</theme-input>
<span class="content-tip">Blur</span>
</div>
<div class="content-10">
<el-button
size="mini"
round
icon="el-icon-minus"
@click.stop="val => onMinusShadow(key)"
></el-button>
</div>
</div>
</section>
</template>
<style scoped>
.plus-button {
position: absolute;
left: 90%;
}
.colorPicker {
margin-left: 0;
}
.content-20 .el-input__suffix-inner span{
line-height: 28px;
}
.content-20 {
padding: 0 3px;
}
.content-10 {
vertical-align: top;
}
.content-tip {
color: #909399;
font-size: 12px;
}
.config-content {
padding: 5px 0;
}
/* Element buton style override */
.el-button--mini.is-round {
padding: 3px 3px;
}
</style>
<script>
import Mixin from './mixin';
import Input from './input';
import { parse as parseShaodw, stringify as stringifyShaodw } from '../utils/boxShadow.js';
import ColorPicker from './color-picker';
export default {
components: {
ColorPicker,
themeInput: Input
},
data() {
return {
valueArr: []
};
},
mixins: [Mixin],
methods: {
onAddShadow() {
this.valueArr.push({
offsetX: 0,
offsetY: 0,
spreadRadius: 0,
blurRadius: 0,
color: 'rgba(0,0,0,0)',
inset: false
});
},
onMinusShadow(index) {
this.valueArr.splice(index, 1);
this.onShadowChange();
},
onInputChange(e, index, key) {
const arr = this.valueArr[index];
arr[key] = e;
this.valueArr.splice(index, 1, arr);
this.onShadowChange();
},
onShadowChange() {
this.onChange(
stringifyShaodw(this.valueArr)
);
}
},
watch: {
'mergedValue': {
immediate: true,
handler(value) {
this.valueArr = parseShaodw(value);
}
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/color-picker/index.js 0 → 100644
View file @ febdd3bb
import ColorPicker from './src/main';
/* istanbul ignore next */
ColorPicker.install = function(Vue) {
Vue.component(ColorPicker.name, ColorPicker);
};
export default ColorPicker;
examples/components/theme-configurator/editor/color-picker/src/color.js 0 → 100644
View file @ febdd3bb
const hsv2hsl = function(hue, sat, val) {
return [
hue,
(sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,
hue / 2
];
};
// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
const isOnePointZero = function(n) {
return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
};
const isPercentage = function(n) {
return typeof n === 'string' && n.indexOf('%') !== -1;
};
// Take input from [0, n] and return it as [0, 1]
const bound01 = function(value, max) {
if (isOnePointZero(value)) value = '100%';
const processPercent = isPercentage(value);
value = Math.min(max, Math.max(0, parseFloat(value)));
// Automatically convert percentage into number
if (processPercent) {
value = parseInt(value * max, 10) / 100;
}
// Handle floating point rounding errors
if ((Math.abs(value - max) < 0.000001)) {
return 1;
}
// Convert into [0, 1] range if it isn't already
return (value % max) / parseFloat(max);
};
const INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };
const toHex = function({ r, g, b }) {
const hexOne = function(value) {
value = Math.min(Math.round(value), 255);
const high = Math.floor(value / 16);
const low = value % 16;
return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);
};
if (isNaN(r) || isNaN(g) || isNaN(b)) return '';
return '#' + hexOne(r) + hexOne(g) + hexOne(b);
};
const HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };
const parseHexChannel = function(hex) {
if (hex.length === 2) {
return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
}
return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
};
const hsl2hsv = function(hue, sat, light) {
sat = sat / 100;
light = light / 100;
let smin = sat;
const lmin = Math.max(light, 0.01);
let sv;
let v;
light *= 2;
sat *= (light <= 1) ? light : 2 - light;
smin *= lmin <= 1 ? lmin : 2 - lmin;
v = (light + sat) / 2;
sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);
return {
h: hue,
s: sv * 100,
v: v * 100
};
};
// `rgbToHsv`
// Converts an RGB color value to HSV
// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
// *Returns:* { h, s, v } in [0,1]
const rgb2hsv = function(r, g, b) {
r = bound01(r, 255);
g = bound01(g, 255);
b = bound01(b, 255);
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s;
let v = max;
const d = max - min;
s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0; // achromatic
} else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return { h: h * 360, s: s * 100, v: v * 100 };
};
// `hsvToRgb`
// Converts an HSV color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
const hsv2rgb = function(h, s, v) {
h = bound01(h, 360) * 6;
s = bound01(s, 100);
v = bound01(v, 100);
const i = Math.floor(h);
const f = h - i;
const p = v * (1 - s);
const q = v * (1 - f * s);
const t = v * (1 - (1 - f) * s);
const mod = i % 6;
const r = [v, q, p, p, t, v][mod];
const g = [t, v, v, q, p, p][mod];
const b = [p, p, t, v, v, q][mod];
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255)
};
};
export default class Color {
constructor(options) {
this._hue = 0;
this._saturation = 100;
this._value = 100;
this._alpha = 100;
this.enableAlpha = false;
this.format = 'hex';
this.value = '';
options = options || {};
for (let option in options) {
if (options.hasOwnProperty(option)) {
this[option] = options[option];
}
}
this.doOnChange();
}
set(prop, value) {
if (arguments.length === 1 && typeof prop === 'object') {
for (let p in prop) {
if (prop.hasOwnProperty(p)) {
this.set(p, prop[p]);
}
}
return;
}
this['_' + prop] = value;
this.doOnChange();
}
get(prop) {
return this['_' + prop];
}
toRgb() {
return hsv2rgb(this._hue, this._saturation, this._value);
}
fromString(value) {
if (!value) {
this._hue = 0;
this._saturation = 100;
this._value = 100;
this.doOnChange();
return;
}
const fromHSV = (h, s, v) => {
this._hue = Math.max(0, Math.min(360, h));
this._saturation = Math.max(0, Math.min(100, s));
this._value = Math.max(0, Math.min(100, v));
this.doOnChange();
};
if (value.indexOf('hsl') !== -1) {
const parts = value.replace(/hsla|hsl|\(|\)/gm, '')
.split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
if (parts.length === 4) {
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);
fromHSV(h, s, v);
}
} else if (value.indexOf('hsv') !== -1) {
const parts = value.replace(/hsva|hsv|\(|\)/gm, '')
.split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
if (parts.length === 4) {
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
fromHSV(parts[0], parts[1], parts[2]);
}
} else if (value.indexOf('rgb') !== -1) {
const parts = value.replace(/rgba|rgb|\(|\)/gm, '')
.split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
if (parts.length === 4) {
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);
fromHSV(h, s, v);
}
} else if (value.indexOf('#') !== -1) {
const hex = value.replace('#', '').trim();
let r, g, b;
if (hex.length === 3) {
r = parseHexChannel(hex[0] + hex[0]);
g = parseHexChannel(hex[1] + hex[1]);
b = parseHexChannel(hex[2] + hex[2]);
} else if (hex.length === 6 || hex.length === 8) {
r = parseHexChannel(hex.substring(0, 2));
g = parseHexChannel(hex.substring(2, 4));
b = parseHexChannel(hex.substring(4, 6));
}
if (hex.length === 8) {
this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);
} else if (hex.length === 3 || hex.length === 6) {
this._alpha = 100;
}
const { h, s, v } = rgb2hsv(r, g, b);
fromHSV(h, s, v);
}
}
compare(color) {
return Math.abs(color._hue - this._hue) < 2 &&
Math.abs(color._saturation - this._saturation) < 1 &&
Math.abs(color._value - this._value) < 1 &&
Math.abs(color._alpha - this._alpha) < 1;
}
doOnChange() {
const { _hue, _saturation, _value, _alpha, format } = this;
if (this.enableAlpha) {
switch (format) {
case 'hsl':
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.value = `hsla(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%, ${ _alpha / 100})`;
break;
case 'hsv':
this.value = `hsva(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%, ${ _alpha / 100})`;
break;
default:
const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
this.value = `rgba(${r}, ${g}, ${b}, ${ _alpha / 100 })`;
}
} else {
switch (format) {
case 'hsl':
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.value = `hsl(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%)`;
break;
case 'hsv':
this.value = `hsv(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%)`;
break;
case 'rgb':
const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
this.value = `rgb(${r}, ${g}, ${b})`;
break;
default:
this.value = toHex(hsv2rgb(_hue, _saturation, _value));
}
}
}
};
examples/components/theme-configurator/editor/color-picker/src/components/alpha-slider.vue 0 → 100644
View file @ febdd3bb
<template>
<div class="el-color-alpha-slider" :class="{ 'is-vertical': vertical }">
<div class="el-color-alpha-slider__bar"
@click="handleClick"
ref="bar"
:style="{
background: background
}">
</div>
<div class="el-color-alpha-slider__thumb"
ref="thumb"
:style="{
left: thumbLeft + 'px',
top: thumbTop + 'px'
}">
</div>
</div>
</template>
<script>
import draggable from '../draggable';
export default {
name: 'el-color-alpha-slider',
props: {
color: {
required: true
},
vertical: Boolean
},
watch: {
'color._alpha'() {
this.update();
},
'color.value'() {
this.update();
}
},
methods: {
handleClick(event) {
const thumb = this.$refs.thumb;
const target = event.target;
if (target !== thumb) {
this.handleDrag(event);
}
},
handleDrag(event) {
const rect = this.$el.getBoundingClientRect();
const { thumb } = this.$refs;
if (!this.vertical) {
let left = event.clientX - rect.left;
left = Math.max(thumb.offsetWidth / 2, left);
left = Math.min(left, rect.width - thumb.offsetWidth / 2);
this.color.set('alpha', Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100));
} else {
let top = event.clientY - rect.top;
top = Math.max(thumb.offsetHeight / 2, top);
top = Math.min(top, rect.height - thumb.offsetHeight / 2);
this.color.set('alpha', Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 100));
}
},
getThumbLeft() {
if (this.vertical) return 0;
const el = this.$el;
const alpha = this.color._alpha;
if (!el) return 0;
const thumb = this.$refs.thumb;
return Math.round(alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100);
},
getThumbTop() {
if (!this.vertical) return 0;
const el = this.$el;
const alpha = this.color._alpha;
if (!el) return 0;
const thumb = this.$refs.thumb;
return Math.round(alpha * (el.offsetHeight - thumb.offsetHeight / 2) / 100);
},
getBackground() {
if (this.color && this.color.value) {
const { r, g, b } = this.color.toRgb();
return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
}
return null;
},
update() {
this.thumbLeft = this.getThumbLeft();
this.thumbTop = this.getThumbTop();
this.background = this.getBackground();
}
},
data() {
return {
thumbLeft: 0,
thumbTop: 0,
background: null
};
},
mounted() {
const { bar, thumb } = this.$refs;
const dragConfig = {
drag: (event) => {
this.handleDrag(event);
},
end: (event) => {
this.handleDrag(event);
}
};
draggable(bar, dragConfig);
draggable(thumb, dragConfig);
this.update();
}
};
</script>
examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue 0 → 100644
View file @ febdd3bb
<template>
<div class="el-color-predefine color-list-container">
<div class="el-color-predefine__colors color-list">
<div class="color-list-item"
:class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
v-for="(item, index) in rgbaColors"
:key="colors[index].variable"
@click="handleSelect(index)">
<span class="color-list-item-ball" :style="{'background-color': item.value}">
</span>
<div class="color-list-item-label">
{{item.info.label}}
</div>
<div class="color-list-item-value">
{{item.info.value}}
</div>
</div>
</div>
</div>
</template>
<style>
.color-list-container {
border-top: 1px solid #EBEEF5;
margin-top: 15px;
padding-top: 10px;
width: 100%;
}
.color-list {
max-height: 138px;
overflow: auto;
}
.color-list-item {
height: 24px;
width: 100%;
cursor: pointer;
margin: 2px 0;
}
.color-list-item:hover {
background: #efefef;
}
.color-list-item-ball {
height: 20px;
width: 20px;
margin-top: 2px;
margin-left: 5px;
border-radius: 100%;
display: inline-block;
}
.color-list-item-label {
margin-left: 15px;
font-size: 13px;
line-height: 24px;
display: inline-block;
vertical-align: super;
width: 30%;
}
.color-list-item-value {
margin-left: 15px;
font-size: 13px;
line-height: 24px;
display: inline-block;
vertical-align: super;
}
</style>
<script>
import Color from '../color';
export default {
props: {
colors: { type: Array, required: true },
color: { required: true }
},
data() {
return {
rgbaColors: this.parseColors(this.colors, this.color)
};
},
methods: {
handleSelect(index) {
this.color.fromString(this.colors[index].value);
this.$emit('select', this.colors[index]);
},
parseColors(colors, color) {
return colors.map(value => {
const c = new Color();
c.enableAlpha = true;
c.format = 'rgba';
c.fromString(value.value);
c.info = value;
c.selected = c.value === color.value;
return c;
});
}
},
watch: {
'$parent.currentColor'(val) {
const color = new Color();
color.fromString(val);
this.rgbaColors.forEach(item => {
item.selected = color.compare(item);
});
},
colors(newVal) {
this.rgbaColors = this.parseColors(newVal, this.color);
},
color(newVal) {
this.rgbaColors = this.parseColors(this.colors, newVal);
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/color-picker/src/components/hue-slider.vue 0 → 100644
View file @ febdd3bb
<template>
<div class="el-color-hue-slider" :class="{ 'is-vertical': vertical }">
<div class="el-color-hue-slider__bar" @click="handleClick" ref="bar"></div>
<div class="el-color-hue-slider__thumb"
:style="{
left: thumbLeft + 'px',
top: thumbTop + 'px'
}"
ref="thumb">
</div>
</div>
</template>
<script>
import draggable from '../draggable';
export default {
name: 'el-color-hue-slider',
props: {
color: {
required: true
},
vertical: Boolean
},
data() {
return {
thumbLeft: 0,
thumbTop: 0
};
},
computed: {
hueValue() {
const hue = this.color.get('hue');
return hue;
}
},
watch: {
hueValue() {
this.update();
}
},
methods: {
handleClick(event) {
const thumb = this.$refs.thumb;
const target = event.target;
if (target !== thumb) {
this.handleDrag(event);
}
},
handleDrag(event) {
const rect = this.$el.getBoundingClientRect();
const { thumb } = this.$refs;
let hue;
if (!this.vertical) {
let left = event.clientX - rect.left;
left = Math.min(left, rect.width - thumb.offsetWidth / 2);
left = Math.max(thumb.offsetWidth / 2, left);
hue = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 360);
} else {
let top = event.clientY - rect.top;
top = Math.min(top, rect.height - thumb.offsetHeight / 2);
top = Math.max(thumb.offsetHeight / 2, top);
hue = Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 360);
}
this.color.set('hue', hue);
},
getThumbLeft() {
if (this.vertical) return 0;
const el = this.$el;
const hue = this.color.get('hue');
if (!el) return 0;
const thumb = this.$refs.thumb;
return Math.round(hue * (el.offsetWidth - thumb.offsetWidth / 2) / 360);
},
getThumbTop() {
if (!this.vertical) return 0;
const el = this.$el;
const hue = this.color.get('hue');
if (!el) return 0;
const thumb = this.$refs.thumb;
return Math.round(hue * (el.offsetHeight - thumb.offsetHeight / 2) / 360);
},
update() {
this.thumbLeft = this.getThumbLeft();
this.thumbTop = this.getThumbTop();
}
},
mounted() {
const { bar, thumb } = this.$refs;
const dragConfig = {
drag: (event) => {
this.handleDrag(event);
},
end: (event) => {
this.handleDrag(event);
}
};
draggable(bar, dragConfig);
draggable(thumb, dragConfig);
this.update();
}
};
</script>
examples/components/theme-configurator/editor/color-picker/src/components/picker-dropdown.vue 0 → 100644
View file @ febdd3bb
<template>
<transition name="el-zoom-in-top" @after-leave="doDestroy">
<div
class="el-color-dropdown"
v-show="showPopper">
<div class="el-color-dropdown__main-wrapper">
<hue-slider ref="hue" :color="color" vertical style="float: right;"></hue-slider>
<sv-panel ref="sl" :color="color"></sv-panel>
</div>
<alpha-slider v-if="showAlpha" ref="alpha" :color="color"></alpha-slider>
<predefine v-if="predefine" :color="color" :colors="predefine"></predefine>
<div class="el-color-dropdown__btns">
<span class="el-color-dropdown__value">
<el-input
v-model="customInput"
@keyup.native.enter="handleConfirm"
@blur="handleConfirm"
:validate-event="false"
size="mini">
</el-input>
</span>
<!-- <el-button
size="mini"
type="text"
class="el-color-dropdown__link-btn"
@click="$emit('clear')">
{{ t('el.colorpicker.clear') }}
</el-button> -->
<el-button
plain
size="mini"
class="el-color-dropdown__btn"
@click="confirmValue">
{{ t('el.colorpicker.confirm') }}
</el-button>
</div>
<color-list
v-if="colorList && colorList.length > 0"
:color="color"
:colors="colorList"
@select=onColorListSelect
></color-list>
</div>
</transition>
</template>
<script>
import SvPanel from './sv-panel';
import HueSlider from './hue-slider';
import AlphaSlider from './alpha-slider';
import Predefine from './predefine';
import ColorList from './color-list';
import Popper from 'element-ui/src/utils/vue-popper';
import Locale from 'element-ui/src/mixins/locale';
import ElInput from 'element-ui/packages/input';
import ElButton from 'element-ui/packages/button';
export default {
name: 'el-color-picker-dropdown',
mixins: [Popper, Locale],
components: {
SvPanel,
HueSlider,
AlphaSlider,
ElInput,
ElButton,
Predefine,
ColorList
},
props: {
color: {
required: true
},
showAlpha: Boolean,
predefine: Array,
colorList: Array
},
data() {
return {
customInput: ''
};
},
computed: {
currentColor() {
const parent = this.$parent;
return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
}
},
methods: {
confirmValue() {
this.$emit('pick');
},
onColorListSelect(e) {
this.$emit('pick', e);
},
handleConfirm() {
this.color.fromString(this.customInput);
}
},
mounted() {
this.$parent.popperElm = this.popperElm = this.$el;
this.referenceElm = this.$parent.$el;
},
watch: {
showPopper(val) {
if (val === true) {
this.$nextTick(() => {
const { sl, hue, alpha } = this.$refs;
sl && sl.update();
hue && hue.update();
alpha && alpha.update();
});
}
},
currentColor: {
immediate: true,
handler(val) {
this.customInput = val;
}
}
}
};
</script>
examples/components/theme-configurator/editor/color-picker/src/components/predefine.vue 0 → 100644
View file @ febdd3bb
<template>
<div class="el-color-predefine">
<div class="el-color-predefine__colors">
<div class="el-color-predefine__color-selector"
:class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
v-for="(item, index) in rgbaColors"
:key="colors[index]"
@click="handleSelect(index)">
<div :style="{'background-color': item.value}">
</div>
</div>
</div>
</div>
</template>
<script>
import Color from '../color';
export default {
props: {
colors: { type: Array, required: true },
color: { required: true }
},
data() {
return {
rgbaColors: this.parseColors(this.colors, this.color)
};
},
methods: {
handleSelect(index) {
this.color.fromString(this.colors[index]);
},
parseColors(colors, color) {
return colors.map(value => {
const c = new Color();
c.enableAlpha = true;
c.format = 'rgba';
c.fromString(value);
c.selected = c.value === color.value;
return c;
});
}
},
watch: {
'$parent.currentColor'(val) {
const color = new Color();
color.fromString(val);
this.rgbaColors.forEach(item => {
item.selected = color.compare(item);
});
},
colors(newVal) {
this.rgbaColors = this.parseColors(newVal, this.color);
},
color(newVal) {
this.rgbaColors = this.parseColors(this.colors, newVal);
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/color-picker/src/components/sv-panel.vue 0 → 100644
View file @ febdd3bb
<template>
<div class="el-color-svpanel"
:style="{
backgroundColor: background
}">
<div class="el-color-svpanel__white"></div>
<div class="el-color-svpanel__black"></div>
<div class="el-color-svpanel__cursor"
:style="{
top: cursorTop + 'px',
left: cursorLeft + 'px'
}">
<div></div>
</div>
</div>
</template>
<script>
import draggable from '../draggable';
export default {
name: 'el-sl-panel',
props: {
color: {
required: true
}
},
computed: {
colorValue() {
const hue = this.color.get('hue');
const value = this.color.get('value');
return { hue, value };
}
},
watch: {
colorValue() {
this.update();
}
},
methods: {
update() {
const saturation = this.color.get('saturation');
const value = this.color.get('value');
const el = this.$el;
let { clientWidth: width, clientHeight: height } = el;
this.cursorLeft = saturation * width / 100;
this.cursorTop = (100 - value) * height / 100;
this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
},
handleDrag(event) {
const el = this.$el;
const rect = el.getBoundingClientRect();
let left = event.clientX - rect.left;
let top = event.clientY - rect.top;
left = Math.max(0, left);
left = Math.min(left, rect.width);
top = Math.max(0, top);
top = Math.min(top, rect.height);
this.cursorLeft = left;
this.cursorTop = top;
this.color.set({
saturation: left / rect.width * 100,
value: 100 - top / rect.height * 100
});
}
},
mounted() {
draggable(this.$el, {
drag: (event) => {
this.handleDrag(event);
},
end: (event) => {
this.handleDrag(event);
}
});
this.update();
},
data() {
return {
cursorTop: 0,
cursorLeft: 0,
background: 'hsl(0, 100%, 50%)'
};
}
};
</script>
examples/components/theme-configurator/editor/color-picker/src/draggable.js 0 → 100644
View file @ febdd3bb
import Vue from 'vue';
let isDragging = false;
export default function(element, options) {
if (Vue.prototype.$isServer) return;
const moveFn = function(event) {
if (options.drag) {
options.drag(event);
}
};
const upFn = function(event) {
document.removeEventListener('mousemove', moveFn);
document.removeEventListener('mouseup', upFn);
document.onselectstart = null;
document.ondragstart = null;
isDragging = false;
if (options.end) {
options.end(event);
}
};
element.addEventListener('mousedown', function(event) {
if (isDragging) return;
document.onselectstart = function() { return false; };
document.ondragstart = function() { return false; };
document.addEventListener('mousemove', moveFn);
document.addEventListener('mouseup', upFn);
isDragging = true;
if (options.start) {
options.start(event);
}
});
}
examples/components/theme-configurator/editor/color-picker/src/main.vue 0 → 100644
View file @ febdd3bb
<template>
<div
:class="[
'el-color-picker',
colorDisabled ? 'is-disabled' : '',
colorSize ? `el-color-picker--${ colorSize }` : ''
]"
v-clickoutside="hide">
<div class="el-color-picker__mask" v-if="colorDisabled"></div>
<div class="el-color-picker__trigger" @click="handleTrigger">
<span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
<span class="el-color-picker__color-inner"
:style="{
backgroundColor: displayedColor
}"></span>
<span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
</span>
<span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
</div>
<picker-dropdown
ref="dropdown"
:class="['el-color-picker__panel', popperClass || '']"
v-model="showPicker"
@pick="confirmValue"
@clear="clearValue"
:color="color"
:show-alpha="showAlpha"
:predefine="predefine"
:colorList="colorList">
</picker-dropdown>
</div>
</template>
<script>
import Color from './color';
import PickerDropdown from './components/picker-dropdown.vue';
import Clickoutside from 'element-ui/src/utils/clickoutside';
import Emitter from 'element-ui/src/mixins/emitter';
export default {
name: 'ElColorPicker',
mixins: [Emitter],
props: {
value: String,
showAlpha: Boolean,
colorFormat: String,
disabled: Boolean,
size: String,
popperClass: String,
predefine: Array,
colorList: Array
},
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},
directives: { Clickoutside },
computed: {
displayedColor() {
if (!this.value && !this.showPanelColor) {
return 'transparent';
}
return this.displayedRgb(this.color, this.showAlpha);
},
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
colorSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
colorDisabled() {
return this.disabled || (this.elForm || {}).disabled;
}
},
watch: {
value(val) {
if (!val) {
this.showPanelColor = false;
} else if (val && val !== this.color.value) {
this.color.fromString(val);
}
},
color: {
deep: true,
handler() {
this.showPanelColor = true;
}
},
displayedColor(val) {
if (!this.showPicker) return;
const currentValueColor = new Color({
enableAlpha: this.showAlpha,
format: this.colorFormat
});
currentValueColor.fromString(this.value);
const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
if (val !== currentValueColorRgb) {
this.$emit('active-change', val);
}
}
},
methods: {
handleTrigger() {
if (this.colorDisabled) return;
this.showPicker = !this.showPicker;
},
confirmValue(selection) {
const value = selection || this.color.value;
this.$emit('input', value);
this.$emit('change', value);
this.dispatch('ElFormItem', 'el.form.change', value);
this.showPicker = false;
},
clearValue() {
this.$emit('input', null);
this.$emit('change', null);
if (this.value !== null) {
this.dispatch('ElFormItem', 'el.form.change', null);
}
this.showPanelColor = false;
this.showPicker = false;
this.resetColor();
},
hide() {
this.showPicker = false;
this.resetColor();
},
resetColor() {
this.$nextTick(_ => {
if (this.value) {
this.color.fromString(this.value);
} else {
this.showPanelColor = false;
}
});
},
displayedRgb(color, showAlpha) {
if (!(color instanceof Color)) {
throw Error('color should be instance of Color Class');
}
const { r, g, b } = color.toRgb();
return showAlpha
? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
: `rgb(${ r }, ${ g }, ${ b })`;
}
},
mounted() {
const value = this.value;
if (value) {
this.color.fromString(value);
}
this.popperElm = this.$refs.dropdown.$el;
},
data() {
const color = new Color({
enableAlpha: this.showAlpha,
format: this.colorFormat
});
return {
color,
showPicker: false,
showPanelColor: false
};
},
components: {
PickerDropdown
}
};
</script>
examples/components/theme-configurator/editor/color.vue 0 → 100644
View file @ febdd3bb
<template>
<section class="config" :key="displayName">
<div class="config-label">
{{displayName}}
</div>
<div class="config-content">
<div class="content-80">
<el-input
:value=displayValue
readonly
slot="reference"
@click.native="onInputClick"
></el-input>
</div>
<div class="content-20">
<color-picker
ref="colorPicker"
class="colorPicker"
v-model="pickerColor"
@change=onPickerChange
:colorList="golbalColorList"
></color-picker>
</div>
</div>
</section>
</template>
<style>
input {
cursor: pointer;
}
.colorPicker {
margin-left: 10px;
vertical-align: bottom;
}
</style>
<script>
import Mixin from './mixin';
import { getStyleDisplayValue, getStyleDisplayName } from '../utils/utils.js';
import ColorPicker from './color-picker';
export default {
components: {
ColorPicker
},
data() {
return {
pickerColor: ''
};
},
mixins: [Mixin],
watch: {
displayValue: {
immediate: true,
handler(value) {
if (value.startsWith('#')) {
this.pickerColor = value;
}
}
}
},
computed: {
golbalColor() {
return this.golbalValue.color;
},
displayValue() {
return getStyleDisplayValue(this.mergedValue, this.golbalColor);
},
golbalColorList() {
return this.isGlobal ? [] : Object.keys(this.golbalColor).map((c) => (
{
label: getStyleDisplayName(this.golbalColor[c]),
value: this.golbalColor[c].value,
variable: c
}
));
}
},
methods: {
onInputClick() {
this.$refs.colorPicker && this.$refs.colorPicker.handleTrigger();
},
onPickerChange(e) {
this.onChange(e.variable || e);
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/fontLineHeight.vue 0 → 100644
View file @ febdd3bb
<template>
<section class="config" :key="displayName">
<div class="config-label">
{{displayName}}
</div>
<div class="config-content">
<el-select
v-model="value"
class="select"
@change="onSelectChange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</section>
</template>
<style>
.select {
width: 100%;
}
</style>
<script>
const defaultFontLineHeight = [
'1',
'1.3',
'1.5',
'1.7',
'12px',
'16px',
'20px',
'24px',
'28px'
];
import Mixin from './mixin';
import { getStyleDisplayName } from '../utils/utils.js';
export default {
props: {
componentName: {
type: String
},
golbalValue: {
type: Object
}
},
data() {
return {
options: [],
value: ''
};
},
mixins: [Mixin],
computed: {
isGlobalInputValue() {
return this.config.value.startsWith('$');
}
},
methods: {
onSelectChange(e) {
this.onChange(e);
},
initSelectOption() {
this.options = [];
defaultFontLineHeight.forEach((size) => {
this.options.push({
value: size,
label: size
});
});
const golbalTypography = this.golbalValue.typography;
if (this.isGlobalInputValue && golbalTypography) {
Object.keys(golbalTypography).forEach((font) => {
if (font.includes('font-line-height')) {
const size = golbalTypography[font];
this.options.push({
value: size.key,
label: getStyleDisplayName(size)
});
}
});
}
}
},
watch: {
'mergedValue': {
immediate: true,
handler(value) {
this.initSelectOption();
this.value = this.mergedValue;
}
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/fontSize.vue 0 → 100644
View file @ febdd3bb
<template>
<section class="config" :key="displayName">
<div class="config-label">
{{displayName}}
</div>
<div class="config-content">
<el-select
v-model="value"
class="select"
@change="onSelectChange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</section>
</template>
<style>
.select {
width: 100%;
}
</style>
<script>
const defaultFontSize = [
'12px',
'13px',
'14px',
'16px',
'18px',
'20px',
'28px',
'36px',
'48px'
];
import Mixin from './mixin';
import { getStyleDisplayName } from '../utils/utils.js';
export default {
props: {
componentName: {
type: String
},
golbalValue: {
type: Object
}
},
data() {
return {
options: [],
value: ''
};
},
mixins: [Mixin],
computed: {
isGlobalInputValue() {
return this.config.value.startsWith('$');
}
},
methods: {
onSelectChange(e) {
this.onChange(e);
},
initSelectOption() {
this.options = [];
defaultFontSize.forEach((size) => {
this.options.push({
value: size,
label: size
});
});
const golbalTypography = this.golbalValue.typography;
if (this.isGlobalInputValue && golbalTypography) {
Object.keys(golbalTypography).forEach((font) => {
if (font.includes('font-size')) {
const size = golbalTypography[font];
this.options.push({
value: size.key,
label: getStyleDisplayName(size)
});
}
});
}
}
},
watch: {
'mergedValue': {
immediate: true,
handler(value) {
this.initSelectOption();
this.value = this.mergedValue;
}
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/fontWeight.vue 0 → 100644
View file @ febdd3bb
<template>
<section class="config" :key="displayName">
<div class="config-label">
{{displayName}}
</div>
<div class="config-content">
<el-select
v-model="value"
class="select"
@change="onSelectChange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</section>
</template>
<style>
.select {
width: 100%;
}
</style>
<script>
const defaultFontWeight = [
'normal',
'bold',
'bolder',
'lighter',
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900',
'inherit'
];
import Mixin from './mixin';
import { getStyleDisplayName } from '../utils/utils.js';
export default {
props: {
componentName: {
type: String
},
golbalValue: {
type: Object
}
},
data() {
return {
options: [],
value: ''
};
},
mixins: [Mixin],
computed: {
isGlobalInputValue() {
return this.config.value.startsWith('$');
}
},
methods: {
onSelectChange(e) {
this.onChange(e);
},
initSelectOption() {
this.options = [];
defaultFontWeight.forEach((weight) => {
this.options.push({
value: weight,
label: weight
});
});
const golbalTypography = this.golbalValue.typography;
if (this.isGlobalInputValue && golbalTypography) {
Object.keys(golbalTypography).forEach((font) => {
if (font.includes('font-weight')) {
const weight = golbalTypography[font];
this.options.push({
value: weight.key,
label: getStyleDisplayName(weight)
});
}
});
}
}
},
watch: {
'mergedValue': {
immediate: true,
handler(value) {
this.initSelectOption();
this.value = this.mergedValue;
}
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/input.vue 0 → 100644
View file @ febdd3bb
<template>
<el-input
@keyup.enter.native="onUpdate"
v-model="value"
@blur="onUpdate"
v-bind="$attrs"
>
<template slot="suffix">
<slot name="suffix"></slot>
</template>
</el-input>
</template>
<script>
export default {
props: ['val', 'onChange'],
data() {
return {
value: '',
oldValue: ''
};
},
methods: {
onUpdate(e) {
const { value } = e.target;
if (value !== this.oldValue) {
this.oldValue = value;
this.$emit('change', value);
}
}
},
watch: {
val: {
immediate: true,
handler(value) {
this.value = value;
if (!this.oldValue) {
this.oldValue = value;
}
}
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/mixin.vue 0 → 100644
View file @ febdd3bb
<style>
.config {
padding: 5px 0;
}
.config-label {
color: #606266;;
font-size: 14px;
padding-bottom: 5px;
position: relative;
}
.config-content {
}
.content-80 {
box-sizing: border-box;
display: inline-block;
width: 80%;
}
.content-20 {
box-sizing: border-box;
display: inline-block;
width: 20%;
vertical-align: bottom;
}
.content-10 {
box-sizing: border-box;
display: inline-block;
width: 10%;
vertical-align: bottom;
}
.content-15 {
box-sizing: border-box;
display: inline-block;
width: 15%;
vertical-align: bottom;
}
</style>
<script>
import { getStyleDisplayName } from '../utils/utils.js';
export default {
props: {
config: {
type: Object
},
userConfig: {
type: Object
},
golbalValue: {
type: Object
},
componentName: {
type: String
}
},
computed: {
mergedValue() {
return this.userConfig[this.config.key] || this.config.value;
},
displayName() {
return getStyleDisplayName(this.config, this.componentName);
},
isGlobal() {
return !this.config.value.startsWith('$');
}
},
methods: {
onChange(value) {
this.$emit('onChange', {
key: this.config.key,
value
});
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/editor/simpleText.vue 0 → 100644
View file @ febdd3bb
<template>
<section class="config" :key="displayName">
<div class="config-label">
{{displayName}}
</div>
<div class="config-content">
<theme-input
:val="value"
@change="onChange"
></theme-input>
</div>
</section>
</template>
<script>
import Input from './input';
import Mixin from './mixin';
export default {
components: {
themeInput: Input
},
data() {
return {
value: ''
};
},
mixins: [Mixin],
watch: {
'mergedValue': {
immediate: true,
handler(value) {
this.value = this.mergedValue;
}
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/index.vue 0 → 100644
View file @ febdd3bb
<template>
<div>
<el-button
round
type="primary"
size="mini"
@click.stop="showConfigurator"
>{{getActionDisplayName("theme-editor")}}</el-button>
<transition name="fade">
<div v-show="visible" class="configurator" ref="configurator">
<div
class="main-configurator"
ref="mainConfigurator"
>
<div v-if="currentConfig">
<main-panel
:currentConfig="currentConfig"
:defaultConfig="defaultConfig"
:userConfig="userConfig"
:globalValue="globalValue"
@onChange="userConfigChange"
></main-panel>
</div>
<div v-if="init && !currentConfig" class="no-config">
<img src="../../assets/images/theme-no-config.png" alt>
<span>{{getActionDisplayName("no-config")}}</span>
</div>
<download-area></download-area>
</div>
</div>
</transition>
</div>
</template>
<style>
.configurator {
height: 100%;
width: 24%;
max-width: 400px;
position: fixed;
overflow-y: auto;
top: 79px;
right: 0;
bottom: 0;
background: #fff;
color: #666;
line-height: 24px;
padding-right: 1%;
}
.configurator .main-configurator {
height: 100%;
overflow: auto;
background: #F5F7FA;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.06);
border-radius: 8px;
width: 97%;
box-sizing: border-box;
margin: 0 .5% 0 5%;
}
.no-config {
margin-top: 130px;
text-align: center;
img {
width: 50%;
display: block;
margin: 0 auto;
}
span {
margin-top: 10px;
display: block;
color: #909399;
font-size: 14px;
}
}
.fade-enter,.fade-leave-to {
transform:translateX(100%);
}
.fade-enter-active ,.fade-leave-active {
transition:all 0.3s ease;
}
@media (min-width: 1600px) {
.configurator {
padding-right: calc((100% - 1600px) / 2);
}
}
</style>
<script>
import bus from '../../bus';
import { getVars, updateVars } from './utils/api.js';
import mainPanel from './main';
import {
filterConfigType,
filterGlobalValue,
updateDomHeadStyle,
getActionDisplayName
} from './utils/utils.js';
import DocStyle from './docStyle';
import Loading from './loading';
import DownloadArea from './download';
export default {
components: {
mainPanel,
DownloadArea
},
data() {
return {
init: false,
visible: false,
defaultConfig: null,
currentConfig: null,
userConfig: {
global: {},
local: {}
},
lastApply: 0
};
},
mixins: [DocStyle, Loading],
computed: {
globalValue() {
return filterGlobalValue(this.defaultConfig, this.userConfig);
}
},
methods: {
getActionDisplayName(key) {
return getActionDisplayName(key);
},
showConfigurator() {
this.visible = !this.visible;
bus.$emit('user-theme-config-visible', this.visible);
window.userThemeConfigVisible = Boolean(this.visible);
if (this.init) return;
this.$nextTick(() => {
const loading = this.$loading({
target: this.$refs.configurator
});
let defaultConfig;
getVars()
.then((res) => {
defaultConfig = res;
})
.catch((err) => {
this.onError(err);
})
.then(() => {
setTimeout(() => {
if (defaultConfig) {
this.defaultConfig = defaultConfig;
this.filterCurrentConfig();
this.init = true;
}
loading.close();
}, 300); // action after transition
});
});
},
filterCurrentConfig() {
this.currentConfig = this.defaultConfig.find((config) => {
return config.name === this.$route.path.split('/').pop().toLowerCase();
});
},
userConfigChange(e) {
this.$set(this.userConfig[filterConfigType(this.currentConfig.name)], e.key, e.value);
this.onAction();
},
applyStyle(res, time) {
if (time < this.lastApply) return;
this.updateDocs();
updateDomHeadStyle('chalk-style', res);
this.lastApply = time;
},
onDownload() {
return updateVars(Object.assign({}, this.userConfig, {download: true}), (xhr) => {
xhr.responseType = 'blob';
});
},
onReset() {
this.userConfig = {
global: {},
local: {}
};
this.onAction();
},
onAction() {
this.triggerComponentLoading(true);
const time = +new Date();
updateVars(this.userConfig)
.then((res) => {
this.applyStyle(res, time);
})
.catch((err) => {
this.onError(err);
})
.then(() => {
this.triggerComponentLoading(false);
});
},
onError(err) {
let message;
try {
message = JSON.parse(err).message;
} catch (e) {
message = err;
}
this.$message.error(message);
},
triggerComponentLoading(val) {
bus.$emit('user-theme-config-loading', val);
},
updateDocs() {
window.userThemeConfig = JSON.parse(JSON.stringify(this.userConfig));
bus.$emit('user-theme-config-update', this.userConfig);
this.updateDocStyle(this.userConfig);
}
},
watch: {
'$route.path'() {
this.defaultConfig && this.filterCurrentConfig();
if (!this.$refs.mainConfigurator) return;
this.$nextTick(() => {
this.$refs.mainConfigurator.scrollTop = 0;
});
}
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/loading.vue 0 → 100644
View file @ febdd3bb
<style>
.loadingClass {
z-index: 0!important;
.el-loading-spinner {
top: 0%;
margin-top: 30%;
}
}
</style>
<script>
import bus from '../../bus.js';
import './progress.js';
export default {
data() {
return {
count: 0
};
},
created() {
bus.$on('user-theme-config-loading', val => {
if (val) {
this.count++;
if (this.count > 1) return;
this.$bar.start();
} else {
this.count--;
if (this.count) return;
this.$bar.finish();
}
});
}
};
</script>
examples/components/theme-configurator/main.vue 0 → 100644
View file @ febdd3bb
<template>
<div class="main">
<!-- <span>{{configName}}</span> -->
<div v-for="(config, key) in configByOrder" :key="key">
<span
v-if="showCategory(config.category, key + 1)"
class="category-name"
>
{{getCategoryDisplayName(config.category)}}
</span>
<component
:is="editorComponent(config.type)"
:componentName=configName
:config=config
:userConfig=userConfigByType
:golbalValue=globalValue
@onChange=onChange
>
</component>
</div>
</div>
</template>
<style>
.main {
margin-bottom: 140px;
padding: 10px;
}
.category-name {
color: #C0C4CC;
font-size: 18px;
display: block;
margin: 8px 0 4px 0;
}
</style>
<script>
import ColorEditor from './editor/color';
import fontWeightEditor from './editor/fontWeight';
import fontSizeEditor from './editor/fontSize';
import fontLineHeightEditor from './editor/fontLineHeight';
import borderRadiusEditor from './editor/borderRadius';
import boxShadowEditor from './editor/boxShadow';
import simpleTextEditor from './editor/simpleText';
import { filterConfigType, getCategoryDisplayName } from './utils/utils.js';
export default {
components: {
ColorEditor,
fontSizeEditor,
fontLineHeightEditor,
simpleTextEditor,
borderRadiusEditor,
boxShadowEditor,
fontWeightEditor
},
props: {
defaultConfig: {
type: Array
},
currentConfig: {
type: Object
},
userConfig: {
type: Object
},
globalValue: {
type: Object
}
},
computed: {
configName() {
return this.currentConfig.name;
},
userConfigByType() {
return this.userConfig[filterConfigType(this.configName)];
},
configByOrder() {
return this.currentConfig.config.sort((a, b) => (a.order - b.order));
}
},
methods: {
getCategoryDisplayName(key) {
return getCategoryDisplayName(key);
},
editorComponent(type) {
switch (type) {
case 'color':
return ColorEditor;
case 'fontWeight':
return fontWeightEditor;
case 'fontSize':
return fontSizeEditor;
case 'fontLineHeight':
return fontLineHeightEditor;
case 'borderRadius':
return borderRadiusEditor;
case 'boxShadow':
return boxShadowEditor;
default:
return simpleTextEditor;
}
},
onChange(e) {
this.$emit('onChange', e);
},
showCategory(name, key) {
if (!name) {
return false;
}
if (!this.categoryDisplay[name] || this.categoryDisplay[name] === key) {
this.categoryDisplay[name] = key;
return true;
}
return false;
}
},
data() {
return {
categoryDisplay: {}
};
}
};
</script>
\ No newline at end of file
examples/components/theme-configurator/progress.js 0 → 100644
View file @ febdd3bb
import Vue from 'vue';
import ProgressBar from './progress.vue';
Vue.prototype.$bar = new Vue(ProgressBar).$mount();
document.body.appendChild(Vue.prototype.$bar.$el);
examples/components/theme-configurator/progress.vue 0 → 100644
View file @ febdd3bb
<template>
<div class="progress" :style="{
'width': percent+'%',
'height': height,
'background-color': canSuccess? successColor() : failedColor(),
'opacity': show ? 1 : 0
}"></div>
</template>
<script>
/* eslint-disable */
export default {
data () {
return {
percent: 0,
show: false,
canSuccess: true,
duration: 3000,
height: '2px'
}
},
methods: {
successColor() {
return this.userSelectColor()['$--color-primary'] || '#409EFF';
},
failedColor() {
return this.userSelectColor()['$--color-danger'] || '#F56C6C';
},
userSelectColor() {
return window.userThemeConfig && window.userThemeConfig.global || {}
},
start () {
this.show = true
this.canSuccess = true
if (this._timer) {
clearInterval(this._timer)
this.percent = 0
}
// Code from Nuxt.js!
this._cut = 10000 / Math.floor(this.duration)
this._timer = setInterval(() => {
this.increase(this._cut * Math.random())
if (this.percent >= 90) {
this.percent = 90;
}
}, 100)
return this
},
set (num) {
this.show = true
this.canSuccess = true
this.percent = Math.floor(num)
return this
},
get () {
return Math.floor(this.percent)
},
increase (num) {
this.percent = this.percent + Math.floor(num)
return this
},
decrease (num) {
this.percent = this.percent - Math.floor(num)
return this
},
finish () {
this.percent = 100
this.hide()
return this
},
pause () {
clearInterval(this._timer)
return this
},
hide () {
clearInterval(this._timer)
this._timer = null
setTimeout(() => {
this.show = false
this.$nextTick(() => {
setTimeout(() => {
this.percent = 0
}, 200)
})
}, 500)
return this
},
fail () {
this.canSuccess = false
return this
}
}
}
</script>
<style scoped>
.progress {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 2px;
width: 0%;
transition: width 0.2s, opacity 0.4s;
opacity: 1;
z-index: 999999;
}
</style>
\ No newline at end of file
examples/components/theme-configurator/utils/ajax.js 0 → 100644
View file @ febdd3bb
const defaultError = 'Server Error 500';
const defaultTimeout = 'Request Timeout';
const xhr = (method, url, data = null, cb) => {
return new window.Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
const doReject = (xhr) => {
reject(xhr.response || xhr.statusText || defaultError);
};
xhr.open(method, url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.timeout = 10000;
if (cb) cb(xhr);
xhr.onload = () => {
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
let response = xhr.response;
const type = xhr.getResponseHeader('Content-Type');
if (type.indexOf('zip') > -1) {
let filename = 'style.zip';
const disposition = xhr.getResponseHeader('content-disposition');
if (disposition && disposition.indexOf('attachment') !== -1) {
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
var matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) {
filename = matches[1].replace(/['"]/g, '');
}
}
var blob = new Blob([response], { type });
var zipUrl = URL.createObjectURL(blob);
var link = document.createElement('a');
link.href = zipUrl;
link.download = filename;
link.click();
resolve(response);
return;
}
try {
response = JSON.parse(xhr.response);
} catch (e) {}
resolve(response);
} else {
doReject(xhr);
}
} else {
doReject(xhr);
}
};
xhr.onerror = () => {
doReject(xhr);
};
xhr.ontimeout = () => {
xhr.abort();
reject(defaultTimeout);
};
xhr.send(JSON.stringify(data));
});
};
export const post = (url, data, cb) => {
return xhr('POST', url, data, cb);
};
export const get = (url) => {
return xhr('GET', url);
};
examples/components/theme-configurator/utils/api.js 0 → 100644
View file @ febdd3bb
import Element from 'main/index.js';
import { post, get } from './ajax';
const { version } = Element;
const hostList = {
local: 'http://localhost:3008/',
alpha: 'https://ssr.alpha.elenet.me/element-theme-server/',
production: 'https://ssr.elenet.me/element-theme-server/'
};
const host = hostList[process.env.FAAS_ENV] || hostList.production;
export const getVars = () => {
return get(`${host}getVariable?version=${version}`);
};
export const updateVars = (data, cb) => {
return post(`${host}updateVariable?version=${version}`, data, cb);
};
examples/components/theme-configurator/utils/boxShadow.js 0 → 100644
View file @ febdd3bb
const VALUES_REG = /,(?![^\(]*\))/;
const PARTS_REG = /\s(?![^(]*\))/;
const LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;
const parseValue = str => {
const parts = str.split(PARTS_REG);
const inset = parts.includes('inset');
const last = parts.slice(-1)[0];
const color = !isLength(last) ? last : undefined;
const nums = parts
.filter(n => n !== 'inset')
.filter(n => n !== color)
.map(toNum);
const [ offsetX, offsetY, blurRadius, spreadRadius ] = nums;
return {
inset,
offsetX,
offsetY,
blurRadius,
spreadRadius,
color
};
};
const stringifyValue = obj => {
const {
inset,
offsetX = 0,
offsetY = 0,
blurRadius = 0,
spreadRadius,
color
} = obj || {};
return [
(inset ? 'inset' : null),
offsetX,
offsetY,
blurRadius,
spreadRadius,
color
].filter(v => v !== null && v !== undefined)
.map(toPx)
.map(s => ('' + s).trim())
.join(' ');
};
const isLength = v => v === '0' || LENGTH_REG.test(v);
const toNum = v => {
if (!/px$/.test(v) && v !== '0') return v;
const n = parseFloat(v);
return !isNaN(n) ? n : v;
};
const toPx = n => typeof n === 'number' && n !== 0 ? (n + 'px') : n;
export const parse = str => str.split(VALUES_REG).map(s => s.trim()).map(parseValue);
export const stringify = arr => arr.map(stringifyValue).join(', ');
examples/components/theme-configurator/utils/utils.js 0 → 100644
View file @ febdd3bb
import deepmerge from 'deepmerge';
import constant from '../../../i18n/theme-editor.json';
export const filterConfigType = (name) => {
switch (name) {
case 'color':
case 'typography':
case 'border':
return 'global';
default:
return 'local';
}
};
export const filterGlobalValue = (defaultConfig, userConfig) => {
const valueObject = {};
const globalArr = ['color', 'typography', 'border'];
globalArr.forEach((global) => {
const configObj = {};
defaultConfig
.find(config => (config.name === global))
.config.forEach(c => (configObj[c.key] = deepmerge({}, c)));
valueObject[global] = configObj;
Object.keys(configObj).forEach((c) => {
if (userConfig.global[c]) {
configObj[c].value = userConfig.global[c];
}
});
});
return valueObject;
};
export const getStyleDisplayValue = (displayValue, global) => {
if (displayValue.startsWith('$')) {
return global[displayValue].value;
}
return displayValue;
};
const getLang = () => {
return location.hash.replace('#', '').split('/')[1] || 'zh-CN';
};
const getNameFromI18N = (name) => {
const lang = getLang();
return constant.filter(config => config.lang === lang)[0][name];
};
export const getStyleDisplayName = (config, componentName) => {
const displayNameMap = getNameFromI18N('display-name');
if (config.name !== '[]') {
const langIndex = {'zh-CN': '0', 'es': 2, 'fr-FR': 3}[getLang()] || 1;
const nameArr = config.name.replace(/\[?\]?/g, '').split(',');
return nameArr[langIndex] || nameArr[1];
}
let displayName = config.key.replace(`$--${componentName}-`, '').replace();
Object.keys(displayNameMap).forEach((name) => {
displayName = displayName.replace(name, displayNameMap[name]);
});
displayName = displayName.replace(/-/g, ' ');
return displayName.trim();
};
export const getActionDisplayName = (key) => {
return getNameFromI18N('action')[key] || key;
};
export const getCategoryDisplayName = (key) => {
return getNameFromI18N('category')[key] || key;
};
export const updateDomHeadStyle = (id, styleContent) => {
let styleTag = document.getElementById(id);
if (!styleTag) {
styleTag = document.createElement('style');
styleTag.setAttribute('id', id);
document.head.appendChild(styleTag);
}
styleTag.innerText = styleContent.replace(/@font-face{[^}]+}/, '');
};
examples/docs/en-US/border.md 0 → 100644
View file @ febdd3bb
<script>
import bus from '../../bus';
const varMap = {
'$--box-shadow-light': 'boxShadowLight',
'$--box-shadow-base': 'boxShadowBase',
'$--border-radius-base': 'borderRadiusBase',
'$--border-radius-small': 'borderRadiusSmall'
};
const original = {
boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
borderRadiusBase: '4px',
borderRadiusSmall: '2px'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
boxShadowLight: '',
boxShadowBase: '',
borderRadiusBase: '',
borderRadiusSmall: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(varMap).forEach((c) => {
if (value[c]) {
this[varMap[c]] = value[c]
} else {
this[varMap[c]] = original[varMap[c]]
}
});
}
}
}
}
</script>
<style>
.demo-border .text {
width: 15%;
}
.demo-border .line {
width: 70%;
}
.demo-border .line div{
width: 100%;
height: 0;
border: 1px solid #EEE;
}
.demo-border .line .dashed{
border: 2px dashed #EEE;
}
.demo-shadow {
height: 100px;
width: 50%;
border: 1px solid #eee;
}
.demo-shadow-text {
line-height: 50px;
color: #666;
font-size: 14px;
}
.demo-radius .title{
color: #666;
font-size: 18px;
margin: 10px 0;
}
.demo-radius .value{
color: #333;
font-size: 16px;
margin: 10px 0;
}
.demo-radius .radius {
height: 60px;
width: 70%;
border: 1px solid #D7DAE2;
border-radius: 0;
margin-top: 20px;
}
.demo-radius .radius-30 {
border-radius: 30px;
}
</style>
## Border
We standardize the borders that can be used in buttons, cards, pop-ups and other components.
### Border
There are few border styles to choose.
<table class="demo-border">
<tbody>
<tr>
<td class="text">Name</td>
<td class="text">Thickness</td>
<td class="line">Demo</td>
</tr>
<tr>
<td class="text">Solid</td>
<td class="text">1px</td>
<td class="line">
<div></div>
</td>
</tr>
<tr>
<td class="text">Dashed</td>
<td class="text">2px</td>
<td class="line">
<div class="dashed"></div>
</td>
</tr>
</tbody>
</table>
### Radius
There are few radius styles to choose.
<el-row :gutter="12" class="demo-radius">
<el-col :span="6" :xs="{span: 12}">
<div class="title">No Radius</div>
<div class="value">border-radius: 0px</div>
<div class="radius"></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Small Radius</div>
<div class="value">border-radius: {{borderRadiusSmall}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusSmall }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Large Radius</div>
<div class="value">border-radius: {{borderRadiusBase}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusBase }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Round Radius</div>
<div class="value">border-radius: 30px</div>
<div class="radius radius-30"></div>
</el-col>
</el-row>
### Shadow
There are few shaodw styles to choose.
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowBase }"
></div>
<span class="demo-shadow-text">Basic Shaodw box-shadow: {{boxShadowBase}}</span>
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowLight }"
></div>
<span class="demo-shadow-text">Light Shadow box-shadow: {{boxShadowLight}}</span>
examples/docs/en-US/color.md
View file @ febdd3bb
<script>
import bus from '../../bus';
import { tintColor } from '../../color.js';
const varMap = {
'primary': '$--color-primary',
'success': '$--color-success',
'warning': '$--color-warning',
'danger': '$--color-danger',
'info': '$--color-info',
'white': '$--color-white',
'black': '$--color-black',
'textPrimary': '$--color-text-primary',
'textRegular': '$--color-text-regular',
'textSecondary': '$--color-text-secondary',
'textPlaceholder': '$--color-text-placeholder',
'borderBase': '$--border-color-base',
'borderLight': '$--border-color-light',
'borderLighter': '$--border-color-lighter',
'borderExtraLight': '$--border-color-extra-light'
};
const original = {
primary: '#409EFF',
success: '#67C23A',
warning: '#E6A23C',
danger: '#F56C6C',
info: '#909399',
white: '#FFFFFF',
black: '#000000',
textPrimary: '#303133',
textRegular: '#606266',
textSecondary: '#909399',
textPlaceholder: '#C0C4CC',
borderBase: '#DCDFE6',
borderLight: '#E4E7ED',
borderLighter: '#EBEEF5',
borderExtraLight: '#F2F6FC'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
primary: '',
success: '',
warning: '',
danger: '',
info: '',
white: '',
black: '',
textPrimary: '',
textRegular: '',
textSecondary: '',
textPlaceholder: '',
borderBase: '',
borderLight: '',
borderLighter: '',
borderExtraLight: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(original).forEach((o) => {
if (value[varMap[o]]) {
this[o] = value[varMap[o]]
} else {
this[o] = original[o]
}
});
}
}
},
}
</script>
<style>
.demo-color-box {
position: relative;
border-radius: 4px;
padding: 20px;
margin: 5px 0;
height: 74px;
height: 114px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
......@@ -14,6 +106,12 @@
line-height: 24px;
}
}
.demo-color-box-other {
height: 74px;
margin: 10px 0!important;
border-radius: 4px 4px 4px 4px!important;
padding: 15px 20px;
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
......@@ -26,55 +124,48 @@
border-radius: 0 0 4px 4px;
}
}
.bg-blue {
background-color: #409EFF;
}
.bg-success {
background-color: #13CE66;
.bg-color-sub {
width: 100%;
height: 40px;
left: 0;
bottom: 0;
position: absolute;
border-radius: 0 0 4px 4px;
}
.bg-warning {
background-color: #f7ba2a;
.bg-blue-sub-item {
width: 11.1111111%;
height: 100%;
display: inline-block;
}
.bg-danger {
background-color: #ff4949;
.bg-blue-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-info {
background-color: #909399;
}
.bg-text-primary {
background-color: #303133;
}
.bg-text-regular {
background-color: #606266;
}
.bg-text-secondary {
background-color: #909399;
}
.bg-text-placeholder {
background-color: #c0c4cc;
}
.bg-border-base {
background-color: #dcdfe6;
.bg-success-sub-item {
width: 50%;
height: 100%;
display: inline-block;
}
.bg-border-light {
background-color: #e4e7ed;
.bg-success-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-border-lighter {
background-color: #ebeef5;
.bg-success-sub-item:last-child {
border-radius: 0 0 4px 0;
}
.bg-border-extra-light {
background-color: #f2f6fc;
.bg-transparent {
border: 1px solid #FCC3C3;
color: #303133;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
}
[class*=" bg-border-"] {
.demo-color-box-lite {
color: #303133;
}
</style>
## Color
Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
### Main Color
......@@ -82,8 +173,24 @@ Element uses a specific set of palettes to specify colors to provide a consisten
The main color of Element is bright and friendly blue.
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
<el-col :span="10" :xs="{span: 12}">
<div
class="demo-color-box"
:style="{ background: primary }"
>
Brand Color<div class="value">#409EFF</div>
<div
class="bg-color-sub"
:style="{ background: tintColor(primary, 0.9) }"
>
<div
class="bg-blue-sub-item"
v-for="(item, key) in Array(8)"
:key="key"
:style="{ background: tintColor(primary, (key + 1) / 10) }"
>
</div>
</div>
</el-col>
</el-row>
......@@ -93,16 +200,72 @@ Besides the main color, you need to use different scene colors in different scen
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
<div class="demo-color-box"
:style="{ background: success }"
>Success<div class="value">#67C23A</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(success, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
<div class="demo-color-box"
:style="{ background: warning }"
>Warning<div class="value">#E6A23C</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(warning, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
<div class="demo-color-box"
:style="{ background: danger }"
>Danger<div class="value">#F56C6C</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(danger, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
<div class="demo-color-box"
:style="{ background: info }"
>Info<div class="value">#909399</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(info, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
</el-row>
......@@ -113,18 +276,48 @@ Neutral colors are for text, background and border colors. You can use different
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box bg-text-primary">Primary Text<div class="value">#303133</div></div>
<div class="demo-color-box bg-text-regular">Regular Text<div class="value">#606266</div></div>
<div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#909399</div></div>
<div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#C0C4CC</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPrimary }"
>Primary Text<div class="value">{{textPrimary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textRegular }"
>
Regular Text<div class="value">{{textRegular}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textSecondary }"
>Secondary Text<div class="value">{{textSecondary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPlaceholder }"
>Placeholder Text<div class="value">{{textPlaceholder}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderBase }"
>Base Border<div class="value">{{borderBase}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLight }"
>Light Border<div class="value">{{borderLight}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLighter }"
>Lighter Border<div class="value">{{borderLighter}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderExtraLight }"
>Extra Light Border<div class="value">{{borderExtraLight}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box bg-border-base">Base Border<div class="value">#DCDFE6</div></div>
<div class="demo-color-box bg-border-light">Light Border<div class="value">#E4E7ED</div></div>
<div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#EBEEF5</div></div>
<div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#F2F6FC</div></div>
<div
class="demo-color-box demo-color-box-other"
:style="{ background: black }"
>Basic Black<div class="value">{{black}}</div></div>
<div
class="demo-color-box demo-color-box-other"
:style="{ background: white, color: '#303133', border: '1px solid #eee' }"
>Basic White<div class="value">{{white}}</div></div>
<div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
</div>
</el-col>
</el-row>
examples/docs/en-US/typography.md
View file @ febdd3bb
<style>
.demo-typo-box {
height: 200px;
width: 200px;
position: relative;
border: 1px solid #eaeefb;
font-size: 40px;
color: #1f2d3d;
text-align: center;
line-height: 162px;
padding-bottom: 36px;
box-sizing: border-box;
display: inline-block;
margin-right: 17px;
border-radius: 4px;
.name {
position: absolute;
bottom: 0;
width: 100%;
height: 35px;
border-top: 1px solid #eaeefb;
font-size: 14px;
color: #8492a6;
line-height: 35px;
text-align: left;
text-indent: 10px;
font-family: 'Helvetica Neue';
}
<script>
import bus from '../../bus';
const varMap = [
'$--font-size-extra-large',
'$--font-size-large',
'$--font-size-medium',
'$--font-size-base',
'$--font-size-small',
'$--font-size-extra-small'
];
const original = {
'font_size_extra_large': '20px',
'font_size_large': '18px',
'font_size_medium': '16px',
'font_size_base': '14px',
'font_size_small': '13px',
'font_size_extra_small': '12px'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
'font_size_extra_large': '',
'font_size_large': '',
'font_size_medium': '',
'font_size_base': '',
'font_size_small': '',
'font_size_extra_small': ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
varMap.forEach((v) => {
const key = v.replace('$--', '').replace(/-/g, '_')
if (value[v]) {
this[key] = value[v]
} else {
this[key] = original[key]
}
});
}
}
},
}
</script>
<style>
.demo-typo-size {
.h1 {
font-size: 20px;
}
.h2 {
font-size: 18px;
}
.h3 {
font-size: 16px;
}
.text-regular {
font-size: 14px;
}
.text-small {
font-size: 13px;
}
.text-smaller {
font-size: 12px;
}
.color-dark-light {
color: #99a9bf;
}
}
.typo-PingFang {
font-family: 'PingFang SC';
}
.typo-Hiragino {
font-family: 'Hiragino Sans GB';
.demo-term-box img{
width: 24%;
margin: 0 4% 20px 0;
}
.typo-Microsoft {
font-family: 'Microsoft YaHei';
.lineH-left {
display: inline-block;
height: 80px
}
/* 英文 */
.typo-Helvetica-Neue {
font-family: 'Helvetica Neue';
.lineH-right {
display: inline-block;
list-style: none;
padding: 0 0 0 90px;
margin: 0;
vertical-align: top;
}
.typo-Helvetica {
font-family: 'Helvetica';
.lineH-right li{
font-size: 13px;
color: #666;
height: 20px;
line-height: 20px;
}
.typo-Arial {
font-family: 'Arial';
.lineH-right li span{
padding-left: 40px;
}
</style>
......@@ -76,76 +98,85 @@
We create a font convention to ensure the best presentation across different platforms.
### Chinese Font
<div class="demo-typo-box typo-PingFang">
和畅惠风
<div class="name">PingFang SC</div>
</div>
<div class="demo-typo-box typo-Hiragino">
和畅惠风
<div class="name">Hiragino Sans GB</div>
### Font
<div class="demo-term-box">
<img src="../../assets/images/term-pingfang.png" alt="">
<img src="../../assets/images/term-hiragino.png" alt="">
<img src="../../assets/images/term-microsoft.png" alt="">
<img src="../../assets/images/term-sf.png" alt="">
<img src="../../assets/images/term-helvetica.png" alt="">
<img src="../../assets/images/term-arial.png" alt="">
</div>
<div class="demo-typo-box typo-Microsoft">
和畅惠风
<div class="name">Microsoft YaHei</div>
</div>
### English / Numberic Font
<div class="demo-typo-box typo-Helvetica-neue">
RGag
<div class="name">Helvetica Neue</div>
</div>
<div class="demo-typo-box typo-Helvetica">
RGag
<div class="name">Helvetica</div>
</div>
<div class="demo-typo-box typo-Arial">
RGag
<div class="name">Arial</div>
</div>
### Font-family
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
### Font Convention
<table class="demo-typo-size">
<tbody>
<tr>
<td class="h1">Main Title</td>
<td class="h1">Build with Element</td>
<td class="color-dark-light">20px Extra large</td>
<tr
>
<td>Level</td>
<td>Font Size</td>
<td class="color-dark-light">Demo</td>
</tr>
<tr>
<td class="h2">Title</td>
<td class="h2">Build with Element</td>
<td class="color-dark-light">18px large</td>
<tr
:style="{ fontSize: font_size_extra_small }"
>
<td>Supplementary text</td>
<td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="h3">Small Title</td>
<td class="h3">Build with Element</td>
<td class="color-dark-light">16px Medium</td>
<tr
:style="{ fontSize: font_size_small }"
>
<td>Body (small)</td>
<td class="color-dark-light">{{font_size_small}} Small</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="text-regular">Body</td>
<td class="text-regular">Build with Element</td>
<td class="color-dark-light">14px Small</td>
<tr
:style="{ fontSize: font_size_base }"
>
<td>Body</td>
<td class="color-dark-light">{{font_size_base}} Base</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="text-small">Body (small)</td>
<td class="text-small">Build with Element</td>
<td class="color-dark-light">13px Extra Small</td>
<tr
:style="{ fontSize: font_size_medium }"
>
<td >Small Title</td>
<td class="color-dark-light">{{font_size_medium}} Medium</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="text-smaller">Supplementary text</td>
<td class="text-smaller">Build with Element</td>
<td class="color-dark-light">12px Extra Extra Small</td>
<tr
:style="{ fontSize: font_size_large }"
>
<td>Title</td>
<td class="color-dark-light">{{font_size_large}} large</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_extra_large }"
>
<td>Main Title</td>
<td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
<td>Build with Element</td>
</tr>
</tbody>
</table>
### Font Line Height
<div>
<img class="lineH-left" src="~examples/assets/images/typography.png" />
<ul class="lineH-right">
<li>line-height:1 <span>No line height</span></li>
<li>line-height:1.3 <span>Compact</span></li>
<li>line-height:1.5 <span>Regular</span></li>
<li>line-height:1.7 <span>Loose</span></li>
</ul>
</div>
### Font-family
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
examples/docs/es/border.md 0 → 100644
View file @ febdd3bb
<script>
import bus from '../../bus';
const varMap = {
'$--box-shadow-light': 'boxShadowLight',
'$--box-shadow-base': 'boxShadowBase',
'$--border-radius-base': 'borderRadiusBase',
'$--border-radius-small': 'borderRadiusSmall'
};
const original = {
boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
borderRadiusBase: '4px',
borderRadiusSmall: '2px'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
boxShadowLight: '',
boxShadowBase: '',
borderRadiusBase: '',
borderRadiusSmall: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(varMap).forEach((c) => {
if (value[c]) {
this[varMap[c]] = value[c]
} else {
this[varMap[c]] = original[varMap[c]]
}
});
}
}
}
}
</script>
<style>
.demo-border .text {
width: 15%;
}
.demo-border .line {
width: 70%;
}
.demo-border .line div{
width: 100%;
height: 0;
border: 1px solid #EEE;
}
.demo-border .line .dashed{
border: 2px dashed #EEE;
}
.demo-shadow {
height: 100px;
width: 50%;
border: 1px solid #eee;
}
.demo-shadow-text {
line-height: 50px;
color: #666;
font-size: 14px;
}
.demo-radius .title{
color: #666;
font-size: 18px;
margin: 10px 0;
}
.demo-radius .value{
color: #333;
font-size: 16px;
margin: 10px 0;
}
.demo-radius .radius {
height: 60px;
width: 70%;
border: 1px solid #D7DAE2;
border-radius: 0;
margin-top: 20px;
}
.demo-radius .radius-30 {
border-radius: 30px;
}
</style>
## Border
We standardize the borders that can be used in buttons, cards, pop-ups and other components.
### Border
There are few border styles to choose.
<table class="demo-border">
<tbody>
<tr>
<td class="text">Name</td>
<td class="text">Thickness</td>
<td class="line">Demo</td>
</tr>
<tr>
<td class="text">Solid</td>
<td class="text">1px</td>
<td class="line">
<div></div>
</td>
</tr>
<tr>
<td class="text">Dashed</td>
<td class="text">2px</td>
<td class="line">
<div class="dashed"></div>
</td>
</tr>
</tbody>
</table>
### Radius
There are few radius styles to choose.
<el-row :gutter="12" class="demo-radius">
<el-col :span="6" :xs="{span: 12}">
<div class="title">No Radius</div>
<div class="value">border-radius: 0px</div>
<div class="radius"></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Small Radius</div>
<div class="value">border-radius: {{borderRadiusSmall}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusSmall }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Large Radius</div>
<div class="value">border-radius: {{borderRadiusBase}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusBase }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Round Radius</div>
<div class="value">border-radius: 30px</div>
<div class="radius radius-30"></div>
</el-col>
</el-row>
### Shadow
There are few shaodw styles to choose.
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowBase }"
></div>
<span class="demo-shadow-text">Basic Shaodw box-shadow: {{boxShadowBase}}</span>
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowLight }"
></div>
<span class="demo-shadow-text">Light Shadow box-shadow: {{boxShadowLight}}</span>
examples/docs/es/color.md
View file @ febdd3bb
<script>
import bus from '../../bus';
import { tintColor } from '../../color.js';
const varMap = {
'primary': '$--color-primary',
'success': '$--color-success',
'warning': '$--color-warning',
'danger': '$--color-danger',
'info': '$--color-info',
'white': '$--color-white',
'black': '$--color-black',
'textPrimary': '$--color-text-primary',
'textRegular': '$--color-text-regular',
'textSecondary': '$--color-text-secondary',
'textPlaceholder': '$--color-text-placeholder',
'borderBase': '$--border-color-base',
'borderLight': '$--border-color-light',
'borderLighter': '$--border-color-lighter',
'borderExtraLight': '$--border-color-extra-light'
};
const original = {
primary: '#409EFF',
success: '#67C23A',
warning: '#E6A23C',
danger: '#F56C6C',
info: '#909399',
white: '#FFFFFF',
black: '#000000',
textPrimary: '#303133',
textRegular: '#606266',
textSecondary: '#909399',
textPlaceholder: '#C0C4CC',
borderBase: '#DCDFE6',
borderLight: '#E4E7ED',
borderLighter: '#EBEEF5',
borderExtraLight: '#F2F6FC'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
primary: '',
success: '',
warning: '',
danger: '',
info: '',
white: '',
black: '',
textPrimary: '',
textRegular: '',
textSecondary: '',
textPlaceholder: '',
borderBase: '',
borderLight: '',
borderLighter: '',
borderExtraLight: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(original).forEach((o) => {
if (value[varMap[o]]) {
this[o] = value[varMap[o]]
} else {
this[o] = original[o]
}
});
}
}
},
}
</script>
<style>
.demo-color-box {
position: relative;
border-radius: 4px;
padding: 20px;
margin: 5px 0;
height: 74px;
height: 114px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
& .value {
font-size: 12px;
opacity: 0.69;
line-height: 24px;
}
}
.demo-color-box-other {
height: 74px;
margin: 10px 0!important;
border-radius: 4px 4px 4px 4px!important;
padding: 15px 20px;
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
......@@ -26,50 +124,42 @@
border-radius: 0 0 4px 4px;
}
}
.bg-blue {
background-color: #409EFF;
.bg-color-sub {
width: 100%;
height: 40px;
left: 0;
bottom: 0;
position: absolute;
border-radius: 0 0 4px 4px;
}
.bg-success {
background-color: #13CE66;
.bg-blue-sub-item {
width: 11.1111111%;
height: 100%;
display: inline-block;
}
.bg-warning {
background-color: #f7ba2a;
.bg-blue-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-danger {
background-color: #ff4949;
.bg-success-sub-item {
width: 50%;
height: 100%;
display: inline-block;
}
.bg-info {
background-color: #909399;
}
.bg-text-primary {
background-color: #303133;
}
.bg-text-regular {
background-color: #606266;
}
.bg-text-secondary {
background-color: #909399;
}
.bg-text-placeholder {
background-color: #c0c4cc;
}
.bg-border-base {
background-color: #dcdfe6;
.bg-success-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-border-light {
background-color: #e4e7ed;
.bg-success-sub-item:last-child {
border-radius: 0 0 4px 0;
}
.bg-border-lighter {
background-color: #ebeef5;
}
.bg-border-extra-light {
background-color: #f2f6fc;
.bg-transparent {
border: 1px solid #FCC3C3;
color: #303133;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
}
[class*=" bg-border-"] {
.demo-color-box-lite {
color: #303133;
}
</style>
......@@ -82,8 +172,24 @@ Element utiliza un conjunto de paletas para especificar colores, y así, proporc
El color principal de Element es el azul brillante y amigable.
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-blue">Azul<div class="value">#409EFF</div></div>
<el-col :span="10" :xs="{span: 12}">
<div
class="demo-color-box"
:style="{ background: primary }"
>
Brand Color<div class="value">#409EFF</div>
<div
class="bg-color-sub"
:style="{ background: tintColor(primary, 0.9) }"
>
<div
class="bg-blue-sub-item"
v-for="(item, key) in Array(8)"
:key="key"
:style="{ background: tintColor(primary, (key + 1) / 10) }"
>
</div>
</div>
</el-col>
</el-row>
......@@ -93,16 +199,72 @@ Además del color principal, se necesitan utilizar distintos colores para difere
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-success">Éxito<div class="value">#67C23A</div></div>
<div class="demo-color-box"
:style="{ background: success }"
>Success<div class="value">#67C23A</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(success, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-warning">Precaución<div class="value">#E6A23C</div></div>
<div class="demo-color-box"
:style="{ background: warning }"
>Warning<div class="value">#E6A23C</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(warning, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-danger">Peligro<div class="value">#F56C6C</div></div>
<div class="demo-color-box"
:style="{ background: danger }"
>Danger<div class="value">#F56C6C</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(danger, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
<div class="demo-color-box"
:style="{ background: info }"
>Info<div class="value">#909399</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(info, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
</el-row>
......@@ -113,18 +275,48 @@ Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes col
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box bg-text-primary">Texto primario<div class="value">#303133</div></div>
<div class="demo-color-box bg-text-regular">Texto regular<div class="value">#606266</div></div>
<div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#909399</div></div>
<div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#C0C4CC</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPrimary }"
>Texto primario<div class="value">{{textPrimary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textRegular }"
>
Texto regular<div class="value">{{textRegular}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textSecondary }"
>Texto secundario<div class="value">{{textSecondary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPlaceholder }"
>Texto de placeholder<div class="value">{{textPlaceholder}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderBase }"
>Borde base<div class="value">{{borderBase}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLight }"
>Borde ligero<div class="value">{{borderLight}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLighter }"
>Borde claro<div class="value">{{borderLighter}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderExtraLight }"
>Borde extra claro<div class="value">{{borderExtraLight}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box bg-border-base">Borde base<div class="value">#DCDFE6</div></div>
<div class="demo-color-box bg-border-light">Borde ligero<div class="value">#E4E7ED</div></div>
<div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#EBEEF5</div></div>
<div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#F2F6FC</div></div>
<div
class="demo-color-box demo-color-box-other"
:style="{ background: black }"
>Basic Black<div class="value">{{black}}</div></div>
<div
class="demo-color-box demo-color-box-other"
:style="{ background: white, color: '#303133', border: '1px solid #eee' }"
>Basic White<div class="value">{{white}}</div></div>
<div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
</div>
</el-col>
</el-row>
examples/docs/es/typography.md
View file @ febdd3bb
<style>
.demo-typo-box {
height: 200px;
width: 200px;
position: relative;
border: 1px solid #eaeefb;
font-size: 40px;
color: #1f2d3d;
text-align: center;
line-height: 162px;
padding-bottom: 36px;
box-sizing: border-box;
display: inline-block;
margin-right: 17px;
border-radius: 4px;
.name {
position: absolute;
bottom: 0;
width: 100%;
height: 35px;
border-top: 1px solid #eaeefb;
font-size: 14px;
color: #8492a6;
line-height: 35px;
text-align: left;
text-indent: 10px;
font-family: 'Helvetica Neue';
}
<script>
import bus from '../../bus';
const varMap = [
'$--font-size-extra-large',
'$--font-size-large',
'$--font-size-medium',
'$--font-size-base',
'$--font-size-small',
'$--font-size-extra-small'
];
const original = {
'font_size_extra_large': '20px',
'font_size_large': '18px',
'font_size_medium': '16px',
'font_size_base': '14px',
'font_size_small': '13px',
'font_size_extra_small': '12px'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
'font_size_extra_large': '',
'font_size_large': '',
'font_size_medium': '',
'font_size_base': '',
'font_size_small': '',
'font_size_extra_small': ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
varMap.forEach((v) => {
const key = v.replace('$--', '').replace(/-/g, '_')
if (value[v]) {
this[key] = value[v]
} else {
this[key] = original[key]
}
});
}
}
},
}
</script>
<style>
.demo-typo-size {
.h1 {
font-size: 20px;
}
.h2 {
font-size: 18px;
}
.h3 {
font-size: 16px;
}
.text-regular {
font-size: 14px;
}
.text-small {
font-size: 13px;
}
.text-smaller {
font-size: 12px;
}
.color-dark-light {
color: #99a9bf;
}
}
.typo-PingFang {
font-family: 'PingFang SC';
}
.typo-Hiragino {
font-family: 'Hiragino Sans GB';
.demo-term-box img{
width: 24%;
margin: 0 4% 20px 0;
}
.typo-Microsoft {
font-family: 'Microsoft YaHei';
.lineH-left {
display: inline-block;
height: 80px
}
/* 英文 */
.typo-Helvetica-Neue {
font-family: 'Helvetica Neue';
.lineH-right {
display: inline-block;
list-style: none;
padding: 0 0 0 90px;
margin: 0;
vertical-align: top;
}
.typo-Helvetica {
font-family: 'Helvetica';
.lineH-right li{
font-size: 13px;
color: #666;
height: 20px;
line-height: 20px;
}
.typo-Arial {
font-family: 'Arial';
.lineH-right li span{
padding-left: 40px;
}
</style>
......@@ -76,76 +98,85 @@
Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.
### Fuente en chino
<div class="demo-typo-box typo-PingFang">
和畅惠风
<div class="name">PingFang SC</div>
</div>
<div class="demo-typo-box typo-Hiragino">
和畅惠风
<div class="name">Hiragino Sans GB</div>
</div>
<div class="demo-typo-box typo-Microsoft">
和畅惠风
<div class="name">Microsoft YaHei</div>
</div>
### Inglés / Fuente Numérica
<div class="demo-typo-box typo-Helvetica-neue">
RGag
<div class="name">Helvetica Neue</div>
</div>
<div class="demo-typo-box typo-Helvetica">
RGag
<div class="name">Helvetica</div>
### Fuente
<div class="demo-term-box">
<img src="../../assets/images/term-pingfang.png" alt="">
<img src="../../assets/images/term-hiragino.png" alt="">
<img src="../../assets/images/term-microsoft.png" alt="">
<img src="../../assets/images/term-sf.png" alt="">
<img src="../../assets/images/term-helvetica.png" alt="">
<img src="../../assets/images/term-arial.png" alt="">
</div>
<div class="demo-typo-box typo-Arial">
RGag
<div class="name">Arial</div>
</div>
### Font-family
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
### Convención de fuentes
<table class="demo-typo-size">
<tbody>
<tr>
<td class="h1">Main Title</td>
<td class="h1">Build with Element</td>
<td class="color-dark-light">20px Extra large</td>
<tr
>
<td>Level</td>
<td>Font Size</td>
<td class="color-dark-light">Demo</td>
</tr>
<tr>
<td class="h2">Title</td>
<td class="h2">Build with Element</td>
<td class="color-dark-light">18px large</td>
<tr
:style="{ fontSize: font_size_extra_small }"
>
<td>Supplementary text</td>
<td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="h3">Small Title</td>
<td class="h3">Build with Element</td>
<td class="color-dark-light">16px Medium</td>
<tr
:style="{ fontSize: font_size_small }"
>
<td>Body (small)</td>
<td class="color-dark-light">{{font_size_small}} Small</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="text-regular">Body</td>
<td class="text-regular">Build with Element</td>
<td class="color-dark-light">14px Small</td>
<tr
:style="{ fontSize: font_size_base }"
>
<td>Body</td>
<td class="color-dark-light">{{font_size_base}} Base</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="text-small">Body (small)</td>
<td class="text-small">Build with Element</td>
<td class="color-dark-light">13px Extra Small</td>
<tr
:style="{ fontSize: font_size_medium }"
>
<td >Small Title</td>
<td class="color-dark-light">{{font_size_medium}} Medium</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="text-smaller">Supplementary text</td>
<td class="text-smaller">Build with Element</td>
<td class="color-dark-light">12px Extra Extra Small</td>
<tr
:style="{ fontSize: font_size_large }"
>
<td>Title</td>
<td class="color-dark-light">{{font_size_large}} large</td>
<td>Build with Element</td>
</tr>
<tr
:style="{ fontSize: font_size_extra_large }"
>
<td>Main Title</td>
<td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
<td>Build with Element</td>
</tr>
</tbody>
</table>
### Font Line Height
<div>
<img class="lineH-left" src="~examples/assets/images/typography.png" />
<ul class="lineH-right">
<li>line-height:1 <span>No line height</span></li>
<li>line-height:1.3 <span>Compact</span></li>
<li>line-height:1.5 <span>Regular</span></li>
<li>line-height:1.7 <span>Loose</span></li>
</ul>
</div>
### Font-family
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
examples/docs/fr-FR/border.md 0 → 100644
View file @ febdd3bb
<script>
import bus from '../../bus';
const varMap = {
'$--box-shadow-light': 'boxShadowLight',
'$--box-shadow-base': 'boxShadowBase',
'$--border-radius-base': 'borderRadiusBase',
'$--border-radius-small': 'borderRadiusSmall'
};
const original = {
boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
borderRadiusBase: '4px',
borderRadiusSmall: '2px'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
boxShadowLight: '',
boxShadowBase: '',
borderRadiusBase: '',
borderRadiusSmall: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(varMap).forEach((c) => {
if (value[c]) {
this[varMap[c]] = value[c]
} else {
this[varMap[c]] = original[varMap[c]]
}
});
}
}
}
}
</script>
<style>
.demo-border .text {
width: 15%;
}
.demo-border .line {
width: 70%;
}
.demo-border .line div{
width: 100%;
height: 0;
border: 1px solid #EEE;
}
.demo-border .line .dashed{
border: 2px dashed #EEE;
}
.demo-shadow {
height: 100px;
width: 50%;
border: 1px solid #eee;
}
.demo-shadow-text {
line-height: 50px;
color: #666;
font-size: 14px;
}
.demo-radius .title{
color: #666;
font-size: 18px;
margin: 10px 0;
}
.demo-radius .value{
color: #333;
font-size: 16px;
margin: 10px 0;
}
.demo-radius .radius {
height: 60px;
width: 70%;
border: 1px solid #D7DAE2;
border-radius: 0;
margin-top: 20px;
}
.demo-radius .radius-30 {
border-radius: 30px;
}
</style>
## Border
We standardize the borders that can be used in buttons, cards, pop-ups and other components.
### Border
There are few border styles to choose.
<table class="demo-border">
<tbody>
<tr>
<td class="text">Name</td>
<td class="text">Thickness</td>
<td class="line">Demo</td>
</tr>
<tr>
<td class="text">Solid</td>
<td class="text">1px</td>
<td class="line">
<div></div>
</td>
</tr>
<tr>
<td class="text">Dashed</td>
<td class="text">2px</td>
<td class="line">
<div class="dashed"></div>
</td>
</tr>
</tbody>
</table>
### Radius
There are few radius styles to choose.
<el-row :gutter="12" class="demo-radius">
<el-col :span="6" :xs="{span: 12}">
<div class="title">No Radius</div>
<div class="value">border-radius: 0px</div>
<div class="radius"></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Small Radius</div>
<div class="value">border-radius: {{borderRadiusSmall}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusSmall }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Large Radius</div>
<div class="value">border-radius: {{borderRadiusBase}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusBase }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">Round Radius</div>
<div class="value">border-radius: 30px</div>
<div class="radius radius-30"></div>
</el-col>
</el-row>
### Shadow
There are few shaodw styles to choose.
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowBase }"
></div>
<span class="demo-shadow-text">Basic Shaodw box-shadow: {{boxShadowBase}}</span>
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowLight }"
></div>
<span class="demo-shadow-text">Light Shadow box-shadow: {{boxShadowLight}}</span>
examples/docs/fr-FR/color.md
View file @ febdd3bb
<script>
import bus from '../../bus';
import { tintColor } from '../../color.js';
const varMap = {
'primary': '$--color-primary',
'success': '$--color-success',
'warning': '$--color-warning',
'danger': '$--color-danger',
'info': '$--color-info',
'white': '$--color-white',
'black': '$--color-black',
'textPrimary': '$--color-text-primary',
'textRegular': '$--color-text-regular',
'textSecondary': '$--color-text-secondary',
'textPlaceholder': '$--color-text-placeholder',
'borderBase': '$--border-color-base',
'borderLight': '$--border-color-light',
'borderLighter': '$--border-color-lighter',
'borderExtraLight': '$--border-color-extra-light'
};
const original = {
primary: '#409EFF',
success: '#67C23A',
warning: '#E6A23C',
danger: '#F56C6C',
info: '#909399',
white: '#FFFFFF',
black: '#000000',
textPrimary: '#303133',
textRegular: '#606266',
textSecondary: '#909399',
textPlaceholder: '#C0C4CC',
borderBase: '#DCDFE6',
borderLight: '#E4E7ED',
borderLighter: '#EBEEF5',
borderExtraLight: '#F2F6FC'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
primary: '',
success: '',
warning: '',
danger: '',
info: '',
white: '',
black: '',
textPrimary: '',
textRegular: '',
textSecondary: '',
textPlaceholder: '',
borderBase: '',
borderLight: '',
borderLighter: '',
borderExtraLight: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(original).forEach((o) => {
if (value[varMap[o]]) {
this[o] = value[varMap[o]]
} else {
this[o] = original[o]
}
});
}
}
},
}
</script>
<style>
.demo-color-box {
position: relative;
border-radius: 4px;
padding: 20px;
margin: 5px 0;
height: 74px;
height: 114px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
......@@ -14,6 +106,12 @@
line-height: 24px;
}
}
.demo-color-box-other {
height: 74px;
margin: 10px 0!important;
border-radius: 4px 4px 4px 4px!important;
padding: 15px 20px;
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
......@@ -26,50 +124,42 @@
border-radius: 0 0 4px 4px;
}
}
.bg-blue {
background-color: #409EFF;
}
.bg-success {
background-color: #13CE66;
}
.bg-warning {
background-color: #f7ba2a;
}
.bg-danger {
background-color: #ff4949;
}
.bg-info {
background-color: #909399;
}
.bg-text-primary {
background-color: #303133;
}
.bg-text-regular {
background-color: #606266;
.bg-color-sub {
width: 100%;
height: 40px;
left: 0;
bottom: 0;
position: absolute;
border-radius: 0 0 4px 4px;
}
.bg-text-secondary {
background-color: #909399;
.bg-blue-sub-item {
width: 11.1111111%;
height: 100%;
display: inline-block;
}
.bg-text-placeholder {
background-color: #c0c4cc;
.bg-blue-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-border-base {
background-color: #dcdfe6;
.bg-success-sub-item {
width: 50%;
height: 100%;
display: inline-block;
}
.bg-border-light {
background-color: #e4e7ed;
.bg-success-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-border-lighter {
background-color: #ebeef5;
.bg-success-sub-item:last-child {
border-radius: 0 0 4px 0;
}
.bg-border-extra-light {
background-color: #f2f6fc;
.bg-transparent {
border: 1px solid #FCC3C3;
color: #303133;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
}
[class*=" bg-border-"] {
.demo-color-box-lite {
color: #303133;
}
</style>
......@@ -82,8 +172,24 @@ Element utilise un ensemble de palettes spécifiques afin de fournir un style co
La couleur principale d'Element est un bleu clair et agréable.
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-blue">Bleu<div class="value">#409EFF</div></div>
<el-col :span="10" :xs="{span: 12}">
<div
class="demo-color-box"
:style="{ background: primary }"
>
Brand Color<div class="value">#409EFF</div>
<div
class="bg-color-sub"
:style="{ background: tintColor(primary, 0.9) }"
>
<div
class="bg-blue-sub-item"
v-for="(item, key) in Array(8)"
:key="key"
:style="{ background: tintColor(primary, (key + 1) / 10) }"
>
</div>
</div>
</el-col>
</el-row>
......@@ -93,16 +199,72 @@ En plus de la couleur principale, vous devrez sans doute utiliser d'autres coule
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-success">Succès<div class="value">#67C23A</div></div>
<div class="demo-color-box"
:style="{ background: success }"
>Success<div class="value">#67C23A</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(success, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-warning">Avertissement<div class="value">#E6A23C</div></div>
<div class="demo-color-box"
:style="{ background: warning }"
>Warning<div class="value">#E6A23C</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(warning, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
<div class="demo-color-box"
:style="{ background: danger }"
>Danger<div class="value">#F56C6C</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(danger, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-info">Information<div class="value">#909399</div></div>
<div class="demo-color-box"
:style="{ background: info }"
>Info<div class="value">#909399</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(info, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
</el-row>
......@@ -113,18 +275,48 @@ Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous p
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box bg-text-primary">Texte principal<div class="value">#303133</div></div>
<div class="demo-color-box bg-text-regular">Texte normal<div class="value">#606266</div></div>
<div class="demo-color-box bg-text-secondary">Texte secondaire<div class="value">#909399</div></div>
<div class="demo-color-box bg-text-placeholder">Texte de placeholder<div class="value">#C0C4CC</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPrimary }"
>Texte principal<div class="value">{{textPrimary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textRegular }"
>
Texte normal<div class="value">{{textRegular}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textSecondary }"
>Texte secondaire<div class="value">{{textSecondary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPlaceholder }"
>Texte de placeholder<div class="value">{{textPlaceholder}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderBase }"
>Bordure de base<div class="value">{{borderBase}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLight }"
>Bordure claire<div class="value">{{borderLight}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLighter }"
>Bordure très claire<div class="value">{{borderLighter}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderExtraLight }"
>Bordure extra claire<div class="value">{{borderExtraLight}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box bg-border-base">Bordure de base<div class="value">#DCDFE6</div></div>
<div class="demo-color-box bg-border-light">Bordure claire<div class="value">#E4E7ED</div></div>
<div class="demo-color-box bg-border-lighter">Bordure très claire<div class="value">#EBEEF5</div></div>
<div class="demo-color-box bg-border-extra-light">Bordure extra claire<div class="value">#F2F6FC</div></div>
<div
class="demo-color-box demo-color-box-other"
:style="{ background: black }"
>Basic Black<div class="value">{{black}}</div></div>
<div
class="demo-color-box demo-color-box-other"
:style="{ background: white, color: '#303133', border: '1px solid #eee' }"
>Basic White<div class="value">{{white}}</div></div>
<div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
</div>
</el-col>
</el-row>
examples/docs/fr-FR/typography.md
View file @ febdd3bb
<style>
.demo-typo-box {
height: 200px;
width: 200px;
position: relative;
border: 1px solid #eaeefb;
font-size: 40px;
color: #1f2d3d;
text-align: center;
line-height: 162px;
padding-bottom: 36px;
box-sizing: border-box;
display: inline-block;
margin-right: 17px;
border-radius: 4px;
.name {
position: absolute;
bottom: 0;
width: 100%;
height: 35px;
border-top: 1px solid #eaeefb;
font-size: 14px;
color: #8492a6;
line-height: 35px;
text-align: left;
text-indent: 10px;
font-family: 'Helvetica Neue';
}
<script>
import bus from '../../bus';
const varMap = [
'$--font-size-extra-large',
'$--font-size-large',
'$--font-size-medium',
'$--font-size-base',
'$--font-size-small',
'$--font-size-extra-small'
];
const original = {
'font_size_extra_large': '20px',
'font_size_large': '18px',
'font_size_medium': '16px',
'font_size_base': '14px',
'font_size_small': '13px',
'font_size_extra_small': '12px'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
'font_size_extra_large': '',
'font_size_large': '',
'font_size_medium': '',
'font_size_base': '',
'font_size_small': '',
'font_size_extra_small': ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
varMap.forEach((v) => {
const key = v.replace('$--', '').replace(/-/g, '_')
if (value[v]) {
this[key] = value[v]
} else {
this[key] = original[key]
}
});
}
}
},
}
</script>
<style>
.demo-typo-size {
.h1 {
font-size: 20px;
}
.h2 {
font-size: 18px;
}
.h3 {
font-size: 16px;
}
.text-regular {
font-size: 14px;
}
.text-small {
font-size: 13px;
}
.text-smaller {
font-size: 12px;
}
.color-dark-light {
color: #99a9bf;
}
}
.typo-PingFang {
font-family: 'PingFang SC';
}
.typo-Hiragino {
font-family: 'Hiragino Sans GB';
.demo-term-box img{
width: 24%;
margin: 0 4% 20px 0;
}
.typo-Microsoft {
font-family: 'Microsoft YaHei';
.lineH-left {
display: inline-block;
height: 80px
}
/* 英文 \*/
.typo-Helvetica-Neue {
font-family: 'Helvetica Neue';
.lineH-right {
display: inline-block;
list-style: none;
padding: 0 0 0 90px;
margin: 0;
vertical-align: top;
}
.typo-Helvetica {
font-family: 'Helvetica';
.lineH-right li{
font-size: 13px;
color: #666;
height: 20px;
line-height: 20px;
}
.typo-Arial {
font-family: 'Arial';
.lineH-right li span{
padding-left: 40px;
}
</style>
......@@ -76,75 +98,86 @@
Nous avons créé une convention de police d'écriture afin d'assurer la meilleur présentation possible sur toutes le plateformes.
### Police chinoise
### Police
<div class="demo-typo-box typo-PingFang">
和畅惠风
<div class="name">PingFang SC</div>
</div>
<div class="demo-typo-box typo-Hiragino">
和畅惠风
<div class="name">Hiragino Sans GB</div>
</div>
<div class="demo-typo-box typo-Microsoft">
和畅惠风
<div class="name">Microsoft YaHei</div>
<div class="demo-term-box">
<img src="../../assets/images/term-pingfang.png" alt="">
<img src="../../assets/images/term-hiragino.png" alt="">
<img src="../../assets/images/term-microsoft.png" alt="">
<img src="../../assets/images/term-sf.png" alt="">
<img src="../../assets/images/term-helvetica.png" alt="">
<img src="../../assets/images/term-arial.png" alt="">
</div>
### Police anglaise / numérique
<div class="demo-typo-box typo-Helvetica-neue">
RGag
<div class="name">Helvetica Neue</div>
</div>
<div class="demo-typo-box typo-Helvetica">
RGag
<div class="name">Helvetica</div>
</div>
<div class="demo-typo-box typo-Arial">
RGag
<div class="name">Arial</div>
</div>
### Font-family
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
### Convention des polices
<table class="demo-typo-size">
<tbody>
<tr>
<td class="h1">Titre principal</td>
<td class="h1">Construit avec Element</td>
<td class="color-dark-light">20px Extra large</td>
<tr
>
<td>Level</td>
<td>Font Size</td>
<td class="color-dark-light">Demo</td>
</tr>
<tr
:style="{ fontSize: font_size_extra_small }"
>
<td>Supplementary text</td>
<td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="h2">Titre</td>
<td class="h2">Construit avec Element</td>
<td class="color-dark-light">18px large</td>
<tr
:style="{ fontSize: font_size_small }"
>
<td>Body (small)</td>
<td class="color-dark-light">{{font_size_small}} Small</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="h3">Sous-titre</td>
<td class="h3">Construit avec Element</td>
<td class="color-dark-light">16px Medium</td>
<tr
:style="{ fontSize: font_size_base }"
>
<td>Body</td>
<td class="color-dark-light">{{font_size_base}} Base</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="text-regular">Body</td>
<td class="text-regular">Construit avec Element</td>
<td class="color-dark-light">14px Small</td>
<tr
:style="{ fontSize: font_size_medium }"
>
<td >Small Title</td>
<td class="color-dark-light">{{font_size_medium}} Medium</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="text-small">Body (petit)</td>
<td class="text-small">Construit avec Element</td>
<td class="color-dark-light">13px Extra Small</td>
<tr
:style="{ fontSize: font_size_large }"
>
<td>Title</td>
<td class="color-dark-light">{{font_size_large}} large</td>
<td>Build with Element</td>
</tr>
<tr>
<td class="text-smaller">Texte supplémentaire</td>
<td class="text-smaller">Construit avec Element</td>
<td class="color-dark-light">12px Extra Extra Small</td>
<tr
:style="{ fontSize: font_size_extra_large }"
>
<td>Main Title</td>
<td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
<td>Build with Element</td>
</tr>
</tbody>
</table>
### Font Line Height
<div>
<img class="lineH-left" src="~examples/assets/images/typography.png" />
<ul class="lineH-right">
<li>line-height:1 <span>No line height</span></li>
<li>line-height:1.3 <span>Compact</span></li>
<li>line-height:1.5 <span>Regular</span></li>
<li>line-height:1.7 <span>Loose</span></li>
</ul>
</div>
### Font-family
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
examples/docs/zh-CN/border.md 0 → 100644
View file @ febdd3bb
<script>
import bus from '../../bus';
const varMap = {
'$--box-shadow-light': 'boxShadowLight',
'$--box-shadow-base': 'boxShadowBase',
'$--border-radius-base': 'borderRadiusBase',
'$--border-radius-small': 'borderRadiusSmall'
};
const original = {
boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
borderRadiusBase: '4px',
borderRadiusSmall: '2px'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
boxShadowLight: '',
boxShadowBase: '',
borderRadiusBase: '',
borderRadiusSmall: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(varMap).forEach((c) => {
if (value[c]) {
this[varMap[c]] = value[c]
} else {
this[varMap[c]] = original[varMap[c]]
}
});
}
}
}
}
</script>
<style>
.demo-border .text {
width: 15%;
}
.demo-border .line {
width: 70%;
}
.demo-border .line div{
width: 100%;
height: 0;
border: 1px solid #EEE;
}
.demo-border .line .dashed{
border: 2px dashed #EEE;
}
.demo-shadow {
height: 100px;
width: 50%;
border: 1px solid #eee;
}
.demo-shadow-text {
line-height: 50px;
color: #666;
font-size: 14px;
}
.demo-radius .title{
color: #666;
font-size: 18px;
margin: 10px 0;
}
.demo-radius .value{
color: #333;
font-size: 16px;
margin: 10px 0;
}
.demo-radius .radius {
height: 60px;
width: 70%;
border: 1px solid #D7DAE2;
border-radius: 0;
margin-top: 20px;
}
.demo-radius .radius-30 {
border-radius: 30px;
}
</style>
## Border 边框
我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。
### 边框
我们提供了一下几种边框样式，以供选择。
<table class="demo-border">
<tbody>
<tr>
<td class="text">名称</td>
<td class="text">粗细</td>
<td class="line">举例</td>
</tr>
<tr>
<td class="text">实线</td>
<td class="text">1px</td>
<td class="line">
<div></div>
</td>
</tr>
<tr>
<td class="text">虚线</td>
<td class="text">2px</td>
<td class="line">
<div class="dashed"></div>
</td>
</tr>
</tbody>
</table>
### 圆角
我们提供了一下几种圆角样式，以供选择。
<el-row :gutter="12" class="demo-radius">
<el-col :span="6" :xs="{span: 12}">
<div class="title">无圆角</div>
<div class="value">border-radius: 0px</div>
<div class="radius"></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">小圆角</div>
<div class="value">border-radius: {{borderRadiusSmall}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusSmall }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">大圆角</div>
<div class="value">border-radius: {{borderRadiusBase}}</div>
<div
class="radius"
:style="{ borderRadius: borderRadiusBase }"
></div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="title">圆形圆角</div>
<div class="value">border-radius: 30px</div>
<div class="radius radius-30"></div>
</el-col>
</el-row>
### 投影
我们提供了一下几种投影样式，以供选择。
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowBase }"
></div>
<span class="demo-shadow-text">基础投影 box-shadow: {{boxShadowBase}}</span>
<div
class="demo-shadow"
:style="{ boxShadow: boxShadowLight }"
></div>
<span class="demo-shadow-text">浅色投影 box-shadow: {{boxShadowLight}}</span>
examples/docs/zh-CN/color.md
View file @ febdd3bb
<script>
import bus from '../../bus';
import { tintColor } from '../../color.js';
const varMap = {
'primary': '$--color-primary',
'success': '$--color-success',
'warning': '$--color-warning',
'danger': '$--color-danger',
'info': '$--color-info',
'white': '$--color-white',
'black': '$--color-black',
'textPrimary': '$--color-text-primary',
'textRegular': '$--color-text-regular',
'textSecondary': '$--color-text-secondary',
'textPlaceholder': '$--color-text-placeholder',
'borderBase': '$--border-color-base',
'borderLight': '$--border-color-light',
'borderLighter': '$--border-color-lighter',
'borderExtraLight': '$--border-color-extra-light'
};
const original = {
primary: '#409EFF',
success: '#67C23A',
warning: '#E6A23C',
danger: '#F56C6C',
info: '#909399',
white: '#FFFFFF',
black: '#000000',
textPrimary: '#303133',
textRegular: '#606266',
textSecondary: '#909399',
textPlaceholder: '#C0C4CC',
borderBase: '#DCDFE6',
borderLight: '#E4E7ED',
borderLighter: '#EBEEF5',
borderExtraLight: '#F2F6FC'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
primary: '',
success: '',
warning: '',
danger: '',
info: '',
white: '',
black: '',
textPrimary: '',
textRegular: '',
textSecondary: '',
textPlaceholder: '',
borderBase: '',
borderLight: '',
borderLighter: '',
borderExtraLight: ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
Object.keys(original).forEach((o) => {
if (value[varMap[o]]) {
this[o] = value[varMap[o]]
} else {
this[o] = original[o]
}
});
}
}
},
}
</script>
<style>
.demo-color-box {
position: relative;
border-radius: 4px;
padding: 20px;
margin: 5px 0;
height: 74px;
height: 114px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
......@@ -14,6 +106,12 @@
line-height: 24px;
}
}
.demo-color-box-other {
height: 74px;
margin: 10px 0!important;
border-radius: 4px 4px 4px 4px!important;
padding: 15px 20px;
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
......@@ -26,50 +124,42 @@
border-radius: 0 0 4px 4px;
}
}
.bg-blue {
background-color: #409EFF;
}
.bg-success {
background-color: #67C23A;
}
.bg-warning {
background-color: #E6A23C;
}
.bg-danger {
background-color: #F56C6C;
}
.bg-info {
background-color: #909399;
}
.bg-text-primary {
background-color: #303133;
}
.bg-text-regular {
background-color: #606266;
.bg-color-sub {
width: 100%;
height: 40px;
left: 0;
bottom: 0;
position: absolute;
border-radius: 0 0 4px 4px;
}
.bg-text-secondary {
background-color: #909399;
.bg-blue-sub-item {
width: 11.1111111%;
height: 100%;
display: inline-block;
}
.bg-text-placeholder {
background-color: #c0c4cc;
.bg-blue-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-border-base {
background-color: #dcdfe6;
.bg-success-sub-item {
width: 50%;
height: 100%;
display: inline-block;
}
.bg-border-light {
background-color: #e4e7ed;
.bg-success-sub-item:first-child {
border-radius: 0 0 0 4px;
}
.bg-border-lighter {
background-color: #ebeef5;
.bg-success-sub-item:last-child {
border-radius: 0 0 4px 0;
}
.bg-border-extra-light {
background-color: #f2f6fc;
.bg-transparent {
border: 1px solid #FCC3C3;
color: #303133;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
}
[class*=" bg-border-"] {
.demo-color-box-lite {
color: #303133;
}
</style>
......@@ -83,8 +173,24 @@ Element 为了避免视觉传达差异，使用一套特定的调色板来规定
Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
<el-col :span="10" :xs="{span: 12}">
<div
class="demo-color-box"
:style="{ background: primary }"
>
Brand Color<div class="value">#409EFF</div>
<div
class="bg-color-sub"
:style="{ background: tintColor(primary, 0.9) }"
>
<div
class="bg-blue-sub-item"
v-for="(item, key) in Array(8)"
:key="key"
:style="{ background: tintColor(primary, (key + 1) / 10) }"
>
</div>
</div>
</el-col>
</el-row>
......@@ -94,16 +200,72 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
<div class="demo-color-box"
:style="{ background: success }"
>Success<div class="value">#67C23A</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(success, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
<div class="demo-color-box"
:style="{ background: warning }"
>Warning<div class="value">#E6A23C</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(warning, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
<div class="demo-color-box"
:style="{ background: danger }"
>Danger<div class="value">#F56C6C</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(danger, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
<div class="demo-color-box"
:style="{ background: info }"
>Info<div class="value">#909399</div>
<div
class="bg-color-sub"
>
<div
class="bg-success-sub-item"
v-for="(item, key) in Array(2)"
:key="key"
:style="{ background: tintColor(info, (key + 8) / 10) }"
>
</div>
</div>
</div>
</el-col>
</el-row>
......@@ -114,18 +276,48 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box bg-text-primary">主要文字<div class="value">#303133</div></div>
<div class="demo-color-box bg-text-regular">常规文字<div class="value">#606266</div></div>
<div class="demo-color-box bg-text-secondary">次要文字<div class="value">#909399</div></div>
<div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#C0C4CC</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPrimary }"
>主要文字<div class="value">{{textPrimary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textRegular }"
>
常规文字<div class="value">{{textRegular}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textSecondary }"
>次要文字<div class="value">{{textSecondary}}</div></div>
<div class="demo-color-box demo-color-box-other"
:style="{ background: textPlaceholder }"
>占位文字<div class="value">{{textPlaceholder}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderBase }"
>一级边框<div class="value">{{borderBase}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLight }"
>二级边框<div class="value">{{borderLight}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderLighter }"
>三级边框<div class="value">{{borderLighter}}</div></div>
<div class="demo-color-box demo-color-box-other demo-color-box-lite"
:style="{ background: borderExtraLight }"
>四级边框<div class="value">{{borderExtraLight}}</div></div>
</div>
</el-col>
<el-col :span="6" :xs="{span: 12}">
<div class="demo-color-box-group">
<div class="demo-color-box bg-border-base">一级边框<div class="value">#DCDFE6</div></div>
<div class="demo-color-box bg-border-light">二级边框<div class="value">#E4E7ED</div></div>
<div class="demo-color-box bg-border-lighter">三级边框<div class="value">#EBEEF5</div></div>
<div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#F2F6FC</div></div>
<div
class="demo-color-box demo-color-box-other"
:style="{ background: black }"
>基础黑色<div class="value">{{black}}</div></div>
<div
class="demo-color-box demo-color-box-other"
:style="{ background: white, color: '#303133', border: '1px solid #eee' }"
>基础白色<div class="value">{{white}}</div></div>
<div class="demo-color-box demo-color-box-other bg-transparent">透明<div class="value">Transparent</div>
</div>
</el-col>
</el-row>
examples/docs/zh-CN/typography.md
View file @ febdd3bb
<style>
.demo-typo-box {
height: 200px;
width: 200px;
position: relative;
border: 1px solid #eaeefb;
font-size: 40px;
color: #1f2d3d;
text-align: center;
line-height: 162px;
padding-bottom: 36px;
box-sizing: border-box;
display: inline-block;
margin-right: 17px;
border-radius: 4px;
.name {
position: absolute;
bottom: 0;
width: 100%;
height: 35px;
border-top: 1px solid #eaeefb;
font-size: 14px;
color: #8492a6;
line-height: 35px;
text-align: left;
text-indent: 10px;
font-family: 'Helvetica Neue';
}
<script>
import bus from '../../bus';
const varMap = [
'$--font-size-extra-large',
'$--font-size-large',
'$--font-size-medium',
'$--font-size-base',
'$--font-size-small',
'$--font-size-extra-small'
];
const original = {
'font_size_extra_large': '20px',
'font_size_large': '18px',
'font_size_medium': '16px',
'font_size_base': '14px',
'font_size_small': '13px',
'font_size_extra_small': '12px'
}
export default {
created() {
bus.$on('user-theme-config-update', this.setGlobal);
},
mounted() {
this.setGlobal();
},
methods: {
tintColor(color, tint) {
return tintColor(color, tint);
},
setGlobal() {
if (window.userThemeConfig) {
this.global = window.userThemeConfig.global;
}
}
},
data() {
return {
global: {},
'font_size_extra_large': '',
'font_size_large': '',
'font_size_medium': '',
'font_size_base': '',
'font_size_small': '',
'font_size_extra_small': ''
}
},
watch: {
global: {
immediate: true,
handler(value) {
varMap.forEach((v) => {
const key = v.replace('$--', '').replace(/-/g, '_')
if (value[v]) {
this[key] = value[v]
} else {
this[key] = original[key]
}
});
}
}
},
}
</script>
<style>
.demo-typo-size {
.h1 {
font-size: 20px;
}
.h2 {
font-size: 18px;
}
.h3 {
font-size: 16px;
}
.text-regular {
font-size: 14px;
}
.text-small {
font-size: 13px;
}
.text-smaller {
font-size: 12px;
}
.color-dark-light {
color: #99a9bf;
}
}
.typo-PingFang {
font-family: 'PingFang SC';
}
.typo-Hiragino {
font-family: 'Hiragino Sans GB';
.demo-term-box img{
width: 24%;
margin: 0 4% 20px 0;
}
.typo-Microsoft {
font-family: 'Microsoft YaHei';
.lineH-left {
display: inline-block;
height: 80px
}
/* 英文 */
.typo-Helvetica-Neue {
font-family: 'Helvetica Neue';
.lineH-right {
display: inline-block;
list-style: none;
padding: 0 0 0 90px;
margin: 0;
vertical-align: top;
}
.typo-Helvetica {
font-family: 'Helvetica';
.lineH-right li{
font-size: 13px;
color: #666;
height: 20px;
line-height: 20px;
}
.typo-Arial {
font-family: 'Arial';
.lineH-right li span{
padding-left: 40px;
}
</style>
......@@ -76,75 +98,85 @@
我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
### 中文字体
<div class="demo-typo-box typo-PingFang">
和畅惠风
<div class="name">PingFang SC</div>
</div>
<div class="demo-typo-box typo-Hiragino">
和畅惠风
<div class="name">Hiragino Sans GB</div>
</div>
<div class="demo-typo-box typo-Microsoft">
和畅惠风
<div class="name">Microsoft YaHei</div>
</div>
### 英文／数字字体
<div class="demo-typo-box typo-Helvetica-neue">
RGag
<div class="name">Helvetica Neue</div>
</div>
<div class="demo-typo-box typo-Helvetica">
RGag
<div class="name">Helvetica</div>
### 字体
<div class="demo-term-box">
<img src="../../assets/images/term-pingfang.png" alt="">
<img src="../../assets/images/term-hiragino.png" alt="">
<img src="../../assets/images/term-microsoft.png" alt="">
<img src="../../assets/images/term-sf.png" alt="">
<img src="../../assets/images/term-helvetica.png" alt="">
<img src="../../assets/images/term-arial.png" alt="">
</div>
<div class="demo-typo-box typo-Arial">
RGag
<div class="name">Arial</div>
</div>
### Font-family 代码
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
### 字体使用规范
### 字号
<table class="demo-typo-size">
<tbody>
<tr>
<td class="h1">主标题</td>
<td class="h1">用 Element 快速搭建页面</td>
<td class="color-dark-light">20px Extra large</td>
<tr
>
<td>层级</td>
<td>字体大小</td>
<td class="color-dark-light">举例</td>
</tr>
<tr>
<td class="h2">标题</td>
<td class="h2">用 Element 快速搭建页面</td>
<td class="color-dark-light">18px large</td>
<tr
:style="{ fontSize: font_size_extra_small }"
>
<td>辅助文字</td>
<td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
<td>用 Element 快速搭建页面</td>
</tr>
<tr>
<td class="h3">小标题</td>
<td class="h3">用 Element 快速搭建页面</td>
<td class="color-dark-light">16px Medium</td>
<tr
:style="{ fontSize: font_size_small }"
>
<td>正文（小）</td>
<td class="color-dark-light">{{font_size_small}} Small</td>
<td>用 Element 快速搭建页面</td>
</tr>
<tr>
<td class="text-regular">正文</td>
<td class="text-regular">用 Element 快速搭建页面</td>
<td class="color-dark-light">14px Small</td>
<tr
:style="{ fontSize: font_size_base }"
>
<td>正文</td>
<td class="color-dark-light">{{font_size_base}} Base</td>
<td>用 Element 快速搭建页面</td>
</tr>
<tr>
<td class="text-small">正文（小）</td>
<td class="text-small">用 Element 快速搭建页面</td>
<td class="color-dark-light">13px Extra Small</td>
<tr
:style="{ fontSize: font_size_medium }"
>
<td>小标题</td>
<td class="color-dark-light">{{font_size_medium}} Medium</td>
<td>用 Element 快速搭建页面</td>
</tr>
<tr>
<td class="text-smaller">辅助文字</td>
<td class="text-smaller">用 Element 快速搭建页面</td>
<td class="color-dark-light">12px Extra Extra Small</td>
<tr
:style="{ fontSize: font_size_large }"
>
<td>标题</td>
<td class="color-dark-light">{{font_size_large}} large</td>
<td>用 Element 快速搭建页面</td>
</tr>
<tr
:style="{ fontSize: font_size_extra_large }"
>
<td>主标题</td>
<td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
<td>用 Element 快速搭建页面</td>
</tr>
</tbody>
</table>
### 行高
<div>
<img class="lineH-left" src="~examples/assets/images/typography.png" />
<ul class="lineH-right">
<li>line-height:1 <span>无行高</span></li>
<li>line-height:1.3 <span>紧凑</span></li>
<li>line-height:1.5 <span>常规</span></li>
<li>line-height:1.7 <span>宽松</span></li>
</ul>
</div>
### Font-family 代码
```css
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
```
examples/i18n/theme-editor.json 0 → 100644
View file @ febdd3bb
[
{
"lang": "zh-CN",
"display-name": {
"border-color": "边框颜色",
"font-color": "文字颜色",
"background-color": "背景颜色",
"font-weight": "文字粗细",
"font-size": "文字大小",
"font-line-height": "文字行高",
"border-radius": "边框圆角",
"color": "颜色"
},
"action": {
"theme-editor": "主题编辑器",
"no-config": "暂不可编辑，敬请期待",
"reset-theme": "重置",
"download-theme": "下载"
},
"category": {
"BrandColor": "品牌颜色",
"SecondaryColor": "辅助颜色",
"FontColor": "文字颜色",
"BorderColor": "边框颜色",
"BackgroundColor": "背景颜色",
"Other": "其他",
"Color": "颜色",
"Border": "边框",
"Font": "文字",
"Radius": "边框圆角",
"Shadow": "阴影",
"FontSize": "文字大小",
"FontWeight": "文字粗细",
"LineHeight": "文字行高"
}
},
{
"lang": "en-US",
"display-name": {
"border-color": "border color",
"font-color": "font color",
"background-color": "background color",
"font-weight": "font weight",
"font-size": "font size",
"font-line-height": "font line height",
"border-radius": "border radius"
},
"action": {
"theme-editor": "Theme Editor",
"no-config": "Please stay tuned",
"reset-theme": "Reset",
"download-theme": "Download"
},
"category": {
"BrandColor": "Brand Color",
"SecondaryColor": "Secondary Color",
"FontColor": "Font Color",
"BorderColor": "Border Color",
"BackgroundColor": "Background Color",
"FontSize": "Font Size",
"FontWeight": "Font Weight",
"LineHeight": "Line Height"
}
},
{
"lang": "es",
"display-name": {
}
},
{
"lang": "fr-FR",
"display-name": {
}
}
]
examples/nav.config.json
View file @ febdd3bb
......@@ -59,6 +59,10 @@
"path": "/typography",
"title": "Typography 字体"
},
{
"path": "/border",
"title": "Border 边框"
},
{
"path": "/icon",
"title": "Icon 图标"
......@@ -313,6 +317,10 @@
"path": "/typography",
"title": "Typography"
},
{
"path": "/border",
"title": "Border"
},
{
"path": "/icon",
"title": "Icon"
......@@ -567,6 +575,10 @@
"path": "/typography",
"title": "Typography"
},
{
"path": "/border",
"title": "Border"
},
{
"path": "/icon",
"title": "Icon"
......@@ -821,6 +833,10 @@
"path": "/typography",
"title": "Typography"
},
{
"path": "/border",
"title": "Border"
},
{
"path": "/icon",
"title": "Icon"
......
examples/pages/template/component.tpl
View file @ febdd3bb
......@@ -133,6 +133,37 @@
}
}
@media (min-width: 1140px) {
.page-component__content {
transition:padding-right 0.3s ease;
&.theme-config {
padding-right: 26%;
}
}
.page-container.page-component {
transition:width 0.3s ease;
&.theme-config {
width: 98%;
}
.page-component__nav {
padding-left: 2%;
}
}
}
@media (min-width: 1600px) {
.page-component__content {
&.theme-config {
padding-right: 25%;
}
}
.page-container.page-component {
&.theme-config {
width: 1600px;
}
}
}
@media (max-width: 768px) {
.page-component {
.page-component__nav {
......@@ -163,11 +194,11 @@
</style>
<template>
<el-scrollbar class="page-component__scroll" ref="componentScrollBar">
<div class="page-container page-component">
<div class="page-container page-component" :class="{'theme-config': isThemeConfigVisible}">
<el-scrollbar class="page-component__nav">
<side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
</el-scrollbar>
<div class="page-component__content">
<div class="page-component__content" :class="{'theme-config': isThemeConfigVisible}">
<router-view class="content"></router-view>
<footer-nav></footer-nav>
</div>
......@@ -200,7 +231,8 @@
scrollTop: 0,
showHeader: true,
componentScrollBar: null,
componentScrollBoxElement: null
componentScrollBoxElement: null,
isThemeConfigVisible: false
};
},
watch: {
......@@ -261,6 +293,9 @@
bus.$on('navFade', val => {
this.navFaded = val;
});
bus.$on('user-theme-config-visible', val => {
this.isThemeConfigVisible = val;
});
window.addEventListener('hashchange', () => {
if (location.href.match(/#/g).length < 2) {
document.documentElement.scrollTop = document.body.scrollTop = 0;
......@@ -271,6 +306,9 @@
});
},
mounted() {
if (window.userThemeConfigVisible) {
this.isThemeConfigVisible = window.userThemeConfigVisible;
}
this.componentScrollBar = this.$refs.componentScrollBar;
this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
this.throttledScrollHandler = throttle(300, this.handleScroll);
......
package.json
View file @ febdd3bb
......@@ -27,9 +27,22 @@
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
},
"faas": {
"domain": "element",
"public": "temp_web/element"
"faas": [
{
"domain": "element",
"public": "temp_web/element"
},
{
"domain": "element-theme",
"public": "examples/element-ui",
"build": [
"yarn",
"npm run deploy:build"
]
}
],
"engines": {
"node": "8"
},
"repository": {
"type": "git",
......
packages/theme-chalk/src/button.scss
View file @ febdd3bb
......@@ -9,10 +9,10 @@
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: $--button-default-fill;
background: $--button-default-background-color;
border: $--border-base;
border-color: $--button-default-border;
color: $--button-default-color;
border-color: $--button-default-border-color;
color: $--button-default-font-color;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
......@@ -75,11 +75,11 @@
&,
&:hover,
&:focus {
color: $--button-disabled-color;
color: $--button-disabled-font-color;
cursor: not-allowed;
background-image: none;
background-color: $--button-disabled-fill;
border-color: $--button-disabled-border;
background-color: $--button-disabled-background-color;
border-color: $--button-disabled-border-color;
}
&.el-button--text {
......@@ -91,8 +91,8 @@
&:hover,
&:focus {
background-color: $--color-white;
border-color: $--button-disabled-border;
color: $--button-disabled-color;
border-color: $--button-disabled-border-color;
color: $--button-disabled-font-color;
}
}
}
......@@ -122,19 +122,19 @@
padding: $--button-padding-vertical;
}
@include m(primary) {
@include button-variant($--button-primary-color, $--button-primary-fill, $--button-primary-border);
@include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
}
@include m(success) {
@include button-variant($--button-success-color, $--button-success-fill, $--button-success-border);
@include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
}
@include m(warning) {
@include button-variant($--button-warning-color, $--button-warning-fill, $--button-warning-border);
@include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
}
@include m(danger) {
@include button-variant($--button-danger-color, $--button-danger-fill, $--button-danger-border);
@include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
}
@include m(info) {
@include button-variant($--button-info-color, $--button-info-fill, $--button-info-border);
@include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
}
@include m(medium) {
@include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
......
packages/theme-chalk/src/checkbox.scss
View file @ febdd3bb
......@@ -256,10 +256,10 @@
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background: $--button-default-fill;
background: $--button-default-background-color;
border: $--border-base;
border-left: 0;
color: $--button-default-color;
color: $--button-default-font-color;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
......@@ -306,15 +306,15 @@
&.is-disabled {
& .el-checkbox-button__inner {
color: $--button-disabled-color;
color: $--button-disabled-font-color;
cursor: not-allowed;
background-image: none;
background-color: $--button-disabled-fill;
border-color: $--button-disabled-border;
background-color: $--button-disabled-background-color;
border-color: $--button-disabled-border-color;
box-shadow: none;
}
&:first-child .el-checkbox-button__inner {
border-left-color: $--button-disabled-border;
border-left-color: $--button-disabled-border-color;
}
}
......
packages/theme-chalk/src/common/var.scss
View file @ febdd3bb
/* Element Chalk Variables */
// Special comment for theme configurator
// type|[Chinese Name, English Name, Spanish Name, French Name]|Category|Order
/* Transition
-------------------------- */
$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
......@@ -9,12 +12,14 @@ $--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 3
$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
/* Colors
/* Color
-------------------------- */
$--color-white: #fff !default;
$--color-black: #000 !default;
/// color|[主题色,primary color,color primario]|BrandColor|0
$--color-primary: #409EFF !default;
/// color|[基础白色,basic white,basic white]|BackgroundColor|4
$--color-white: #FFFFFF !default;
/// color|[基础黑色,basic black,basic black]|BackgroundColor|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
......@@ -24,10 +29,13 @@ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #e6a23c !default;
$--color-danger: #f56c6c !default;
/// color|[成功颜色,success color,success color]|SecondaryColor|1
$--color-success: #67C23A !default;
/// color|[警告颜色,warning color,warning color]|SecondaryColor|1
$--color-warning: #E6A23C !default;
/// color|[危险颜色,danger color,danger color]|SecondaryColor|1
$--color-danger: #F56C6C !default;
/// color|[信息颜色,info color,info color]|SecondaryColor|1
$--color-info: #909399 !default;
$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
......@@ -39,55 +47,81 @@ $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
/// color|[主要文字颜色,primary text color,primary text color]|FontColor|2
$--color-text-primary: #303133 !default;
/// color|[常规文字颜色,regular text color,regular text color]|FontColor|2
$--color-text-regular: #606266 !default;
/// color|[次要文字颜色,secondary text color,secondary text color]|FontColor|2
$--color-text-secondary: #909399 !default;
$--color-text-placeholder: #c0c4cc !default;
/// color|[占位文字颜色,placeholder text color,placeholder text color]|FontColor|2
$--color-text-placeholder: #C0C4CC !default;
/// color|[一级边框颜色,border color,border color]|BorderColor|3
$--border-color-base: #DCDFE6 !default;
/// color|[二级边框颜色,border color light,border color light]|BorderColor|3
$--border-color-light: #E4E7ED !default;
/// color|[三级边框颜色,border color lighter,border color lighter]|BorderColor|3
$--border-color-lighter: #EBEEF5 !default;
/// color|[四级边框颜色,border color extra light,border color extra light]|BorderColor|3
$--border-color-extra-light: #F2F6FC !default;
// Background
/// color|[基础背景色,base background color,base background color]|BackgroundColor|4
$--background-color-base: #f5f7fa !default;
/* Link
-------------------------- */
$--link-color: $--color-primary-light-2 !default;
$--link-hover-color: $--color-primary !default;
/* Background
-------------------------- */
$--background-color-base: #f5f7fa !default;
/* Border
-------------------------- */
$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-base: #dcdfe6 !default;
$--border-color-light: #e4e7ed !default;
$--border-color-lighter: #ebeef5 !default;
$--border-color-extra-light: #f2f6fc !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
/// borderRadius|[大圆角,border radius base,border radius base]|Radius|0
$--border-radius-base: 4px !default;
/// borderRadius|[小圆角,border radius small,border radius small]|Radius|0
$--border-radius-small: 2px !default;
/// borderRadius|[圆形圆角,border radius circle,border radius circle]|Radius|0
$--border-radius-circle: 100% !default;
/* Box-shadow
-------------------------- */
// Box-shadow
/// boxShadow|[基础投影,box shadow base,box shadow base]|Shadow|1
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
// boxShadow|[深色投影,box shadow,box shadow]|Shadow|1
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
/// boxShadow|[浅色投影,box shadow,box shadow]|Shadow|1
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
/* Fill
-------------------------- */
$--fill-base: $--color-white !default;
/* Font
/* Typography
-------------------------- */
$--font-path: 'fonts' !default;
/// fontSize|[主标题文字大小,Extra large font size,Extra large font size]|FontSize|0
$--font-size-extra-large: 20px !default;
/// fontSize|[标题文字大小,large font size,large font size]|FontSize|0
$--font-size-large: 18px !default;
/// fontSize|[小标题文字大小,Medium font size,Medium font size]|FontSize|0
$--font-size-medium: 16px !default;
/// fontSize|[正文文字大小,base font size,base font size]|FontSize|0
$--font-size-base: 14px !default;
/// fontSize|[正文（小）文字大小,small font size,small font size]|FontSize|0
$--font-size-small: 13px !default;
$--font-size-large: 18px !default;
$--font-color-disabled-base: #bbb !default;
/// fontSize|[辅助文字大小,Extra small font size,Extra small font size]|FontSize|0
$--font-size-extra-small: 12px !default;
/// fontWeight|[主要文字粗细,primary font weight,primary font weight]|FontWeight|1
$--font-weight-primary: 500 !default;
/// fontWeight|[次要文字粗细,secondary font weight,secondary font weight]|FontWeight|1
$--font-weight-secondary: 100 !default;
/// fontLineHeight|[主要文字行高,primary font line height,primary font line height]|LineHeight|2
$--font-line-height-primary: 24px !default;
/// fontLineHeight|[次要文字行高,secondary font line height,secondary font line height]|LineHeight|2
$--font-line-height-secondary: 16px !default;
$--font-color-disabled-base: #bbb !default;
/* Size
-------------------------- */
$--size-base: 14px !default;
......@@ -161,15 +195,22 @@ $--checkbox-button-checked-border-color: $--color-primary !default;
/* Radio
-------------------------- */
$--radio-font-size: 14px !default;
/// fontSize|[]|Font|1
$--radio-font-size: $--font-size-base !default;
/// fontWeight|[]|Font|1
$--radio-font-weight: $--font-weight-primary !default;
$--radio-color: $--color-text-regular !default;
/// color|[]|Color|0
$--radio-font-color: $--color-text-regular !default;
$--radio-input-height: 14px !default;
$--radio-input-width: 14px !default;
/// borderRadius|[]|Border|2
$--radio-input-border-radius: $--border-radius-circle !default;
$--radio-input-fill: $--color-white !default;
/// color|[]|Color|0
$--radio-input-background-color: $--color-white !default;
$--radio-input-border: $--border-base !default;
/// color|[]|Color|0
$--radio-input-border-color: $--border-color-base !default;
/// color|[]|Color|0
$--radio-icon-color: $--color-white !default;
$--radio-disabled-input-border-color: $--disabled-border-base !default;
......@@ -180,9 +221,13 @@ $--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
$--radio-checked-text-color: $--color-primary !default;
/// color|[]|Color|0
$--radio-checked-font-color: $--color-primary !default;
/// color|[]|Color|0
$--radio-checked-input-border-color: $--color-primary !default;
$--radio-checked-input-fill: $--color-white !default;
/// color|[]|Color|0
$--radio-checked-input-background-color: $--color-white !default;
/// color|[]|Color|0
$--radio-checked-icon-color: $--color-primary !default;
$--radio-input-border-color-hover: $--color-primary !default;
......@@ -202,9 +247,13 @@ $--radio-bordered-mini-input-height: 12px !default;
$--radio-bordered-mini-input-width: 12px !default;
$--radio-bordered-mini-height: 28px !default;
/// fontSize|[]|Font|1
$--radio-button-font-size: $--font-size-base !default;
$--radio-button-checked-fill: $--color-primary !default;
$--radio-button-checked-color: $--color-white !default;
/// color|[]|Color|0
$--radio-button-checked-background-color: $--color-primary !default;
/// color|[]|Color|0
$--radio-button-checked-font-color: $--color-white !default;
/// color|[]|Color|0
$--radio-button-checked-border-color: $--color-primary !default;
$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
......@@ -393,17 +442,23 @@ $--tab-vertical-header-count-fill: $--color-text-secondary !default;
/* Button
-------------------------- */
$--button-font-size: 14px !default;
/// fontSize|[]|Font|1
$--button-font-size: $--font-size-base !default;
/// fontWeight|[]|Font|1
$--button-font-weight: $--font-weight-primary !default;
/// borderRadius|[]|Border|2
$--button-border-radius: $--border-radius-base !default;
$--button-padding-vertical: 12px !default;
$--button-padding-horizontal: 20px !default;
$--button-medium-font-size: 14px !default;
/// fontSize|[]|Font|1
$--button-medium-font-size: $--font-size-base !default;
/// borderRadius|[]|Border|2
$--button-medium-border-radius: $--border-radius-base !default;
$--button-medium-padding-vertical: 10px !default;
$--button-medium-padding-horizontal: 20px !default;
/// fontSize|[]|Font|1
$--button-small-font-size: 12px !default;
$--button-small-border-radius: #{$--border-radius-base - 1} !default;
$--button-small-padding-vertical: 9px !default;
......@@ -414,33 +469,50 @@ $--button-mini-border-radius: #{$--border-radius-base - 1} !default;
$--button-mini-padding-vertical: 7px !default;
$--button-mini-padding-horizontal: 15px !default;
$--button-default-color: $--color-text-regular !default;
$--button-default-fill: $--color-white !default;
$--button-default-border: $--border-color-base !default;
$--button-disabled-color: $--color-text-placeholder !default;
$--button-disabled-fill: $--color-white !default;
$--button-disabled-border: $--border-color-lighter !default;
$--button-primary-border: $--color-primary !default;
$--button-primary-color: $--color-white !default;
$--button-primary-fill: $--color-primary !default;
$--button-success-border: $--color-success !default;
$--button-success-color: $--color-white !default;
$--button-success-fill: $--color-success !default;
$--button-warning-border: $--color-warning !default;
$--button-warning-color: $--color-white !default;
$--button-warning-fill: $--color-warning !default;
$--button-danger-border: $--color-danger !default;
$--button-danger-color: $--color-white !default;
$--button-danger-fill: $--color-danger !default;
$--button-info-border: $--color-info !default;
$--button-info-color: $--color-white !default;
$--button-info-fill: $--color-info !default;
/// color|[]|Color|0
$--button-default-font-color: $--color-text-regular !default;
/// color|[]|Color|0
$--button-default-background-color: $--color-white !default;
/// color|[]|Color|0
$--button-default-border-color: $--border-color-base !default;
/// color|[]|Color|0
$--button-disabled-font-color: $--color-text-placeholder !default;
/// color|[]|Color|0
$--button-disabled-background-color: $--color-white !default;
/// color|[]|Color|0
$--button-disabled-border-color: $--border-color-lighter !default;
/// color|[]|Color|0
$--button-primary-border-color: $--color-primary !default;
/// color|[]|Color|0
$--button-primary-font-color: $--color-white !default;
/// color|[]|Color|0
$--button-primary-background-color: $--color-primary !default;
/// color|[]|Color|0
$--button-success-border-color: $--color-success !default;
/// color|[]|Color|0
$--button-success-font-color: $--color-white !default;
/// color|[]|Color|0
$--button-success-background-color: $--color-success !default;
/// color|[]|Color|0
$--button-warning-border-color: $--color-warning !default;
/// color|[]|Color|0
$--button-warning-font-color: $--color-white !default;
/// color|[]|Color|0
$--button-warning-background-color: $--color-warning !default;
/// color|[]|Color|0
$--button-danger-border-color: $--color-danger !default;
/// color|[]|Color|0
$--button-danger-font-color: $--color-white !default;
/// color|[]|Color|0
$--button-danger-background-color: $--color-danger !default;
/// color|[]|Color|0
$--button-info-border-color: $--color-info !default;
/// color|[]|Color|0
$--button-info-font-color: $--color-white !default;
/// color|[]|Color|0
$--button-info-background-color: $--color-info !default;
$--button-hover-tint-percent: 20% !default;
$--button-active-shade-percent: 10% !default;
......@@ -470,7 +542,8 @@ $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
$--dialog-close-hover-color: $--color-primary !default;
$--dialog-title-font-size: $--font-size-large !default;
$--dialog-font-size: 14px !default;
$--dialog-line-height: $--font-line-height-primary !default;
/// fontLineHeight|[]
$--dialog-font-line-height: $--font-line-height-primary !default;
$--dialog-padding-primary: 20px !default;
/* Table
......
packages/theme-chalk/src/dialog.scss
View file @ febdd3bb
......@@ -58,7 +58,7 @@
}
@include e(title) {
line-height: $--dialog-line-height;
line-height: $--dialog-font-line-height;
font-size: $--dialog-title-font-size;
color: $--color-text-primary;
}
......
packages/theme-chalk/src/radio-button.scss
View file @ febdd3bb
......@@ -12,11 +12,11 @@
line-height: 1;
white-space: nowrap;
vertical-align: middle;
background: $--button-default-fill;
background: $--button-default-background-color;
border: $--border-base;
font-weight: $--button-font-weight;
border-left: 0;
color: $--button-default-color;
color: $--button-default-font-color;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
......@@ -57,8 +57,8 @@
&:checked {
& + .el-radio-button__inner {
color: $--radio-button-checked-color;
background-color: $--radio-button-checked-fill;
color: $--radio-button-checked-font-color;
background-color: $--radio-button-checked-background-color;
border-color: $--radio-button-checked-border-color;
box-shadow: -1px 0 0 0 $--radio-button-checked-border-color;
}
......@@ -66,11 +66,11 @@
&:disabled {
& + .el-radio-button__inner {
color: $--button-disabled-color;
color: $--button-disabled-font-color;
cursor: not-allowed;
background-image: none;
background-color: $--button-disabled-fill;
border-color: $--button-disabled-border;
background-color: $--button-disabled-background-color;
border-color: $--button-disabled-border-color;
box-shadow: none;
}
&:checked + .el-radio-button__inner {
......
packages/theme-chalk/src/radio.scss
View file @ febdd3bb
......@@ -4,7 +4,7 @@
@import "common/var";
@include b(radio) {
color: $--radio-color;
color: $--radio-font-color;
font-weight: $--radio-font-weight;
line-height: 1;
position: relative;
......@@ -135,7 +135,7 @@
}
& + .el-radio__label {
color: $--radio-checked-text-color;
color: $--radio-checked-font-color;
}
}
......@@ -150,7 +150,7 @@
border-radius: $--radio-input-border-radius;
width: $--radio-input-width;
height: $--radio-input-height;
background-color: $--radio-input-fill;
background-color: $--radio-input-background-color;
position: relative;
cursor: pointer;
display: inline-block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment