From 0b6cb1e0cca7c5fa6cf17f6e7e9bafb564e2a649 Mon Sep 17 00:00:00 2001 From: guy Date: Tue, 2 May 2017 13:14:10 +0800 Subject: [PATCH] bug --- bi/base.css | 16 +- bi/widget.js | 5 +- demo/css/center.css | 0 demo/css/color/bezierEasing.css | 0 demo/css/color/colorPalette.css | 0 demo/css/color/colors.css | 0 demo/css/color/tinyColor.css | 0 demo/css/face.css | 6 - demo/css/index.css | 3 - demo/css/main.css | 50 - demo/css/north.css | 13 - demo/css/preview.css | 3 - demo/css/theme.css | 5 - demo/css/west.css | 3 - demo/less/color/bezierEasing.less | 107 -- demo/less/color/colorPalette.less | 46 - demo/less/color/colors.less | 90 -- demo/less/color/tinyColor.less | 1183 ----------------- demo/less/theme.less | 301 ----- docs/base.css | 16 +- docs/demo.css | 5 - docs/widget.js | 5 +- src/css/base/table/table.grid.scrollbar.css | 16 +- src/less/base/table/table.grid.scrollbar.less | 16 +- src/widget/multiselect/multiselect.combo.js | 5 +- 25 files changed, 44 insertions(+), 1850 deletions(-) delete mode 100644 demo/css/center.css delete mode 100644 demo/css/color/bezierEasing.css delete mode 100644 demo/css/color/colorPalette.css delete mode 100644 demo/css/color/colors.css delete mode 100644 demo/css/color/tinyColor.css delete mode 100644 demo/css/face.css delete mode 100644 demo/css/index.css delete mode 100644 demo/css/main.css delete mode 100644 demo/css/north.css delete mode 100644 demo/css/preview.css delete mode 100644 demo/css/theme.css delete mode 100644 demo/css/west.css delete mode 100644 demo/less/color/bezierEasing.less delete mode 100644 demo/less/color/colorPalette.less delete mode 100644 demo/less/color/colors.less delete mode 100644 demo/less/color/tinyColor.less delete mode 100644 demo/less/theme.less diff --git a/bi/base.css b/bi/base.css index a2b20140d..3f7feeab0 100644 --- a/bi/base.css +++ b/bi/base.css @@ -1115,12 +1115,12 @@ li.CodeMirror-hint-active { transition-timing-function: ease; user-select: none; background-color: rgba(102, 102, 102, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666); border-radius: 5px; } .bi-theme-dark .scrollbar-layout-main { background-color: rgba(204, 204, 204, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc); } .scrollbar-layout-main-vertical { bottom: 0; @@ -1139,11 +1139,11 @@ li.CodeMirror-hint-active { left: 0; transition-property: background-color; background-color: rgba(102, 102, 102, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666); } .bi-theme-dark .scrollbar-layout-main-horizontal { background-color: rgba(204, 204, 204, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc); } /* Touching the scroll-track directly makes the scroll-track bolder */ .scrollbar-layout-main-horizontal.public-scrollbar-main-active, @@ -1197,23 +1197,23 @@ li.CodeMirror-hint-active { /* Touching the scroll-track directly makes the scroll-track bolder */ .public-scrollbar-face:after { background-color: rgba(102, 102, 102, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d666666,endColorstr=#4d666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d666666,endColorstr=#4d666666); } .bi-theme-dark .public-scrollbar-face:after { background-color: rgba(204, 204, 204, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dcccccc,endColorstr=#4dcccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dcccccc,endColorstr=#4dcccccc); } .public-scrollbar-main:hover .public-scrollbar-face:after, .public-scrollbar-main-active .public-scrollbar-face:after, .public-scrollbar-faceActive:after { background-color: rgba(102, 102, 102, 0.7); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666); } .bi-theme-dark .public-scrollbar-main:hover .public-scrollbar-face:after, .bi-theme-dark .public-scrollbar-main-active .public-scrollbar-face:after, .bi-theme-dark .public-scrollbar-faceActive:after { background-color: rgba(204, 204, 204, 0.7); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc); } .horizontal-scrollbar { bottom: 0; diff --git a/bi/widget.js b/bi/widget.js index 68ec4d108..54c1276be 100644 --- a/bi/widget.js +++ b/bi/widget.js @@ -9665,7 +9665,10 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, { toggle: false, el: this.trigger, adjustLength: 1, - popup: this.popup + popup: this.popup, + hideChecker: function (e) { + return triggerBtn.element.find(e.target).length === 0; + } }); this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { diff --git a/demo/css/center.css b/demo/css/center.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/demo/css/color/bezierEasing.css b/demo/css/color/bezierEasing.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/demo/css/color/colorPalette.css b/demo/css/color/colorPalette.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/demo/css/color/colors.css b/demo/css/color/colors.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/demo/css/color/tinyColor.css b/demo/css/color/tinyColor.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/demo/css/face.css b/demo/css/face.css deleted file mode 100644 index 310c89450..000000000 --- a/demo/css/face.css +++ /dev/null @@ -1,6 +0,0 @@ -/****添加计算宽度的--运算符直接需要space****/ -/****** common color(常用颜色,可用于普遍场景) *****/ -/**** custom color(自定义颜色,用于特定场景) ****/ -.demo-face .face-config .config-label { - font-size: 14px; -} diff --git a/demo/css/index.css b/demo/css/index.css deleted file mode 100644 index 2f6491e13..000000000 --- a/demo/css/index.css +++ /dev/null @@ -1,3 +0,0 @@ -/****添加计算宽度的--运算符直接需要space****/ -/****** common color(常用颜色,可用于普遍场景) *****/ -/**** custom color(自定义颜色,用于特定场景) ****/ diff --git a/demo/css/main.css b/demo/css/main.css deleted file mode 100644 index a7c674685..000000000 --- a/demo/css/main.css +++ /dev/null @@ -1,50 +0,0 @@ -/****添加计算宽度的--运算符直接需要space****/ -/****** common color(常用颜色,可用于普遍场景) *****/ -/**** custom color(自定义颜色,用于特定场景) ****/ -.layout-bg-white { - background-color: #ffffff; -} -.layout-bg-gray { - background-color: #eeeeee; -} -.layout-bg1 { - color: #ffffff; - background-color: #0088cc; -} -.layout-bg2 { - color: #ffffff; - background-color: #008B8B; -} -.layout-bg3 { - color: #ffffff; - background-color: #6495ED; -} -.layout-bg4 { - color: #ffffff; - background-color: #ff69b4; -} -.layout-bg5 { - color: #ffffff; - background-color: #B8860B; -} -.layout-bg6 { - color: #ffffff; - background-color: #d9534f; -} -.layout-bg7 { - color: #ffffff; - background-color: #ea4738; -} -.layout-bg8 { - color: #ffffff; - background-color: #6495ed; -} -.demo-main .bg1 { - background-color: #178cdf; -} -body { - background-color: #eff1f4; -} -body.bi-theme-dark { - background-color: #191B2B; -} diff --git a/demo/css/north.css b/demo/css/north.css deleted file mode 100644 index ffd6fe0a3..000000000 --- a/demo/css/north.css +++ /dev/null @@ -1,13 +0,0 @@ -/****添加计算宽度的--运算符直接需要space****/ -/****** common color(常用颜色,可用于普遍场景) *****/ -/**** custom color(自定义颜色,用于特定场景) ****/ -.demo-north { - background-color: #3c8dbc; -} -.demo-north .logo { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #ffffff; - background-color: #367fa9; - font-size: 20px; - font-weight: 300; -} diff --git a/demo/css/preview.css b/demo/css/preview.css deleted file mode 100644 index 2f6491e13..000000000 --- a/demo/css/preview.css +++ /dev/null @@ -1,3 +0,0 @@ -/****添加计算宽度的--运算符直接需要space****/ -/****** common color(常用颜色,可用于普遍场景) *****/ -/**** custom color(自定义颜色,用于特定场景) ****/ diff --git a/demo/css/theme.css b/demo/css/theme.css deleted file mode 100644 index 7f583cdfb..000000000 --- a/demo/css/theme.css +++ /dev/null @@ -1,5 +0,0 @@ -@font-face { - font-family: "Helvetica Neue For Number"; - src: local("Helvetica Neue"); - unicode-range: U+30-39; -} diff --git a/demo/css/west.css b/demo/css/west.css deleted file mode 100644 index 2f6491e13..000000000 --- a/demo/css/west.css +++ /dev/null @@ -1,3 +0,0 @@ -/****添加计算宽度的--运算符直接需要space****/ -/****** common color(常用颜色,可用于普遍场景) *****/ -/**** custom color(自定义颜色,用于特定场景) ****/ diff --git a/demo/less/color/bezierEasing.less b/demo/less/color/bezierEasing.less deleted file mode 100644 index 442ec8368..000000000 --- a/demo/less/color/bezierEasing.less +++ /dev/null @@ -1,107 +0,0 @@ -.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); -})()`; -} -// 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(); diff --git a/demo/less/color/colorPalette.less b/demo/less/color/colorPalette.less deleted file mode 100644 index 7c84cef7e..000000000 --- a/demo/less/color/colorPalette.less +++ /dev/null @@ -1,46 +0,0 @@ -@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 warmDark = 0.5; // warm color darken radio - var warmRotate = -26; // warm color rotate degree - var coldDark = 0.55; // cold color darken radio - var coldRotate = 10; // cold color rotate degree - var getShadeColor = function(c) { - var shadeColor = tinycolor(c); - // warm and cold color will darken in different radio, and rotate in different degree - // warmer color - if (shadeColor.toRgb().r > shadeColor.toRgb().b) { - return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString(); - } - // colder color - return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString(); - } - var primaryEasing = colorEasing(0.6); - this.colorPalette = function(color, index) { - var currentEasing = colorEasing(index * 0.1); - // return light colors after tint - if (index <= 6) { - return tinycolor.mix( - '#ffffff', - color, - currentEasing * 100 / primaryEasing - ).toHexString(); - } - return tinycolor.mix( - getShadeColor(color), - color, - (1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100 - ).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(); diff --git a/demo/less/color/colors.less b/demo/less/color/colors.less deleted file mode 100644 index 53f16229e..000000000 --- a/demo/less/color/colors.less +++ /dev/null @@ -1,90 +0,0 @@ -@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: #108ee9; -@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: #7265e6; -@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: #00a2ae; -@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: #00a854; -@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)`); - -@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: #f5317f; -@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: #f04134; -@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: #f56a00; -@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: #ffbf00; -@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)`); diff --git a/demo/less/color/tinyColor.less b/demo/less/color/tinyColor.less deleted file mode 100644 index 1d9520406..000000000 --- a/demo/less/color/tinyColor.less +++ /dev/null @@ -1,1183 +0,0 @@ -.tinyColorMixin() { -@functions: ~`(function() { -// TinyColor v1.4.1 -// https://github.com/bgrins/TinyColor -// 2016-07-07, Brian Grinstead, MIT License -var trimLeft = /^\s+/, - trimRight = /\s+$/, - tinyCounter = 0, - mathRound = Math.round, - mathMin = Math.min, - mathMax = Math.max, - mathRandom = Math.random; - -function tinycolor (color, opts) { - - color = (color) ? color : ''; - opts = opts || { }; - - // If input is already a tinycolor, return itself - if (color instanceof tinycolor) { - return color; - } - // If we are called as a function, call using new instead - if (!(this instanceof tinycolor)) { - return new tinycolor(color, opts); - } - - var rgb = inputToRGB(color); - this._originalInput = color, - this._r = rgb.r, - this._g = rgb.g, - this._b = rgb.b, - this._a = rgb.a, - this._roundA = mathRound(100*this._a) / 100, - this._format = opts.format || rgb.format; - this._gradientType = opts.gradientType; - - // Don't let the range of [0,255] come back in [0,1]. - // Potentially lose a little bit of precision here, but will fix issues where - // .5 gets interpreted as half of the total, instead of half of 1 - // If it was supposed to be 128, this was already taken care of by inputToRgb - if (this._r < 1) { this._r = mathRound(this._r); } - if (this._g < 1) { this._g = mathRound(this._g); } - if (this._b < 1) { this._b = mathRound(this._b); } - - this._ok = rgb.ok; - this._tc_id = tinyCounter++; -} - -tinycolor.prototype = { - isDark: function() { - return this.getBrightness() < 128; - }, - isLight: function() { - return !this.isDark(); - }, - isValid: function() { - return this._ok; - }, - getOriginalInput: function() { - return this._originalInput; - }, - getFormat: function() { - return this._format; - }, - getAlpha: function() { - return this._a; - }, - getBrightness: function() { - //http://www.w3.org/TR/AERT#color-contrast - var rgb = this.toRgb(); - return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; - }, - getLuminance: function() { - //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef - var rgb = this.toRgb(); - var RsRGB, GsRGB, BsRGB, R, G, B; - RsRGB = rgb.r/255; - GsRGB = rgb.g/255; - BsRGB = rgb.b/255; - - if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} - if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} - if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} - return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); - }, - setAlpha: function(value) { - this._a = boundAlpha(value); - this._roundA = mathRound(100*this._a) / 100; - return this; - }, - toHsv: function() { - var hsv = rgbToHsv(this._r, this._g, this._b); - return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; - }, - toHsvString: function() { - var hsv = rgbToHsv(this._r, this._g, this._b); - var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); - return (this._a == 1) ? - "hsv(" + h + ", " + s + "%, " + v + "%)" : - "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; - }, - toHsl: function() { - var hsl = rgbToHsl(this._r, this._g, this._b); - return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; - }, - toHslString: function() { - var hsl = rgbToHsl(this._r, this._g, this._b); - var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); - return (this._a == 1) ? - "hsl(" + h + ", " + s + "%, " + l + "%)" : - "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; - }, - toHex: function(allow3Char) { - return rgbToHex(this._r, this._g, this._b, allow3Char); - }, - toHexString: function(allow3Char) { - return '#' + this.toHex(allow3Char); - }, - toHex8: function(allow4Char) { - return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); - }, - toHex8String: function(allow4Char) { - return '#' + this.toHex8(allow4Char); - }, - toRgb: function() { - return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; - }, - toRgbString: function() { - return (this._a == 1) ? - "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : - "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; - }, - toPercentageRgb: function() { - return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; - }, - toPercentageRgbString: function() { - return (this._a == 1) ? - "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : - "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; - }, - toName: function() { - if (this._a === 0) { - return "transparent"; - } - - if (this._a < 1) { - return false; - } - - return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; - }, - toFilter: function(secondColor) { - var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a); - var secondHex8String = hex8String; - var gradientType = this._gradientType ? "GradientType = 1, " : ""; - - if (secondColor) { - var s = tinycolor(secondColor); - secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a); - } - - return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; - }, - toString: function(format) { - var formatSet = !!format; - format = format || this._format; - - var formattedString = false; - var hasAlpha = this._a < 1 && this._a >= 0; - var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name"); - - if (needsAlphaFormat) { - // Special case for "transparent", all other non-alpha formats - // will return rgba when there is transparency. - if (format === "name" && this._a === 0) { - return this.toName(); - } - return this.toRgbString(); - } - if (format === "rgb") { - formattedString = this.toRgbString(); - } - if (format === "prgb") { - formattedString = this.toPercentageRgbString(); - } - if (format === "hex" || format === "hex6") { - formattedString = this.toHexString(); - } - if (format === "hex3") { - formattedString = this.toHexString(true); - } - if (format === "hex4") { - formattedString = this.toHex8String(true); - } - if (format === "hex8") { - formattedString = this.toHex8String(); - } - if (format === "name") { - formattedString = this.toName(); - } - if (format === "hsl") { - formattedString = this.toHslString(); - } - if (format === "hsv") { - formattedString = this.toHsvString(); - } - - return formattedString || this.toHexString(); - }, - clone: function() { - return tinycolor(this.toString()); - }, - - _applyModification: function(fn, args) { - var color = fn.apply(null, [this].concat([].slice.call(args))); - this._r = color._r; - this._g = color._g; - this._b = color._b; - this.setAlpha(color._a); - return this; - }, - lighten: function() { - return this._applyModification(lighten, arguments); - }, - brighten: function() { - return this._applyModification(brighten, arguments); - }, - darken: function() { - return this._applyModification(darken, arguments); - }, - desaturate: function() { - return this._applyModification(desaturate, arguments); - }, - saturate: function() { - return this._applyModification(saturate, arguments); - }, - greyscale: function() { - return this._applyModification(greyscale, arguments); - }, - spin: function() { - return this._applyModification(spin, arguments); - }, - - _applyCombination: function(fn, args) { - return fn.apply(null, [this].concat([].slice.call(args))); - }, - analogous: function() { - return this._applyCombination(analogous, arguments); - }, - complement: function() { - return this._applyCombination(complement, arguments); - }, - monochromatic: function() { - return this._applyCombination(monochromatic, arguments); - }, - splitcomplement: function() { - return this._applyCombination(splitcomplement, arguments); - }, - triad: function() { - return this._applyCombination(triad, arguments); - }, - tetrad: function() { - return this._applyCombination(tetrad, arguments); - } -}; - -// If input is an object, force 1 into "1.0" to handle ratios properly -// String input requires "1.0" as input, so 1 will be treated as 1 -tinycolor.fromRatio = function(color, opts) { - if (typeof color == "object") { - var newColor = {}; - for (var i in color) { - if (color.hasOwnProperty(i)) { - if (i === "a") { - newColor[i] = color[i]; - } - else { - newColor[i] = convertToPercentage(color[i]); - } - } - } - color = newColor; - } - - return tinycolor(color, opts); -}; - -// Given a string or object, convert that input to RGB -// Possible string inputs: -// -// "red" -// "#f00" or "f00" -// "#ff0000" or "ff0000" -// "#ff000000" or "ff000000" -// "rgb 255 0 0" or "rgb (255, 0, 0)" -// "rgb 1.0 0 0" or "rgb (1, 0, 0)" -// "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" -// "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" -// "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" -// "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" -// "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" -// -function inputToRGB(color) { - - var rgb = { r: 0, g: 0, b: 0 }; - var a = 1; - var s = null; - var v = null; - var l = null; - var ok = false; - var format = false; - - if (typeof color == "string") { - color = stringInputToObject(color); - } - - if (typeof color == "object") { - if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { - rgb = rgbToRgb(color.r, color.g, color.b); - ok = true; - format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; - } - else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { - s = convertToPercentage(color.s); - v = convertToPercentage(color.v); - rgb = hsvToRgb(color.h, s, v); - ok = true; - format = "hsv"; - } - else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { - s = convertToPercentage(color.s); - l = convertToPercentage(color.l); - rgb = hslToRgb(color.h, s, l); - ok = true; - format = "hsl"; - } - - if (color.hasOwnProperty("a")) { - a = color.a; - } - } - - a = boundAlpha(a); - - return { - ok: ok, - format: color.format || format, - r: mathMin(255, mathMax(rgb.r, 0)), - g: mathMin(255, mathMax(rgb.g, 0)), - b: mathMin(255, mathMax(rgb.b, 0)), - a: a - }; -} - -// Conversion Functions -// -------------------- - -// rgbToHsl, rgbToHsv, hslToRgb, hsvToRgb modified from: -// - -// rgbToRgb -// Handle bounds / percentage checking to conform to CSS color spec -// -// *Assumes:* r, g, b in [0, 255] or [0, 1] -// *Returns:* { r, g, b } in [0, 255] -function rgbToRgb(r, g, b){ - return { - r: bound01(r, 255) * 255, - g: bound01(g, 255) * 255, - b: bound01(b, 255) * 255 - }; -} - -// rgbToHsl -// Converts an RGB color value to HSL. -// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] -// *Returns:* { h, s, l } in [0,1] -function rgbToHsl(r, g, b) { - - r = bound01(r, 255); - g = bound01(g, 255); - b = bound01(b, 255); - - var max = mathMax(r, g, b), min = mathMin(r, g, b); - var h, s, l = (max + min) / 2; - - if(max == min) { - h = s = 0; // achromatic - } - else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - 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, s: s, l: l }; -} - -// hslToRgb -// Converts an HSL color value to RGB. -// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] -// *Returns:* { r, g, b } in the set [0, 255] -function hslToRgb(h, s, l) { - var r, g, b; - - h = bound01(h, 360); - s = bound01(s, 100); - l = bound01(l, 100); - - function hue2rgb(p, q, t) { - if(t < 0) t += 1; - if(t > 1) t -= 1; - if(t < 1/6) return p + (q - p) * 6 * t; - if(t < 1/2) return q; - if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - - if(s === 0) { - r = g = b = l; // achromatic - } - else { - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - - return { r: r * 255, g: g * 255, b: b * 255 }; -} - -// 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] -function rgbToHsv(r, g, b) { - - r = bound01(r, 255); - g = bound01(g, 255); - b = bound01(b, 255); - - var max = mathMax(r, g, b), min = mathMin(r, g, b); - var h, s, v = max; - - var 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, s: s, v: v }; -} - -// 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] - function hsvToRgb(h, s, v) { - - h = bound01(h, 360) * 6; - s = bound01(s, 100); - v = bound01(v, 100); - - var i = Math.floor(h), - f = h - i, - p = v * (1 - s), - q = v * (1 - f * s), - t = v * (1 - (1 - f) * s), - mod = i % 6, - r = [v, q, p, p, t, v][mod], - g = [t, v, v, q, p, p][mod], - b = [p, p, t, v, v, q][mod]; - - return { r: r * 255, g: g * 255, b: b * 255 }; -} - -// rgbToHex -// Converts an RGB color to hex -// Assumes r, g, and b are contained in the set [0, 255] -// Returns a 3 or 6 character hex -function rgbToHex(r, g, b, allow3Char) { - - var hex = [ - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)) - ]; - - // Return a 3 character hex if possible - if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { - return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); - } - - return hex.join(""); -} - -// rgbaToHex -// Converts an RGBA color plus alpha transparency to hex -// Assumes r, g, b are contained in the set [0, 255] and -// a in [0, 1]. Returns a 4 or 8 character rgba hex -function rgbaToHex(r, g, b, a, allow4Char) { - - var hex = [ - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)), - pad2(convertDecimalToHex(a)) - ]; - - // Return a 4 character hex if possible - if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) { - return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); - } - - return hex.join(""); -} - -// rgbaToArgbHex -// Converts an RGBA color to an ARGB Hex8 string -// Rarely used, but required for "toFilter()" -function rgbaToArgbHex(r, g, b, a) { - - var hex = [ - pad2(convertDecimalToHex(a)), - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)) - ]; - - return hex.join(""); -} - -// equals -// Can be called with any tinycolor input -tinycolor.equals = function (color1, color2) { - if (!color1 || !color2) { return false; } - return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); -}; - -tinycolor.random = function() { - return tinycolor.fromRatio({ - r: mathRandom(), - g: mathRandom(), - b: mathRandom() - }); -}; - -// Modification Functions -// ---------------------- -// Thanks to less.js for some of the basics here -// - -function desaturate(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.s -= amount / 100; - hsl.s = clamp01(hsl.s); - return tinycolor(hsl); -} - -function saturate(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.s += amount / 100; - hsl.s = clamp01(hsl.s); - return tinycolor(hsl); -} - -function greyscale(color) { - return tinycolor(color).desaturate(100); -} - -function lighten (color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.l += amount / 100; - hsl.l = clamp01(hsl.l); - return tinycolor(hsl); -} - -function brighten(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var rgb = tinycolor(color).toRgb(); - rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); - rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); - rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); - return tinycolor(rgb); -} - -function darken (color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.l -= amount / 100; - hsl.l = clamp01(hsl.l); - return tinycolor(hsl); -} - -// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. -// Values outside of this range will be wrapped into this range. -function spin(color, amount) { - var hsl = tinycolor(color).toHsl(); - var hue = (hsl.h + amount) % 360; - hsl.h = hue < 0 ? 360 + hue : hue; - return tinycolor(hsl); -} - -// Combination Functions -// --------------------- -// Thanks to jQuery xColor for some of the ideas behind these -// - -function complement(color) { - var hsl = tinycolor(color).toHsl(); - hsl.h = (hsl.h + 180) % 360; - return tinycolor(hsl); -} - -function triad(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) - ]; -} - -function tetrad(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) - ]; -} - -function splitcomplement(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), - tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) - ]; -} - -function analogous(color, results, slices) { - results = results || 6; - slices = slices || 30; - - var hsl = tinycolor(color).toHsl(); - var part = 360 / slices; - var ret = [tinycolor(color)]; - - for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { - hsl.h = (hsl.h + part) % 360; - ret.push(tinycolor(hsl)); - } - return ret; -} - -function monochromatic(color, results) { - results = results || 6; - var hsv = tinycolor(color).toHsv(); - var h = hsv.h, s = hsv.s, v = hsv.v; - var ret = []; - var modification = 1 / results; - - while (results--) { - ret.push(tinycolor({ h: h, s: s, v: v})); - v = (v + modification) % 1; - } - - return ret; -} - -// Utility Functions -// --------------------- - -tinycolor.mix = function(color1, color2, amount) { - amount = (amount === 0) ? 0 : (amount || 50); - - var rgb1 = tinycolor(color1).toRgb(); - var rgb2 = tinycolor(color2).toRgb(); - - var p = amount / 100; - - var rgba = { - r: ((rgb2.r - rgb1.r) * p) + rgb1.r, - g: ((rgb2.g - rgb1.g) * p) + rgb1.g, - b: ((rgb2.b - rgb1.b) * p) + rgb1.b, - a: ((rgb2.a - rgb1.a) * p) + rgb1.a - }; - - return tinycolor(rgba); -}; - -// Readability Functions -// --------------------- -// false -// tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false -tinycolor.isReadable = function(color1, color2, wcag2) { - var readability = tinycolor.readability(color1, color2); - var wcag2Parms, out; - - out = false; - - wcag2Parms = validateWCAG2Parms(wcag2); - switch (wcag2Parms.level + wcag2Parms.size) { - case "AAsmall": - case "AAAlarge": - out = readability >= 4.5; - break; - case "AAlarge": - out = readability >= 3; - break; - case "AAAsmall": - out = readability >= 7; - break; - } - return out; - -}; - -// mostReadable -// Given a base color and a list of possible foreground or background -// colors for that base, returns the most readable color. -// Optionally returns Black or White if the most readable color is unreadable. -// *Example* -// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" -// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" -// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" -// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" -tinycolor.mostReadable = function(baseColor, colorList, args) { - var bestColor = null; - var bestScore = 0; - var readability; - var includeFallbackColors, level, size ; - args = args || {}; - includeFallbackColors = args.includeFallbackColors ; - level = args.level; - size = args.size; - - for (var i= 0; i < colorList.length ; i++) { - readability = tinycolor.readability(baseColor, colorList[i]); - if (readability > bestScore) { - bestScore = readability; - bestColor = tinycolor(colorList[i]); - } - } - - if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { - return bestColor; - } - else { - args.includeFallbackColors=false; - return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); - } -}; - -// Big List of Colors -// ------------------ -// -var names = tinycolor.names = { - aliceblue: "f0f8ff", - antiquewhite: "faebd7", - aqua: "0ff", - aquamarine: "7fffd4", - azure: "f0ffff", - beige: "f5f5dc", - bisque: "ffe4c4", - black: "000", - blanchedalmond: "ffebcd", - blue: "00f", - blueviolet: "8a2be2", - brown: "a52a2a", - burlywood: "deb887", - burntsienna: "ea7e5d", - cadetblue: "5f9ea0", - chartreuse: "7fff00", - chocolate: "d2691e", - coral: "ff7f50", - cornflowerblue: "6495ed", - cornsilk: "fff8dc", - crimson: "dc143c", - cyan: "0ff", - darkblue: "00008b", - darkcyan: "008b8b", - darkgoldenrod: "b8860b", - darkgray: "a9a9a9", - darkgreen: "006400", - darkgrey: "a9a9a9", - darkkhaki: "bdb76b", - darkmagenta: "8b008b", - darkolivegreen: "556b2f", - darkorange: "ff8c00", - darkorchid: "9932cc", - darkred: "8b0000", - darksalmon: "e9967a", - darkseagreen: "8fbc8f", - darkslateblue: "483d8b", - darkslategray: "2f4f4f", - darkslategrey: "2f4f4f", - darkturquoise: "00ced1", - darkviolet: "9400d3", - deeppink: "ff1493", - deepskyblue: "00bfff", - dimgray: "696969", - dimgrey: "696969", - dodgerblue: "1e90ff", - firebrick: "b22222", - floralwhite: "fffaf0", - forestgreen: "228b22", - fuchsia: "f0f", - gainsboro: "dcdcdc", - ghostwhite: "f8f8ff", - gold: "ffd700", - goldenrod: "daa520", - gray: "808080", - green: "008000", - greenyellow: "adff2f", - grey: "808080", - honeydew: "f0fff0", - hotpink: "ff69b4", - indianred: "cd5c5c", - indigo: "4b0082", - ivory: "fffff0", - khaki: "f0e68c", - lavender: "e6e6fa", - lavenderblush: "fff0f5", - lawngreen: "7cfc00", - lemonchiffon: "fffacd", - lightblue: "add8e6", - lightcoral: "f08080", - lightcyan: "e0ffff", - lightgoldenrodyellow: "fafad2", - lightgray: "d3d3d3", - lightgreen: "90ee90", - lightgrey: "d3d3d3", - lightpink: "ffb6c1", - lightsalmon: "ffa07a", - lightseagreen: "20b2aa", - lightskyblue: "87cefa", - lightslategray: "789", - lightslategrey: "789", - lightsteelblue: "b0c4de", - lightyellow: "ffffe0", - lime: "0f0", - limegreen: "32cd32", - linen: "faf0e6", - magenta: "f0f", - maroon: "800000", - mediumaquamarine: "66cdaa", - mediumblue: "0000cd", - mediumorchid: "ba55d3", - mediumpurple: "9370db", - mediumseagreen: "3cb371", - mediumslateblue: "7b68ee", - mediumspringgreen: "00fa9a", - mediumturquoise: "48d1cc", - mediumvioletred: "c71585", - midnightblue: "191970", - mintcream: "f5fffa", - mistyrose: "ffe4e1", - moccasin: "ffe4b5", - navajowhite: "ffdead", - navy: "000080", - oldlace: "fdf5e6", - olive: "808000", - olivedrab: "6b8e23", - orange: "ffa500", - orangered: "ff4500", - orchid: "da70d6", - palegoldenrod: "eee8aa", - palegreen: "98fb98", - paleturquoise: "afeeee", - palevioletred: "db7093", - papayawhip: "ffefd5", - peachpuff: "ffdab9", - peru: "cd853f", - pink: "ffc0cb", - plum: "dda0dd", - powderblue: "b0e0e6", - purple: "800080", - rebeccapurple: "663399", - red: "f00", - rosybrown: "bc8f8f", - royalblue: "4169e1", - saddlebrown: "8b4513", - salmon: "fa8072", - sandybrown: "f4a460", - seagreen: "2e8b57", - seashell: "fff5ee", - sienna: "a0522d", - silver: "c0c0c0", - skyblue: "87ceeb", - slateblue: "6a5acd", - slategray: "708090", - slategrey: "708090", - snow: "fffafa", - springgreen: "00ff7f", - steelblue: "4682b4", - tan: "d2b48c", - teal: "008080", - thistle: "d8bfd8", - tomato: "ff6347", - turquoise: "40e0d0", - violet: "ee82ee", - wheat: "f5deb3", - white: "fff", - whitesmoke: "f5f5f5", - yellow: "ff0", - yellowgreen: "9acd32" -}; - -// Make it easy to access colors via hexNames[hex] -var hexNames = tinycolor.hexNames = flip(names); - -// Utilities -// --------- - -// { 'name1': 'val1' } becomes { 'val1': 'name1' } -function flip(o) { - var flipped = { }; - for (var i in o) { - if (o.hasOwnProperty(i)) { - flipped[o[i]] = i; - } - } - return flipped; -} - -// Return a valid alpha value [0,1] with all invalid values being set to 1 -function boundAlpha(a) { - a = parseFloat(a); - - if (isNaN(a) || a < 0 || a > 1) { - a = 1; - } - - return a; -} - -// Take input from [0, n] and return it as [0, 1] -function bound01(n, max) { - if (isOnePointZero(n)) { n = "100%"; } - - var processPercent = isPercentage(n); - n = mathMin(max, mathMax(0, parseFloat(n))); - - // Automatically convert percentage into number - if (processPercent) { - n = parseInt(n * max, 10) / 100; - } - - // Handle floating point rounding errors - if ((Math.abs(n - max) < 0.000001)) { - return 1; - } - - // Convert into [0, 1] range if it isn't already - return (n % max) / parseFloat(max); -} - -// Force a number between 0 and 1 -function clamp01(val) { - return mathMin(1, mathMax(0, val)); -} - -// Parse a base-16 hex value into a base-10 integer -function parseIntFromHex(val) { - return parseInt(val, 16); -} - -// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 -// -function isOnePointZero(n) { - return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; -} - -// Check to see if string passed in is a percentage -function isPercentage(n) { - return typeof n === "string" && n.indexOf('%') != -1; -} - -// Force a hex value to have 2 characters -function pad2(c) { - return c.length == 1 ? '0' + c : '' + c; -} - -// Replace a decimal with it's percentage value -function convertToPercentage(n) { - if (n <= 1) { - n = (n * 100) + "%"; - } - - return n; -} - -// Converts a decimal to a hex value -function convertDecimalToHex(d) { - return Math.round(parseFloat(d) * 255).toString(16); -} -// Converts a hex value to a decimal -function convertHexToDecimal(h) { - return (parseIntFromHex(h) / 255); -} - -var matchers = (function() { - - // - var CSS_INTEGER = "[-\\+]?\\d+%?"; - - // - var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; - - // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. - var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; - - // Actual matching. - // Parentheses and commas are optional, but not required. - // Whitespace can take the place of commas or opening paren - var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; - var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; - - return { - CSS_UNIT: new RegExp(CSS_UNIT), - rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), - rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), - hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), - hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), - hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), - hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), - hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, - hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, - hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, - hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ - }; -})(); - -// isValidCSSUnit -// Take in a single string / number and check to see if it looks like a CSS unit -// (see matchers above for definition). -function isValidCSSUnit(color) { - return !!matchers.CSS_UNIT.exec(color); -} - -// stringInputToObject -// Permissive string parsing. Take in a number of formats, and output an object -// based on detected format. Returns { r, g, b } or { h, s, l } or { h, s, v} -function stringInputToObject(color) { - - color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase(); - var named = false; - if (names[color]) { - color = names[color]; - named = true; - } - else if (color == 'transparent') { - return { r: 0, g: 0, b: 0, a: 0, format: "name" }; - } - - // Try to match string input using regular expressions. - // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] - // Just return an object and let the conversion functions handle that. - // This way the result will be the same whether the tinycolor is initialized with string or object. - var match; - if ((match = matchers.rgb.exec(color))) { - return { r: match[1], g: match[2], b: match[3] }; - } - if ((match = matchers.rgba.exec(color))) { - return { r: match[1], g: match[2], b: match[3], a: match[4] }; - } - if ((match = matchers.hsl.exec(color))) { - return { h: match[1], s: match[2], l: match[3] }; - } - if ((match = matchers.hsla.exec(color))) { - return { h: match[1], s: match[2], l: match[3], a: match[4] }; - } - if ((match = matchers.hsv.exec(color))) { - return { h: match[1], s: match[2], v: match[3] }; - } - if ((match = matchers.hsva.exec(color))) { - return { h: match[1], s: match[2], v: match[3], a: match[4] }; - } - if ((match = matchers.hex8.exec(color))) { - return { - r: parseIntFromHex(match[1]), - g: parseIntFromHex(match[2]), - b: parseIntFromHex(match[3]), - a: convertHexToDecimal(match[4]), - format: named ? "name" : "hex8" - }; - } - if ((match = matchers.hex6.exec(color))) { - return { - r: parseIntFromHex(match[1]), - g: parseIntFromHex(match[2]), - b: parseIntFromHex(match[3]), - format: named ? "name" : "hex" - }; - } - if ((match = matchers.hex4.exec(color))) { - return { - r: parseIntFromHex(match[1] + '' + match[1]), - g: parseIntFromHex(match[2] + '' + match[2]), - b: parseIntFromHex(match[3] + '' + match[3]), - a: convertHexToDecimal(match[4] + '' + match[4]), - format: named ? "name" : "hex8" - }; - } - if ((match = matchers.hex3.exec(color))) { - return { - r: parseIntFromHex(match[1] + '' + match[1]), - g: parseIntFromHex(match[2] + '' + match[2]), - b: parseIntFromHex(match[3] + '' + match[3]), - format: named ? "name" : "hex" - }; - } - - return false; -} - -function validateWCAG2Parms(parms) { - // return valid WCAG2 parms for isReadable. - // If input parms are invalid, return {"level":"AA", "size":"small"} - var level, size; - parms = parms || {"level":"AA", "size":"small"}; - level = (parms.level || "AA").toUpperCase(); - size = (parms.size || "small").toLowerCase(); - if (level !== "AA" && level !== "AAA") { - level = "AA"; - } - if (size !== "small" && size !== "large") { - size = "small"; - } - return {"level":level, "size":size}; -} - -this.tinycolor = tinycolor; - -})()`; -} -// 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 -.tinyColorMixin(); diff --git a/demo/less/theme.less b/demo/less/theme.less deleted file mode 100644 index 3937a598f..000000000 --- a/demo/less/theme.less +++ /dev/null @@ -1,301 +0,0 @@ -@import "./color/colors"; - -// http://stackoverflow.com/a/13611748/3040605 -@font-face { - font-family: "Helvetica Neue For Number"; - src: local("Helvetica Neue"); - unicode-range: U+30-39; -} - -// Prefix -@ant-prefix : ant; - -// Color -@primary-color : @blue-6; -@info-color : @blue-6; -@success-color : @green-6; -@error-color : @red-6; -@highlight-color : @red-6; -@warning-color : @yellow-6; -@normal-color : #d9d9d9; - -@primary-1: color(~`colorPalette("@{primary-color}", 1)`); // replace tint(@primary-color, 90%) -@primary-2: color(~`colorPalette("@{primary-color}", 2)`); // replace tint(@primary-color, 80%) -@primary-3: color(~`colorPalette("@{primary-color}", 3)`); -@primary-4: color(~`colorPalette("@{primary-color}", 4)`); -@primary-5: color(~`colorPalette("@{primary-color}", 5)`); // replace tint(@primary-color, 20%) -@primary-6: @primary-color; // don't use, use @primary-color -@primary-7: color(~`colorPalette("@{primary-color}", 7)`); // replace shade(@primary-color, 5%) -@primary-8: color(~`colorPalette("@{primary-color}", 8)`); -@primary-9: color(~`colorPalette("@{primary-color}", 9)`); -@primary-10: color(~`colorPalette("@{primary-color}", 10)`); - -// ------ Base & Require ------ -@body-background : #fff; -@component-background : #fff; -@font-family : "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; -@code-family : Consolas, Menlo, Courier, monospace; -@heading-color : fade(#000, 85%); -@text-color : fade(#000, 65%); -@text-color-secondary : fade(#000, 43%); -@disabled-color : fade(#000, 25%); -@heading-color-dark : fade(#fff, 97%); -@text-color-dark : fade(#fff, 91%); -@text-color-secondary-dark: fade(#fff, 67%); -@disabled-color-dark : fade(#fff, 35%); -@font-size-base : 12px; -@font-size-lg : @font-size-base + 2px; -@line-height-base : 1.5; -@border-radius-base : 4px; -@border-radius-sm : 2px; - -// ICONFONT -@iconfont-css-prefix : anticon; -@icon-url : "https://at.alicdn.com/t/font_0qcp222wvwijm7vi"; - -// LINK -@link-color : @primary-color; -@link-hover-color : @primary-5; -@link-active-color : @primary-7; -@link-hover-decoration : none; - -// Animation -@ease-out : cubic-bezier(0.215, 0.61, 0.355, 1); -@ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19); -@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1); -@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46); -@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6); -@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46); -@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1); -@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34); -@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); -@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); -@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); -@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1); - -// Border color -@border-color-base : #d9d9d9; // base border outline a component -@border-color-split : #e9e9e9; // split border inside a component -@border-width-base : 1px; // width of the border for a component -@border-style-base : solid; // style of a components border - -// Outline -@outline-blur-size : 0; -@outline-width : 2px; -@outline-color : @primary-color; - -// Background color -@background-color-base : #f7f7f7; // basic gray background - -// Shadow -@shadow-color : rgba(0, 0, 0, .2); -@box-shadow-base : @shadow-1-down; -@shadow-1-up : 0 -1px 6px @shadow-color; -@shadow-1-down : 0 1px 6px @shadow-color; -@shadow-1-left : -1px 0 6px @shadow-color; -@shadow-1-right : 1px 0 6px @shadow-color; -@shadow-2 : 0 2px 8px @shadow-color; - -// Buttons -@btn-font-weight : 500; -@btn-border-radius-base : @border-radius-base; -@btn-border-radius-sm : @border-radius-base; - -@btn-primary-color : #fff; -@btn-primary-bg : @primary-color; - -@btn-default-color : @text-color; -@btn-default-bg : #fff; -@btn-default-border : @border-color-base; - -@btn-danger-color : @error-color; -@btn-danger-bg : @background-color-base; -@btn-danger-border : @border-color-base; - -@btn-disable-color : @disabled-color; -@btn-disable-bg : @background-color-base; -@btn-disable-border : @border-color-base; - -@btn-padding-base : 0 15px; -@btn-font-size-lg : @font-size-lg; -@btn-padding-lg : @btn-padding-base; -@btn-padding-sm : 0 7px; - -@btn-height-base : 28px; -@btn-height-lg : 32px; -@btn-height-sm : 22px; - -@btn-circle-size : @btn-height-base; -@btn-circle-size-lg : @btn-height-lg; -@btn-circle-size-sm : @btn-height-sm; - -@btn-group-border : @primary-7; - -// Radio buttons -@radio-button-bg : @btn-default-bg; -@radio-button-color : @btn-default-color; - -// Media queries breakpoints -// Extra small screen / phone -@screen-xs : 480px; -@screen-xs-min : @screen-xs; - -// Small screen / tablet -@screen-sm : 768px; -@screen-sm-min : @screen-sm; - -// Medium screen / desktop -@screen-md : 992px; -@screen-md-min : @screen-md; - -// Large screen / wide desktop -@screen-lg : 1200px; -@screen-lg-min : @screen-lg; - -// Extra Large screen / full hd -@screen-xl : 1600px; -@screen-xl-min : @screen-xl; - -// provide a maximum -@screen-xs-max : (@screen-sm-min - 1); -@screen-sm-max : (@screen-md-min - 1); -@screen-md-max : (@screen-lg-min - 1); -@screen-lg-max : (@screen-xl-min - 1); - -// Grid system -@grid-columns : 24; -@grid-gutter-width : 0; - -// Layout -@layout-body-background : #ececec; -@layout-header-background : #404040; -@layout-header-height : 64px; -@layout-header-padding : 0 50px; -@layout-footer-padding : 24px 50px; -@layout-sider-background : @layout-header-background; -@layout-trigger-height : 48px; -@layout-zero-trigger-width : 36px; -@layout-zero-trigger-height : 42px; - -// z-index list -@zindex-affix : 10; -@zindex-back-top : 10; -@zindex-modal-mask : 1000; -@zindex-modal : 1000; -@zindex-notification : 1010; -@zindex-message : 1010; -@zindex-popover : 1030; -@zindex-picker : 1050; -@zindex-dropdown : 1050; -@zindex-tooltip : 1060; - -// Animation -@animation-duration-slow: .3s; // Modal -@animation-duration-base: .2s; -@animation-duration-fast: .1s; // Tooltip - -// Form -// --- -@label-required-color : @highlight-color; -@label-color : @text-color; -@form-item-margin-bottom : 24px; -@form-item-trailing-colon : true; - -// Input -// --- -@input-height-base : 28px; -@input-height-lg : 32px; -@input-height-sm : 22px; -@input-padding-horizontal : 7px; -@input-padding-vertical-base : 4px; -@input-padding-vertical-sm : 1px; -@input-padding-vertical-lg : 6px; -@input-placeholder-color : #ccc; -@input-color : @text-color; -@input-border-color : @border-color-base; -@input-bg : #fff; -@input-hover-border-color : @primary-color; -@input-disabled-bg : @background-color-base; - -// Tooltip -// --- -//* Tooltip max width -@tooltip-max-width: 250px; -//** Tooltip text color -@tooltip-color: #fff; -//** Tooltip background color -@tooltip-bg: rgba(64, 64, 64, .85); -//** Tooltip arrow width -@tooltip-arrow-width: 5px; -//** Tooltip distance with trigger -@tooltip-distance: @tooltip-arrow-width - 1 + 4; -//** Tooltip arrow color -@tooltip-arrow-color: @tooltip-bg; - -// Popover -// --- -//** Popover body background color -@popover-bg: #fff; -//** Popover maximum width -@popover-min-width: 177px; -//** Popover arrow width -@popover-arrow-width: 4px; -//** Popover arrow color -@popover-arrow-color: @popover-bg; -//** Popover outer arrow width -@popover-arrow-outer-width: (@popover-arrow-width + 1); -//** Popover outer arrow color -@popover-arrow-outer-color: fadeout(@border-color-base, 30%); - -// Modal -// -- -@modal-mask-bg: rgba(55, 55, 55, 0.6); - -// Progress -// -- -@process-default-color: @primary-color; - -// Menu -// --- -@menu-dark-bg: @layout-header-background; -@menu-dark-submenu-bg: #333; - -// Spin -// --- -@spin-dot-size-sm: 14px; -@spin-dot-size: 20px; -@spin-dot-size-lg: 32px; - -// Table -// -- -@table-header-bg: @background-color-base; -@table-row-hover-bg: @primary-1; -@table-padding-vertical: 16px; -@table-padding-horizontal: 8px; - -// TimePicker -// --- -@time-picker-panel-column-width: 56px; -@time-picker-panel-width: @time-picker-panel-column-width * 3; - -// Carousel -// --- -@carousel-dot-width: 16px; -@carousel-dot-height: 3px; -@carousel-dot-active-width: 24px; - -// Badge -// --- -@badge-height: 20px; -@badge-dot-size: 8px; - -// Rate -// --- -@rate-star-color: #f5a623; -@rate-star-bg: #e9e9e9; - -// Card -// --- -@card-head-height: 48px; -@card-head-color: @heading-color; -@card-head-background: @component-background; diff --git a/docs/base.css b/docs/base.css index a2b20140d..3f7feeab0 100644 --- a/docs/base.css +++ b/docs/base.css @@ -1115,12 +1115,12 @@ li.CodeMirror-hint-active { transition-timing-function: ease; user-select: none; background-color: rgba(102, 102, 102, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666); border-radius: 5px; } .bi-theme-dark .scrollbar-layout-main { background-color: rgba(204, 204, 204, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc); } .scrollbar-layout-main-vertical { bottom: 0; @@ -1139,11 +1139,11 @@ li.CodeMirror-hint-active { left: 0; transition-property: background-color; background-color: rgba(102, 102, 102, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666); } .bi-theme-dark .scrollbar-layout-main-horizontal { background-color: rgba(204, 204, 204, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc); } /* Touching the scroll-track directly makes the scroll-track bolder */ .scrollbar-layout-main-horizontal.public-scrollbar-main-active, @@ -1197,23 +1197,23 @@ li.CodeMirror-hint-active { /* Touching the scroll-track directly makes the scroll-track bolder */ .public-scrollbar-face:after { background-color: rgba(102, 102, 102, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d666666,endColorstr=#4d666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d666666,endColorstr=#4d666666); } .bi-theme-dark .public-scrollbar-face:after { background-color: rgba(204, 204, 204, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dcccccc,endColorstr=#4dcccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dcccccc,endColorstr=#4dcccccc); } .public-scrollbar-main:hover .public-scrollbar-face:after, .public-scrollbar-main-active .public-scrollbar-face:after, .public-scrollbar-faceActive:after { background-color: rgba(102, 102, 102, 0.7); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666); } .bi-theme-dark .public-scrollbar-main:hover .public-scrollbar-face:after, .bi-theme-dark .public-scrollbar-main-active .public-scrollbar-face:after, .bi-theme-dark .public-scrollbar-faceActive:after { background-color: rgba(204, 204, 204, 0.7); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc); } .horizontal-scrollbar { bottom: 0; diff --git a/docs/demo.css b/docs/demo.css index eac8307e3..2c14653b2 100644 --- a/docs/demo.css +++ b/docs/demo.css @@ -73,11 +73,6 @@ body.bi-theme-dark { /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ -@font-face { - font-family: "Helvetica Neue For Number"; - src: local("Helvetica Neue"); - unicode-range: U+30-39; -} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ diff --git a/docs/widget.js b/docs/widget.js index 68ec4d108..54c1276be 100644 --- a/docs/widget.js +++ b/docs/widget.js @@ -9665,7 +9665,10 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, { toggle: false, el: this.trigger, adjustLength: 1, - popup: this.popup + popup: this.popup, + hideChecker: function (e) { + return triggerBtn.element.find(e.target).length === 0; + } }); this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { diff --git a/src/css/base/table/table.grid.scrollbar.css b/src/css/base/table/table.grid.scrollbar.css index a690d35ee..2fc4a1a44 100644 --- a/src/css/base/table/table.grid.scrollbar.css +++ b/src/css/base/table/table.grid.scrollbar.css @@ -10,12 +10,12 @@ transition-timing-function: ease; user-select: none; background-color: rgba(102, 102, 102, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666); border-radius: 5px; } .bi-theme-dark .scrollbar-layout-main { background-color: rgba(204, 204, 204, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc); } .scrollbar-layout-main-vertical { bottom: 0; @@ -34,11 +34,11 @@ left: 0; transition-property: background-color; background-color: rgba(102, 102, 102, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666); } .bi-theme-dark .scrollbar-layout-main-horizontal { background-color: rgba(204, 204, 204, 0.05); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc); } /* Touching the scroll-track directly makes the scroll-track bolder */ .scrollbar-layout-main-horizontal.public-scrollbar-main-active, @@ -92,23 +92,23 @@ /* Touching the scroll-track directly makes the scroll-track bolder */ .public-scrollbar-face:after { background-color: rgba(102, 102, 102, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d666666,endColorstr=#4d666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d666666,endColorstr=#4d666666); } .bi-theme-dark .public-scrollbar-face:after { background-color: rgba(204, 204, 204, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dcccccc,endColorstr=#4dcccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dcccccc,endColorstr=#4dcccccc); } .public-scrollbar-main:hover .public-scrollbar-face:after, .public-scrollbar-main-active .public-scrollbar-face:after, .public-scrollbar-faceActive:after { background-color: rgba(102, 102, 102, 0.7); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666); } .bi-theme-dark .public-scrollbar-main:hover .public-scrollbar-face:after, .bi-theme-dark .public-scrollbar-main-active .public-scrollbar-face:after, .bi-theme-dark .public-scrollbar-faceActive:after { background-color: rgba(204, 204, 204, 0.7); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc); } .horizontal-scrollbar { bottom: 0; diff --git a/src/less/base/table/table.grid.scrollbar.less b/src/less/base/table/table.grid.scrollbar.less index 8ca19645a..577921b64 100644 --- a/src/less/base/table/table.grid.scrollbar.less +++ b/src/less/base/table/table.grid.scrollbar.less @@ -9,7 +9,7 @@ user-select: none; background-color: @scroll-color; @ieColor: argb(@scroll-color); - filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor}"; + filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; border-radius: 5px; } @@ -17,7 +17,7 @@ .scrollbar-layout-main { background-color: @scroll-color-theme-dark; @ieColor: argb(@scroll-color-theme-dark); - filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor}"; + filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; } } @@ -41,14 +41,14 @@ transition-property: background-color; background-color: @scroll-color; @ieColor: argb(@scroll-color); - filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor}"; + filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; } .bi-theme-dark { .scrollbar-layout-main-horizontal { background-color: @scroll-color-theme-dark; @ieColor: argb(@scroll-color-theme-dark); - filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor}"; + filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; } } @@ -124,14 +124,14 @@ .public-scrollbar-face:after { background-color: @scroll-thumb-color; @ieColor: argb(@scroll-thumb-color); - filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor}"; + filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; } .bi-theme-dark { .public-scrollbar-face:after { background-color: @scroll-thumb-color-theme-dark; @ieColor: argb(@scroll-thumb-color-theme-dark); - filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor}"; + filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; } } @@ -140,7 +140,7 @@ .public-scrollbar-faceActive:after { background-color: @scroll-thumb-focus-color; @ieColor: argb(@scroll-thumb-focus-color); - filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor}"; + filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; } .bi-theme-dark { @@ -149,7 +149,7 @@ .public-scrollbar-faceActive:after { background-color: @scroll-thumb-focus-color-theme-dark; @ieColor: argb(@scroll-thumb-focus-color-theme-dark); - filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor}"; + filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})"; } } diff --git a/src/widget/multiselect/multiselect.combo.js b/src/widget/multiselect/multiselect.combo.js index b2c6ae557..b687714b5 100644 --- a/src/widget/multiselect/multiselect.combo.js +++ b/src/widget/multiselect/multiselect.combo.js @@ -140,7 +140,10 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, { toggle: false, el: this.trigger, adjustLength: 1, - popup: this.popup + popup: this.popup, + hideChecker: function (e) { + return triggerBtn.element.find(e.target).length === 0; + } }); this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {