element-plus/DOCS en-US14.50901e38ca861663009e.js

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[7],{

/***/ 546:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.js
var vue_esm_browser = __webpack_require__(0);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/en-US/color.md?vue&type=template&id=37971251

var _hoisted_1 = {
  class: "content element-doc"
};

var _hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h2", {
  id: "color"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
  class: "header-anchor",
  href: "#color"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Color")], -1);

var _hoisted_3 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Element Plus uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.", -1);

var _hoisted_4 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
  id: "main-color"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
  class: "header-anchor",
  href: "#main-color"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Main Color")], -1);

var _hoisted_5 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "The main color of Element Plus is bright and friendly blue.", -1);

var _hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Brand Color");

var _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", {
  class: "value"
}, "#409EFF", -1);

var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
  id: "secondary-color"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
  class: "header-anchor",
  href: "#secondary-color"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Secondary Color")], -1);

var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)", -1);

var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Success");

var _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", {
  class: "value"
}, "#67C23A", -1);

var _hoisted_12 = {
  class: "bg-color-sub"
};

var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Warning");

var _hoisted_14 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", {
  class: "value"
}, "#E6A23C", -1);

var _hoisted_15 = {
  class: "bg-color-sub"
};

var _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Danger");

var _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", {
  class: "value"
}, "#F56C6C", -1);

var _hoisted_18 = {
  class: "bg-color-sub"
};

var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Info");

var _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", {
  class: "value"
}, "#909399", -1);

var _hoisted_21 = {
  class: "bg-color-sub"
};

var _hoisted_22 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
  id: "neutral-color"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
  class: "header-anchor",
  href: "#neutral-color"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Neutral Color")], -1);

var _hoisted_23 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.", -1);

var _hoisted_24 = {
  class: "demo-color-box-group"
};

var _hoisted_25 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Primary Text");

var _hoisted_26 = {
  class: "value"
};

var _hoisted_27 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Regular Text");

var _hoisted_28 = {
  class: "value"
};

var _hoisted_29 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Secondary Text");

var _hoisted_30 = {
  class: "value"
};

var _hoisted_31 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Placeholder Text");

var _hoisted_32 = {
  class: "value"
};
var _hoisted_33 = {
  class: "demo-color-box-group"
};

var _hoisted_34 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Base Border");

var _hoisted_35 = {
  class: "value"
};

var _hoisted_36 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Light Border");

var _hoisted_37 = {
  class: "value"
};

var _hoisted_38 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Lighter Border");

var _hoisted_39 = {
  class: "value"
};

var _hoisted_40 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Extra Light Border");

var _hoisted_41 = {
  class: "value"
};
var _hoisted_42 = {
  class: "demo-color-box-group"
};

var _hoisted_43 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Basic Black");

var _hoisted_44 = {
  class: "value"
};

var _hoisted_45 = /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Basic White");

var _hoisted_46 = {
  class: "value"
};

var _hoisted_47 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", {
  class: "demo-color-box demo-color-box-other bg-transparent"
}, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Transparent"), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", {
  class: "value"
}, "Transparent")], -1);

function render(_ctx, _cache, $props, $setup, $data, $options) {
  var _component_el_col = Object(vue_esm_browser["P" /* resolveComponent */])("el-col");

  var _component_el_row = Object(vue_esm_browser["P" /* resolveComponent */])("el-row");

  return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", _hoisted_1, [_hoisted_2, _hoisted_3, _hoisted_4, _hoisted_5, Object(vue_esm_browser["o" /* createVNode */])(_component_el_row, {
    gutter: 12
  }, {
    default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
      return [Object(vue_esm_browser["o" /* createVNode */])(_component_el_col, {
        span: 10,
        xs: {
          span: 12
        }
      }, {
        default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
          return [Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box",
            style: {
              background: $data.primary
            }
          }, [_hoisted_6, _hoisted_7, Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "bg-color-sub",
            style: {
              background: $options.tintColor($data.primary, 0.9)
            }
          }, [(Object(vue_esm_browser["G" /* openBlock */])(true), Object(vue_esm_browser["j" /* createBlock */])(vue_esm_browser["b" /* Fragment */], null, Object(vue_esm_browser["N" /* renderList */])(Array(8), function (item, key) {
            return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("div", {
              class: "bg-blue-sub-item",
              key: key,
              style: {
                background: $options.tintColor($data.primary, (key + 1) / 10)
              }
            }, null, 4);
          }), 128
          /* KEYED_FRAGMENT */
          ))], 4)], 4)];
        }),
        _: 1
      })];
    }),
    _: 1
  }), _hoisted_8, _hoisted_9, Object(vue_esm_browser["o" /* createVNode */])(_component_el_row, {
    gutter: 12
  }, {
    default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
      return [Object(vue_esm_browser["o" /* createVNode */])(_component_el_col, {
        span: 6,
        xs: {
          span: 12
        }
      }, {
        default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
          return [Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box",
            style: {
              background: $data.success
            }
          }, [_hoisted_10, _hoisted_11, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_12, [(Object(vue_esm_browser["G" /* openBlock */])(true), Object(vue_esm_browser["j" /* createBlock */])(vue_esm_browser["b" /* Fragment */], null, Object(vue_esm_browser["N" /* renderList */])(Array(2), function (item, key) {
            return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("div", {
              class: "bg-success-sub-item",
              key: key,
              style: {
                background: $options.tintColor($data.success, (key + 8) / 10)
              }
            }, null, 4);
          }), 128
          /* KEYED_FRAGMENT */
          ))])], 4)];
        }),
        _: 1
      }), Object(vue_esm_browser["o" /* createVNode */])(_component_el_col, {
        span: 6,
        xs: {
          span: 12
        }
      }, {
        default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
          return [Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box",
            style: {
              background: $data.warning
            }
          }, [_hoisted_13, _hoisted_14, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_15, [(Object(vue_esm_browser["G" /* openBlock */])(true), Object(vue_esm_browser["j" /* createBlock */])(vue_esm_browser["b" /* Fragment */], null, Object(vue_esm_browser["N" /* renderList */])(Array(2), function (item, key) {
            return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("div", {
              class: "bg-success-sub-item",
              key: key,
              style: {
                background: $options.tintColor($data.warning, (key + 8) / 10)
              }
            }, null, 4);
          }), 128
          /* KEYED_FRAGMENT */
          ))])], 4)];
        }),
        _: 1
      }), Object(vue_esm_browser["o" /* createVNode */])(_component_el_col, {
        span: 6,
        xs: {
          span: 12
        }
      }, {
        default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
          return [Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box",
            style: {
              background: $data.danger
            }
          }, [_hoisted_16, _hoisted_17, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_18, [(Object(vue_esm_browser["G" /* openBlock */])(true), Object(vue_esm_browser["j" /* createBlock */])(vue_esm_browser["b" /* Fragment */], null, Object(vue_esm_browser["N" /* renderList */])(Array(2), function (item, key) {
            return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("div", {
              class: "bg-success-sub-item",
              key: key,
              style: {
                background: $options.tintColor($data.danger, (key + 8) / 10)
              }
            }, null, 4);
          }), 128
          /* KEYED_FRAGMENT */
          ))])], 4)];
        }),
        _: 1
      }), Object(vue_esm_browser["o" /* createVNode */])(_component_el_col, {
        span: 6,
        xs: {
          span: 12
        }
      }, {
        default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
          return [Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box",
            style: {
              background: $data.info
            }
          }, [_hoisted_19, _hoisted_20, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_21, [(Object(vue_esm_browser["G" /* openBlock */])(true), Object(vue_esm_browser["j" /* createBlock */])(vue_esm_browser["b" /* Fragment */], null, Object(vue_esm_browser["N" /* renderList */])(Array(2), function (item, key) {
            return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("div", {
              class: "bg-success-sub-item",
              key: key,
              style: {
                background: $options.tintColor($data.info, (key + 8) / 10)
              }
            }, null, 4);
          }), 128
          /* KEYED_FRAGMENT */
          ))])], 4)];
        }),
        _: 1
      })];
    }),
    _: 1
  }), _hoisted_22, _hoisted_23, Object(vue_esm_browser["o" /* createVNode */])(_component_el_row, {
    gutter: 12
  }, {
    default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
      return [Object(vue_esm_browser["o" /* createVNode */])(_component_el_col, {
        span: 6,
        xs: {
          span: 12
        }
      }, {
        default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
          return [Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_24, [Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box demo-color-box-other",
            style: {
              background: $data.textPrimary
            }
          }, [_hoisted_25, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_26, Object(vue_esm_browser["T" /* toDisplayString */])($data.textPrimary), 1)], 4), Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box demo-color-box-other",
            style: {
              background: $data.textRegular
            }
          }, [_hoisted_27, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_28, Object(vue_esm_browser["T" /* toDisplayString */])($data.textRegular), 1)], 4), Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box demo-color-box-other",
            style: {
              background: $data.textSecondary
            }
          }, [_hoisted_29, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_30, Object(vue_esm_browser["T" /* toDisplayString */])($data.textSecondary), 1)], 4), Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box demo-color-box-other",
            style: {
              background: $data.textPlaceholder
            }
          }, [_hoisted_31, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_32, Object(vue_esm_browser["T" /* toDisplayString */])($data.textPlaceholder), 1)], 4)])];
        }),
        _: 1
      }), Object(vue_esm_browser["o" /* createVNode */])(_component_el_col, {
        span: 6,
        xs: {
          span: 12
        }
      }, {
        default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
          return [Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_33, [Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box demo-color-box-other demo-color-box-lite",
            style: {
              background: $data.borderBase
            }
          }, [_hoisted_34, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_35, Object(vue_esm_browser["T" /* toDisplayString */])($data.borderBase), 1)], 4), Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box demo-color-box-other demo-color-box-lite",
            style: {
              background: $data.borderLight
            }
          }, [_hoisted_36, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_37, Object(vue_esm_browser["T" /* toDisplayString */])($data.borderLight), 1)], 4), Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box demo-color-box-other demo-color-box-lite",
            style: {
              background: $data.borderLighter
            }
          }, [_hoisted_38, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_39, Object(vue_esm_browser["T" /* toDisplayString */])($data.borderLighter), 1)], 4), Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box demo-color-box-other demo-color-box-lite",
            style: {
              background: $data.borderExtraLight
            }
          }, [_hoisted_40, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_41, Object(vue_esm_browser["T" /* toDisplayString */])($data.borderExtraLight), 1)], 4)])];
        }),
        _: 1
      }), Object(vue_esm_browser["o" /* createVNode */])(_component_el_col, {
        span: 6,
        xs: {
          span: 12
        }
      }, {
        default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
          return [Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_42, [Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box demo-color-box-other",
            style: {
              background: $data.black
            }
          }, [_hoisted_43, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_44, Object(vue_esm_browser["T" /* toDisplayString */])($data.black), 1)], 4), Object(vue_esm_browser["o" /* createVNode */])("div", {
            class: "demo-color-box demo-color-box-other",
            style: {
              background: $data.white,
              color: '#303133',
              border: '1px solid #eee'
            }
          }, [_hoisted_45, Object(vue_esm_browser["o" /* createVNode */])("div", _hoisted_46, Object(vue_esm_browser["T" /* toDisplayString */])($data.white), 1)], 4), _hoisted_47])];
        }),
        _: 1
      })];
    }),
    _: 1
  })]);
}
// CONCATENATED MODULE: ./website/docs/en-US/color.md?vue&type=template&id=37971251

// EXTERNAL MODULE: ./website/bus.js
var bus = __webpack_require__(44);

// EXTERNAL MODULE: ./website/color.js
var website_color = __webpack_require__(720);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/en-US/color.md?vue&type=script&lang=js


var varMap = {
  'primary': '$--color-primary',
  'success': '$--color-success',
  'warning': '$--color-warning',
  'danger': '$--color-danger',
  'info': '$--color-info',
  'white': '$--color-white',
  'black': '$--color-black',
  'textPrimary': '$--color-text-primary',
  'textRegular': '$--color-text-regular',
  'textSecondary': '$--color-text-secondary',
  'textPlaceholder': '$--color-text-placeholder',
  'borderBase': '$--border-color-base',
  'borderLight': '$--border-color-light',
  'borderLighter': '$--border-color-lighter',
  'borderExtraLight': '$--border-color-extra-light'
};
var original = {
  primary: '#409EFF',
  success: '#67C23A',
  warning: '#E6A23C',
  danger: '#F56C6C',
  info: '#909399',
  white: '#FFFFFF',
  black: '#000000',
  textPrimary: '#303133',
  textRegular: '#606266',
  textSecondary: '#909399',
  textPlaceholder: '#C0C4CC',
  borderBase: '#DCDFE6',
  borderLight: '#E4E7ED',
  borderLighter: '#EBEEF5',
  borderExtraLight: '#F2F6FC'
};
/* harmony default export */ var colorvue_type_script_lang_js = ({
  mounted: function mounted() {
    this.setGlobal();
  },
  methods: {
    tintColor: function tintColor(color, tint) {
      return Object(website_color["a" /* tintColor */])(color, tint);
    },
    setGlobal: function setGlobal() {
      if (window.userThemeConfig) {
        this.global = window.userThemeConfig.global;
      }
    }
  },
  data: function data() {
    return {
      global: {},
      primary: '',
      success: '',
      warning: '',
      danger: '',
      info: '',
      white: '',
      black: '',
      textPrimary: '',
      textRegular: '',
      textSecondary: '',
      textPlaceholder: '',
      borderBase: '',
      borderLight: '',
      borderLighter: '',
      borderExtraLight: ''
    };
  },
  watch: {
    global: {
      immediate: true,
      handler: function handler(value) {
        var _this = this;

        Object.keys(original).forEach(function (o) {
          if (value[varMap[o]]) {
            _this[o] = value[varMap[o]];
          } else {
            _this[o] = original[o];
          }
        });
      }
    }
  }
});
// CONCATENATED MODULE: ./website/docs/en-US/color.md?vue&type=script&lang=js
 
// CONCATENATED MODULE: ./website/docs/en-US/color.md



colorvue_type_script_lang_js.render = render

/* harmony default export */ var en_US_color = __webpack_exports__["default"] = (colorvue_type_script_lang_js);

/***/ }),

/***/ 720:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return tintColor; });
var tintColor = function tintColor(c, tint) {
  var color = c.replace('#', '');
  var red = parseInt(color.slice(0, 2), 16);
  var green = parseInt(color.slice(2, 4), 16);
  var blue = parseInt(color.slice(4, 6), 16);

  if (tint === 0) {
    // when primary color is in its rgb space
    return [red, green, blue].join(',');
  } else {
    red += Math.round(tint * (255 - red));
    green += Math.round(tint * (255 - green));
    blue += Math.round(tint * (255 - blue));
    red = red.toString(16);
    green = green.toString(16);
    blue = blue.toString(16);
    return "#" + red + green + blue;
  }
};

/***/ })

}]);