Tag add more color and rename old colors
This commit is contained in:
梁灏
parent
a980832f84
commit
855d49406c
9 changed files with 1598 additions and 39 deletions
|
|
@ -1,5 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<Tag color="default">default</Tag>
|
||||
<Tag color="primary">primary</Tag>
|
||||
<Tag color="success">success</Tag>
|
||||
<Tag color="error">error</Tag>
|
||||
<Tag color="warning">warning</Tag>
|
||||
<Tag color="magenta">magenta</Tag>
|
||||
<Tag color="red">red</Tag>
|
||||
<Tag color="volcano">volcano</Tag>
|
||||
<Tag color="orange">orange</Tag>
|
||||
<Tag color="gold">gold</Tag>
|
||||
<Tag color="gold">不错</Tag>
|
||||
<Tag color="lime">lime</Tag>
|
||||
<Tag color="green">green</Tag>
|
||||
<Tag color="cyan">cyan</Tag>
|
||||
<Tag color="blue">blue</Tag>
|
||||
<Tag color="geekblue">geekblue</Tag>
|
||||
<Tag color="purple">purple</Tag>
|
||||
<Tag color="white">purple</Tag>
|
||||
</div>
|
||||
<Tag checkable>标签一</Tag>
|
||||
<Tag>标签二</Tag>
|
||||
<Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
|
||||
|
|
@ -9,15 +29,15 @@
|
|||
<Tag type="dot">标签一</Tag>
|
||||
<Tag type="dot" closable>标签二</Tag>
|
||||
<br><br>
|
||||
<Tag closable color="blue" checkable>标签一</Tag>
|
||||
<Tag closable color="green" checkable>标签二</Tag>
|
||||
<Tag closable color="red" checkable>标签三</Tag>
|
||||
<Tag closable color="yellow" checkable>标签四</Tag>
|
||||
<Tag closable color="primary" checkable>标签一</Tag>
|
||||
<Tag closable color="success" checkable>标签二</Tag>
|
||||
<Tag closable color="error" checkable>标签三</Tag>
|
||||
<Tag closable color="warning" checkable>标签四</Tag>
|
||||
<br><br>
|
||||
<Tag color="blue" checkable>标签一</Tag>
|
||||
<Tag color="green" checkable>标签二</Tag>
|
||||
<Tag color="red" checkable>标签三</Tag>
|
||||
<Tag color="yellow" checkable>标签四</Tag>
|
||||
<Tag color="primary" checkable>标签一</Tag>
|
||||
<Tag color="success" checkable>标签二</Tag>
|
||||
<Tag color="error" checkable>标签三</Tag>
|
||||
<Tag color="warning" checkable>标签四</Tag>
|
||||
<br><br>
|
||||
<Tag closable color="#EF6AFF" checkable>标签一</Tag>
|
||||
<Tag color="#EF6AFF" checkable>标签一</Tag>
|
||||
|
|
@ -30,15 +50,15 @@
|
|||
<Tag type="dot" closable color="#EF6AFF">标签三</Tag>
|
||||
<Tag closable color="default">标签四</Tag>
|
||||
<br><br>
|
||||
<Tag type="border" closable color="blue" checkable>标签一</Tag>
|
||||
<Tag type="border" closable color="green">标签二</Tag>
|
||||
<Tag type="border" closable color="red">标签三</Tag>
|
||||
<Tag type="border" closable color="yellow">标签四</Tag>
|
||||
<Tag type="border" closable color="primary" checkable>标签一</Tag>
|
||||
<Tag type="border" closable color="success">标签二</Tag>
|
||||
<Tag type="border" closable color="error">标签三</Tag>
|
||||
<Tag type="border" closable color="warning">标签四</Tag>
|
||||
<br><br>
|
||||
<Tag type="dot" closable color="blue" checkable>标签一</Tag>
|
||||
<Tag type="dot" closable color="green">标签二</Tag>
|
||||
<Tag type="dot" closable color="red">标签三</Tag>
|
||||
<Tag type="dot" closable color="yellow">标签四</Tag>
|
||||
<Tag type="dot" closable color="primary" checkable>标签一</Tag>
|
||||
<Tag type="dot" closable color="success">标签二</Tag>
|
||||
<Tag type="dot" closable color="error">标签三</Tag>
|
||||
<Tag type="dot" closable color="warning">标签四</Tag>
|
||||
<br><br>
|
||||
<Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag>
|
||||
<Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@
|
|||
},
|
||||
contentPaddingStyle () {
|
||||
const styles = {};
|
||||
if (!!this.padding) styles['padding'] = this.padding;
|
||||
if (this.padding !== '') styles['padding'] = this.padding;
|
||||
return styles;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@
|
|||
import Icon from '../icon';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
const prefixCls = 'ivu-tag';
|
||||
const initColorList = ['blue', 'green', 'red', 'yellow', 'default'];
|
||||
const initColorList = ['default', 'primary', 'success', 'warning', 'error', 'blue', 'green', 'red', 'yellow', 'pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
|
||||
const colorList = ['pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
|
||||
|
||||
export default {
|
||||
name: 'Tag',
|
||||
components: { Icon },
|
||||
|
|
@ -74,7 +76,7 @@
|
|||
return [
|
||||
`${prefixCls}-text`,
|
||||
this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '',
|
||||
(this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked ? `${prefixCls}-color-white` : '') : ''
|
||||
(this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked && colorList.indexOf(this.color) < 0 ? `${prefixCls}-color-white` : '') : ''
|
||||
];
|
||||
},
|
||||
dotClasses () {
|
||||
|
|
|
|||
110
src/styles/color/bezierEasing.less
Executable file
110
src/styles/color/bezierEasing.less
Executable file
|
|
@ -0,0 +1,110 @@
|
|||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
|
||||
.bezierEasingMixin() {
|
||||
@functions: ~`(function() {
|
||||
var NEWTON_ITERATIONS = 4;
|
||||
var NEWTON_MIN_SLOPE = 0.001;
|
||||
var SUBDIVISION_PRECISION = 0.0000001;
|
||||
var SUBDIVISION_MAX_ITERATIONS = 10;
|
||||
|
||||
var kSplineTableSize = 11;
|
||||
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
|
||||
|
||||
var float32ArraySupported = typeof Float32Array === 'function';
|
||||
|
||||
function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
|
||||
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
|
||||
function C (aA1) { return 3.0 * aA1; }
|
||||
|
||||
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
|
||||
function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
|
||||
|
||||
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
|
||||
function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
|
||||
|
||||
function binarySubdivide (aX, aA, aB, mX1, mX2) {
|
||||
var currentX, currentT, i = 0;
|
||||
do {
|
||||
currentT = aA + (aB - aA) / 2.0;
|
||||
currentX = calcBezier(currentT, mX1, mX2) - aX;
|
||||
if (currentX > 0.0) {
|
||||
aB = currentT;
|
||||
} else {
|
||||
aA = currentT;
|
||||
}
|
||||
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
|
||||
return currentT;
|
||||
}
|
||||
|
||||
function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
|
||||
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
|
||||
var currentSlope = getSlope(aGuessT, mX1, mX2);
|
||||
if (currentSlope === 0.0) {
|
||||
return aGuessT;
|
||||
}
|
||||
var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
|
||||
aGuessT -= currentX / currentSlope;
|
||||
}
|
||||
return aGuessT;
|
||||
}
|
||||
|
||||
var BezierEasing = function (mX1, mY1, mX2, mY2) {
|
||||
if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
|
||||
throw new Error('bezier x values must be in [0, 1] range');
|
||||
}
|
||||
|
||||
// Precompute samples table
|
||||
var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
|
||||
if (mX1 !== mY1 || mX2 !== mY2) {
|
||||
for (var i = 0; i < kSplineTableSize; ++i) {
|
||||
sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
|
||||
}
|
||||
}
|
||||
|
||||
function getTForX (aX) {
|
||||
var intervalStart = 0.0;
|
||||
var currentSample = 1;
|
||||
var lastSample = kSplineTableSize - 1;
|
||||
|
||||
for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
|
||||
intervalStart += kSampleStepSize;
|
||||
}
|
||||
--currentSample;
|
||||
|
||||
// Interpolate to provide an initial guess for t
|
||||
var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
|
||||
var guessForT = intervalStart + dist * kSampleStepSize;
|
||||
|
||||
var initialSlope = getSlope(guessForT, mX1, mX2);
|
||||
if (initialSlope >= NEWTON_MIN_SLOPE) {
|
||||
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
|
||||
} else if (initialSlope === 0.0) {
|
||||
return guessForT;
|
||||
} else {
|
||||
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
|
||||
}
|
||||
}
|
||||
|
||||
return function BezierEasing (x) {
|
||||
if (mX1 === mY1 && mX2 === mY2) {
|
||||
return x; // linear
|
||||
}
|
||||
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
|
||||
if (x === 0) {
|
||||
return 0;
|
||||
}
|
||||
if (x === 1) {
|
||||
return 1;
|
||||
}
|
||||
return calcBezier(getTForX(x), mY1, mY2);
|
||||
};
|
||||
};
|
||||
|
||||
this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
|
||||
// less 3 requires a return
|
||||
return '';
|
||||
})()`;
|
||||
}
|
||||
// It is hacky way to make this function will be compiled preferentially by less
|
||||
// resolve error: `ReferenceError: colorPalette is not defined`
|
||||
// https://github.com/ant-design/ant-motion/issues/44
|
||||
.bezierEasingMixin();
|
||||
75
src/styles/color/colorPalette.less
Executable file
75
src/styles/color/colorPalette.less
Executable file
|
|
@ -0,0 +1,75 @@
|
|||
/* stylelint-disable no-duplicate-selectors */
|
||||
@import "bezierEasing";
|
||||
@import "tinyColor";
|
||||
|
||||
// We create a very complex algorithm which take the place of original tint/shade color system
|
||||
// to make sure no one can understand it 👻
|
||||
// and create an entire color palette magicly by inputing just a single primary color.
|
||||
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
|
||||
.colorPaletteMixin() {
|
||||
@functions: ~`(function() {
|
||||
var hueStep = 2;
|
||||
var saturationStep = 16;
|
||||
var saturationStep2 = 5;
|
||||
var brightnessStep1 = 5;
|
||||
var brightnessStep2 = 15;
|
||||
var lightColorCount = 5;
|
||||
var darkColorCount = 4;
|
||||
|
||||
var getHue = function(hsv, i, isLight) {
|
||||
var hue;
|
||||
if (hsv.h >= 60 && hsv.h <= 240) {
|
||||
hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
|
||||
} else {
|
||||
hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
|
||||
}
|
||||
if (hue < 0) {
|
||||
hue += 360;
|
||||
} else if (hue >= 360) {
|
||||
hue -= 360;
|
||||
}
|
||||
return Math.round(hue);
|
||||
};
|
||||
var getSaturation = function(hsv, i, isLight) {
|
||||
var saturation;
|
||||
if (isLight) {
|
||||
saturation = Math.round(hsv.s * 100) - saturationStep * i;
|
||||
} else if (i == darkColorCount) {
|
||||
saturation = Math.round(hsv.s * 100) + saturationStep;
|
||||
} else {
|
||||
saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
|
||||
}
|
||||
if (saturation > 100) {
|
||||
saturation = 100;
|
||||
}
|
||||
if (isLight && i === lightColorCount && saturation > 10) {
|
||||
saturation = 10;
|
||||
}
|
||||
if (saturation < 6) {
|
||||
saturation = 6;
|
||||
}
|
||||
return Math.round(saturation);
|
||||
};
|
||||
var getValue = function(hsv, i, isLight) {
|
||||
if (isLight) {
|
||||
return Math.round(hsv.v * 100) + brightnessStep1 * i;
|
||||
}
|
||||
return Math.round(hsv.v * 100) - brightnessStep2 * i;
|
||||
};
|
||||
|
||||
this.colorPalette = function(color, index) {
|
||||
var isLight = index <= 6;
|
||||
var hsv = tinycolor(color).toHsv();
|
||||
var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
|
||||
return tinycolor({
|
||||
h: getHue(hsv, i, isLight),
|
||||
s: getSaturation(hsv, i, isLight),
|
||||
v: getValue(hsv, i, isLight),
|
||||
}).toHexString();
|
||||
};
|
||||
})()`;
|
||||
}
|
||||
// It is hacky way to make this function will be compiled preferentially by less
|
||||
// resolve error: `ReferenceError: colorPalette is not defined`
|
||||
// https://github.com/ant-design/ant-motion/issues/44
|
||||
.colorPaletteMixin();
|
||||
146
src/styles/color/colors.less
Executable file
146
src/styles/color/colors.less
Executable file
|
|
@ -0,0 +1,146 @@
|
|||
@import 'colorPalette';
|
||||
|
||||
// color palettes
|
||||
@blue-1: color(~`colorPalette("@{blue-6}", 1)`);
|
||||
@blue-2: color(~`colorPalette("@{blue-6}", 2)`);
|
||||
@blue-3: color(~`colorPalette("@{blue-6}", 3)`);
|
||||
@blue-4: color(~`colorPalette("@{blue-6}", 4)`);
|
||||
@blue-5: color(~`colorPalette("@{blue-6}", 5)`);
|
||||
@blue-6: #1890ff;
|
||||
@blue-7: color(~`colorPalette("@{blue-6}", 7)`);
|
||||
@blue-8: color(~`colorPalette("@{blue-6}", 8)`);
|
||||
@blue-9: color(~`colorPalette("@{blue-6}", 9)`);
|
||||
@blue-10: color(~`colorPalette("@{blue-6}", 10)`);
|
||||
|
||||
@purple-1: color(~`colorPalette("@{purple-6}", 1)`);
|
||||
@purple-2: color(~`colorPalette("@{purple-6}", 2)`);
|
||||
@purple-3: color(~`colorPalette("@{purple-6}", 3)`);
|
||||
@purple-4: color(~`colorPalette("@{purple-6}", 4)`);
|
||||
@purple-5: color(~`colorPalette("@{purple-6}", 5)`);
|
||||
@purple-6: #722ed1;
|
||||
@purple-7: color(~`colorPalette("@{purple-6}", 7)`);
|
||||
@purple-8: color(~`colorPalette("@{purple-6}", 8)`);
|
||||
@purple-9: color(~`colorPalette("@{purple-6}", 9)`);
|
||||
@purple-10: color(~`colorPalette("@{purple-6}", 10)`);
|
||||
|
||||
@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`);
|
||||
@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`);
|
||||
@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
|
||||
@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
|
||||
@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
|
||||
@cyan-6: #13c2c2;
|
||||
@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
|
||||
@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
|
||||
@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
|
||||
@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`);
|
||||
|
||||
@green-1: color(~`colorPalette("@{green-6}", 1)`);
|
||||
@green-2: color(~`colorPalette("@{green-6}", 2)`);
|
||||
@green-3: color(~`colorPalette("@{green-6}", 3)`);
|
||||
@green-4: color(~`colorPalette("@{green-6}", 4)`);
|
||||
@green-5: color(~`colorPalette("@{green-6}", 5)`);
|
||||
@green-6: #52c41a;
|
||||
@green-7: color(~`colorPalette("@{green-6}", 7)`);
|
||||
@green-8: color(~`colorPalette("@{green-6}", 8)`);
|
||||
@green-9: color(~`colorPalette("@{green-6}", 9)`);
|
||||
@green-10: color(~`colorPalette("@{green-6}", 10)`);
|
||||
|
||||
@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
|
||||
@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
|
||||
@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
|
||||
@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
|
||||
@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
|
||||
@magenta-6: #eb2f96;
|
||||
@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
|
||||
@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
|
||||
@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
|
||||
@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
|
||||
|
||||
// alias of magenta
|
||||
@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
|
||||
@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
|
||||
@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
|
||||
@pink-4: color(~`colorPalette("@{pink-6}", 4)`);
|
||||
@pink-5: color(~`colorPalette("@{pink-6}", 5)`);
|
||||
@pink-6: #eb2f96;
|
||||
@pink-7: color(~`colorPalette("@{pink-6}", 7)`);
|
||||
@pink-8: color(~`colorPalette("@{pink-6}", 8)`);
|
||||
@pink-9: color(~`colorPalette("@{pink-6}", 9)`);
|
||||
@pink-10: color(~`colorPalette("@{pink-6}", 10)`);
|
||||
|
||||
@red-1: color(~`colorPalette("@{red-6}", 1)`);
|
||||
@red-2: color(~`colorPalette("@{red-6}", 2)`);
|
||||
@red-3: color(~`colorPalette("@{red-6}", 3)`);
|
||||
@red-4: color(~`colorPalette("@{red-6}", 4)`);
|
||||
@red-5: color(~`colorPalette("@{red-6}", 5)`);
|
||||
@red-6: #f5222d;
|
||||
@red-7: color(~`colorPalette("@{red-6}", 7)`);
|
||||
@red-8: color(~`colorPalette("@{red-6}", 8)`);
|
||||
@red-9: color(~`colorPalette("@{red-6}", 9)`);
|
||||
@red-10: color(~`colorPalette("@{red-6}", 10)`);
|
||||
|
||||
@orange-1: color(~`colorPalette("@{orange-6}", 1)`);
|
||||
@orange-2: color(~`colorPalette("@{orange-6}", 2)`);
|
||||
@orange-3: color(~`colorPalette("@{orange-6}", 3)`);
|
||||
@orange-4: color(~`colorPalette("@{orange-6}", 4)`);
|
||||
@orange-5: color(~`colorPalette("@{orange-6}", 5)`);
|
||||
@orange-6: #fa8c16;
|
||||
@orange-7: color(~`colorPalette("@{orange-6}", 7)`);
|
||||
@orange-8: color(~`colorPalette("@{orange-6}", 8)`);
|
||||
@orange-9: color(~`colorPalette("@{orange-6}", 9)`);
|
||||
@orange-10: color(~`colorPalette("@{orange-6}", 10)`);
|
||||
|
||||
@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`);
|
||||
@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`);
|
||||
@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
|
||||
@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
|
||||
@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
|
||||
@yellow-6: #fadb14;
|
||||
@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
|
||||
@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
|
||||
@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
|
||||
@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
|
||||
|
||||
@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
|
||||
@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
|
||||
@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
|
||||
@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
|
||||
@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
|
||||
@volcano-6: #fa541c;
|
||||
@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
|
||||
@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
|
||||
@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
|
||||
@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
|
||||
|
||||
@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
|
||||
@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
|
||||
@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
|
||||
@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
|
||||
@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
|
||||
@geekblue-6: #2f54eb;
|
||||
@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
|
||||
@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
|
||||
@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
|
||||
@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
|
||||
|
||||
@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
|
||||
@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
|
||||
@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
|
||||
@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
|
||||
@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
|
||||
@lime-6: #a0d911;
|
||||
@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
|
||||
@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
|
||||
@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
|
||||
@lime-10: color(~`colorPalette("@{lime-6}", 10)`);
|
||||
|
||||
@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
|
||||
@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
|
||||
@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
|
||||
@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
|
||||
@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
|
||||
@gold-6: #faad14;
|
||||
@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
|
||||
@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
|
||||
@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
|
||||
@gold-10: color(~`colorPalette("@{gold-6}", 10)`);
|
||||
1184
src/styles/color/tinyColor.less
Executable file
1184
src/styles/color/tinyColor.less
Executable file
File diff suppressed because it is too large
Load diff
|
|
@ -28,19 +28,19 @@
|
|||
}
|
||||
|
||||
&-color{
|
||||
&-red{
|
||||
&-error{
|
||||
color: @error-color !important;
|
||||
border-color: @error-color;
|
||||
}
|
||||
&-green{
|
||||
&-success{
|
||||
color: @success-color !important;
|
||||
border-color: @success-color;
|
||||
}
|
||||
&-blue{
|
||||
&-primary{
|
||||
color: @link-color !important;
|
||||
border-color: @link-color;
|
||||
}
|
||||
&-yellow{
|
||||
&-warning{
|
||||
color: @warning-color !important;
|
||||
border-color: @warning-color;
|
||||
}
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.@{tag-prefix-cls}-blue {
|
||||
&.@{tag-prefix-cls}-primary {
|
||||
color: @link-color !important;
|
||||
border: 1px solid @link-color !important;
|
||||
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
color: @link-color !important;
|
||||
}
|
||||
}
|
||||
&.@{tag-prefix-cls}-green {
|
||||
&.@{tag-prefix-cls}-success {
|
||||
color: @success-color !important;
|
||||
border: 1px solid @success-color !important;
|
||||
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
color: @success-color !important;
|
||||
}
|
||||
}
|
||||
&.@{tag-prefix-cls}-yellow {
|
||||
&.@{tag-prefix-cls}-warning {
|
||||
color: @warning-color !important;
|
||||
border: 1px solid @warning-color !important;
|
||||
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
color: @warning-color !important;
|
||||
}
|
||||
}
|
||||
&.@{tag-prefix-cls}-red {
|
||||
&.@{tag-prefix-cls}-error {
|
||||
color: @error-color !important;
|
||||
border: 1px solid @error-color !important;
|
||||
|
||||
|
|
@ -186,10 +186,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-blue,
|
||||
&-green,
|
||||
&-yellow,
|
||||
&-red {
|
||||
&-primary,
|
||||
&-success,
|
||||
&-warning,
|
||||
&-error {
|
||||
border: 0;
|
||||
&,
|
||||
a,
|
||||
|
|
@ -200,27 +200,47 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-blue,
|
||||
&-blue&-dot &-dot-inner
|
||||
&-primary,
|
||||
&-primary&-dot &-dot-inner
|
||||
{
|
||||
background: @link-color;
|
||||
}
|
||||
|
||||
&-green,
|
||||
&-green&-dot &-dot-inner
|
||||
&-success,
|
||||
&-success&-dot &-dot-inner
|
||||
{
|
||||
background: @success-color;
|
||||
}
|
||||
|
||||
&-yellow,
|
||||
&-yellow&-dot &-dot-inner
|
||||
&-warning,
|
||||
&-warning&-dot &-dot-inner
|
||||
{
|
||||
background: @warning-color;
|
||||
}
|
||||
|
||||
&-red,
|
||||
&-red&-dot &-dot-inner
|
||||
&-error,
|
||||
&-error&-dot &-dot-inner
|
||||
{
|
||||
background: @error-color;
|
||||
}
|
||||
|
||||
@colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;
|
||||
|
||||
.make-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||
.make-color-classes(@i - 1);
|
||||
@color: extract(@colors, @i);
|
||||
@lightColor: "@{color}-1";
|
||||
@lightBorderColor: "@{color}-3";
|
||||
@darkColor: "@{color}-6";
|
||||
&-@{color} {
|
||||
line-height: 20px;
|
||||
background: @@lightColor;
|
||||
border-color: @@lightBorderColor;
|
||||
.@{tag-prefix-cls}-text{
|
||||
color: @@darkColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.make-color-classes();
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import "color/colors";
|
||||
|
||||
// Prefix
|
||||
@css-prefix : ivu-;
|
||||
@css-prefix-iconfont : ivu-icon;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue