@fileverse-dev/fortune-react 1.0.26-patch-1 → 1.1.0

package/lib/components/DuneChartsInputModal/duneChartsInputModal.css

@@ -1,98 +0,0 @@
-.custom-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 50;
-  height: 100vh;
-  width: 100%;
-  display: grid;
-  place-items: center;
-}
-
-.input-modal {
-  position: fixed;
-  top: 17.5%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-radius: 0.75rem;
-  background-color: #ffffff;
-  padding: 0;
-  border: none;
-  box-shadow: 0px 8px 32px 0px #00000026;
-  animation: fadeIn 0.2s ease-in-out;
-  max-width: 480px;
-}
-
-.modal-header {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  padding: 0.75rem;
-  border-bottom: 1px solid #e5e7eb;
-  height: 52px;
-  width: 100%;
-}
-
-.modal-header svg {
-  width: 20px;
-  height: 20px;
-}
-
-.fetch-url-button {
-  cursor: pointer;
-}
-
-.modal-input {
-  border: none;
-  padding: 0;
-  outline: none;
-  user-select: text;
-  max-width: 218px;
-  flex: 1;
-}
-
-@media (min-width: 768px) {
-  .modal-input {
-    max-width: 400px;
-    width: 380px !important;
-  }
-}
-
-.modal-input:disabled {
-  opacity: 1;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) scale(1);
-  }
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  padding: 8px 16px;
-}
-
-.modal-button {
-  width: 100%;
-  margin: 8px;
-}
-
-.modal-error-message {
-  color: #ef4e2f;
-  background: #fff5f5;
-  margin: 8px 16px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  font-weight: 400;
-}

package/lib/components/DunePreview/DunePreview.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _fortuneCore = require("@fileverse-dev/fortune-core");
-require("./index.css");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var DunePreview = function DunePreview(_a) {
-  var url = _a.url,
-    position = _a.position,
-    onKeepAsLink = _a.onKeepAsLink,
-    onEmbed = _a.onEmbed;
-  var embedUrl = (0, _fortuneCore.sanitizeDuneUrl)(url);
-  if (!embedUrl) return null;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-dune-preview",
-    style: {
-      left: position.left,
-      top: position.top
-    },
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-dune-preview-header"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "fortune-dune-preview-title"
-  }, "Detected Dune chart link")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-dune-preview-content"
-  }, /*#__PURE__*/_react.default.createElement("iframe", {
-    src: embedUrl,
-    title: "Dune Chart Preview",
-    style: {
-      width: "100%",
-      height: "100%",
-      border: "none"
-    }
-  })), /*#__PURE__*/_react.default.createElement("p", null, "Do you want to insert Dune chart?"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-dune-preview-footer"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    onClick: onKeepAsLink,
-    className: "fortune-dune-preview-button"
-  }, "Keep as Link"), /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    onClick: onEmbed,
-    className: "fortune-dune-preview-button primary"
-  }, "Embed")));
-};
-var _default = exports.default = DunePreview;

package/lib/components/DunePreview/index.css

@@ -1,57 +0,0 @@
-.fortune-dune-preview {
-  position: absolute;
-  background-color: #fff;
-  border: 1px solid #e8ebec;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  width: 270px;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  padding: 8px;
-  gap: 8px;
-}
-
-.fortune-dune-preview-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.fortune-dune-preview-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #363b3f;
-}
-
-.fortune-dune-preview-content {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-  border-radius: 4px;
-  border: 1px solid #f8f9fa;
-}
-
-.fortune-dune-preview-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.fortune-dune-preview-button {
-  padding: 4px 12px;
-  border-radius: 4px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 80px;
-}
-
-.fortune-dune-preview-button:hover {
-  background-color: #f5f5f5;
-}
-
-.fortune-dune-preview-button.primary {
-  background-color: #000000;
-  color: #fff;
-}

package/lib/components/FilterOption/index.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-declare const FilterOptions: React.FC<{
-    getContainer: () => HTMLDivElement;
-}>;
-export default FilterOptions;

package/lib/components/FilterOption/index.js

@@ -1,130 +0,0 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _fortuneCore = require("@fileverse-dev/fortune-core");
-var _lodash = _interopRequireDefault(require("lodash"));
-var _react = _interopRequireWildcard(require("react"));
-var _context = _interopRequireDefault(require("../../context"));
-var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var FilterOptions = function FilterOptions(_a) {
-  var _b, _c, _d, _e;
-  var getContainer = _a.getContainer;
-  var _f = (0, _react.useContext)(_context.default),
-    context = _f.context,
-    setContext = _f.setContext,
-    refs = _f.refs;
-  var filterOptions = context.filterOptions,
-    currentSheetId = context.currentSheetId,
-    filter = context.filter,
-    visibledatarow = context.visibledatarow,
-    visibledatacolumn = context.visibledatacolumn;
-  var sheetIndex = (0, _fortuneCore.getSheetIndex)(context, context.currentSheetId);
-  var _g = context.luckysheetfile[sheetIndex],
-    filter_select = _g.filter_select,
-    frozen = _g.frozen;
-  (0, _react.useEffect)(function () {
-    setContext(function (draftCtx) {
-      var sheetIdx = (0, _fortuneCore.getSheetIndex)(draftCtx, draftCtx.currentSheetId);
-      if (sheetIdx == null) return;
-      draftCtx.luckysheet_filter_save = draftCtx.luckysheetfile[sheetIdx].filter_select;
-      draftCtx.filter = draftCtx.luckysheetfile[sheetIdx].filter || {};
-      (0, _fortuneCore.createFilterOptions)(draftCtx, draftCtx.luckysheet_filter_save, undefined);
-    });
-  }, [visibledatarow, visibledatacolumn, setContext, currentSheetId, filter_select]);
-  var showFilterContextMenu = (0, _react.useCallback)(function (v, i) {
-    if (filterOptions == null) return;
-    setContext(function (draftCtx) {
-      var _a, _b;
-      if (((_a = draftCtx.filterContextMenu) === null || _a === void 0 ? void 0 : _a.col) === filterOptions.startCol + i) return;
-      draftCtx.filterContextMenu = {
-        x: v.left + draftCtx.rowHeaderWidth - refs.scrollbarX.current.scrollLeft,
-        y: v.top + 23 + draftCtx.toolbarHeight + draftCtx.calculatebarHeight + draftCtx.columnHeaderHeight - refs.scrollbarY.current.scrollTop,
-        col: filterOptions.startCol + i,
-        startRow: filterOptions.startRow,
-        endRow: filterOptions.endRow,
-        startCol: filterOptions.startCol,
-        endCol: filterOptions.endCol,
-        hiddenRows: _lodash.default.keys((_b = draftCtx.filter[i]) === null || _b === void 0 ? void 0 : _b.rowhidden).map(function (r) {
-          return parseInt(r, 10);
-        }),
-        listBoxMaxHeight: 400
-      };
-    });
-  }, [filterOptions, getContainer, refs.scrollbarX, refs.scrollbarY, setContext]);
-  var freezeType = frozen === null || frozen === void 0 ? void 0 : frozen.type;
-  var frozenColumns = -1;
-  var frozenRows = -1;
-  if (freezeType === "row") frozenRows = 0;else if (freezeType === "column") frozenColumns = 0;else if (freezeType === "both") {
-    frozenColumns = 0;
-    frozenRows = 0;
-  } else {
-    frozenColumns = ((_b = frozen === null || frozen === void 0 ? void 0 : frozen.range) === null || _b === void 0 ? void 0 : _b.column_focus) || -1;
-    frozenRows = ((_c = frozen === null || frozen === void 0 ? void 0 : frozen.range) === null || _c === void 0 ? void 0 : _c.row_focus) || -1;
-  }
-  return filterOptions == null ? (/*#__PURE__*/_react.default.createElement("div", null)) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    id: "luckysheet-filter-selected-sheet",
-    className: "luckysheet-cell-selected luckysheet-filter-selected",
-    style: _lodash.default.assign({
-      left: filterOptions.left,
-      width: filterOptions.width,
-      top: filterOptions.top,
-      height: filterOptions.height,
-      display: "block"
-    }, (0, _fortuneCore.fixRowStyleOverflowInFreeze)(context, filterOptions.startRow, filterOptions.endRow, (_d = refs.globalCache.freezen) === null || _d === void 0 ? void 0 : _d[context.currentSheetId]), (0, _fortuneCore.fixColumnStyleOverflowInFreeze)(context, filterOptions.startCol, filterOptions.endCol, (_e = refs.globalCache.freezen) === null || _e === void 0 ? void 0 : _e[context.currentSheetId]))
-  }), filterOptions.items.map(function (v, i) {
-    var _a, _b;
-    var filterParam = filter[i];
-    var columnOverflowFreezeStyle = (0, _fortuneCore.fixColumnStyleOverflowInFreeze)(context, i + filterOptions.startCol, i + filterOptions.startCol, (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId]);
-    var rowOverflowFreezeStyle = (0, _fortuneCore.fixRowStyleOverflowInFreeze)(context, filterOptions.startRow, filterOptions.startRow, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]);
-    var col = visibledatacolumn[v.col];
-    var col_pre = v.col > 0 ? visibledatacolumn[v.col - 1] : 0;
-    var left = v.col <= frozenColumns && columnOverflowFreezeStyle.left ? columnOverflowFreezeStyle.left + col - col_pre - 20 : v.left;
-    var top = filterOptions.startRow <= frozenRows && rowOverflowFreezeStyle.top ? rowOverflowFreezeStyle.top : v.top;
-    var v_adjusted = __assign(__assign({}, v), {
-      left: left,
-      top: top
-    });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      onMouseDown: function onMouseDown(e) {
-        return e.stopPropagation();
-      },
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        showFilterContextMenu(v_adjusted, i);
-      },
-      onDoubleClick: function onDoubleClick(e) {
-        return e.stopPropagation();
-      },
-      tabIndex: 0,
-      key: i,
-      style: _lodash.default.assign(rowOverflowFreezeStyle, columnOverflowFreezeStyle, {
-        left: left,
-        top: top,
-        height: undefined,
-        width: undefined
-      }),
-      className: "luckysheet-filter-options ".concat(filterParam == null ? "" : "luckysheet-filter-options-active")
-    }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
-      name: "filter",
-      width: 15,
-      height: 15
-    }));
-  })));
-};
-var _default = exports.default = FilterOptions;

package/lib/components/FormatSearch/index.css

@@ -1,19 +0,0 @@
-.listBox {
-  display: flex;
-  justify-content: space-between;
-}
-
-.inpbox {
-  margin-bottom: 10px;
-}
-
-.decimal-places-input {
-  width: 70px;
-}
-
-.format-list {
-  width: 300px;
-  height: 170px;
-  border: 1px solid #d4d4d4;
-  overflow-y: scroll;
-}

package/lib/components/FormatSearch/index.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import "./index.css";
-export declare const FormatSearch: React.FC<{
-    type: "currency" | "date" | "number";
-    onCancel: () => void;
-}>;

package/lib/components/FormatSearch/index.js

@@ -1,138 +0,0 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FormatSearch = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _fortuneCore = require("@fileverse-dev/fortune-core");
-var _ui = require("@fileverse/ui");
-var _lodash = _interopRequireDefault(require("lodash"));
-var _context = _interopRequireDefault(require("../../context"));
-require("./index.css");
-var _useDialog = require("../../hooks/useDialog");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var FormatSearch = exports.FormatSearch = function FormatSearch(_a) {
-  var _b, _c;
-  var type = _a.type,
-    _onCancel = _a.onCancel;
-  var _d = (0, _react.useContext)(_context.default),
-    context = _d.context,
-    setContext = _d.setContext,
-    cellInput = _d.refs.cellInput;
-  var _e = (0, _react.useState)(2),
-    decimalPlace = _e[0],
-    setDecimalPlace = _e[1];
-  var _f = (0, _react.useState)(0),
-    selectedFormatIndex = _f[0],
-    setSelectedFormatIndex = _f[1];
-  var _g = (0, _fortuneCore.locale)(context),
-    button = _g.button,
-    format = _g.format,
-    currencyDetail = _g.currencyDetail,
-    dateFmtList = _g.dateFmtList;
-  var showDialog = (0, _useDialog.useDialog)().showDialog;
-  var toolbarFormatAll = (0, _react.useMemo)(function () {
-    return {
-      currency: currencyDetail,
-      date: dateFmtList,
-      number: []
-    };
-  }, [currencyDetail, dateFmtList]);
-  var toolbarFormat = (0, _react.useMemo)(function () {
-    return toolbarFormatAll[type];
-  }, [toolbarFormatAll, type]);
-  var onConfirm = (0, _react.useCallback)(function () {
-    if (decimalPlace < 0 || decimalPlace > 9) {
-      _onCancel();
-      showDialog(format.tipDecimalPlaces, "ok");
-      return;
-    }
-    setContext(function (ctx) {
-      var index = (0, _fortuneCore.getSheetIndex)(ctx, ctx.currentSheetId);
-      if (_lodash.default.isNil(index)) return;
-      var selectedFormat = toolbarFormat[selectedFormatIndex].value;
-      var formatString = "".concat(selectedFormat, "#,##0.").concat("0".repeat(decimalPlace));
-      _lodash.default.forEach(ctx.luckysheet_select_save, function (selection) {
-        var _a, _b, _c, _d;
-        for (var r = selection.row[0]; r <= selection.row[1]; r += 1) {
-          for (var c = selection.column[0]; c <= selection.column[1]; c += 1) {
-            if (((_a = ctx.luckysheetfile[index].data) === null || _a === void 0 ? void 0 : _a[r][c]) && ((_d = (_c = (_b = ctx.luckysheetfile[index].data) === null || _b === void 0 ? void 0 : _b[r][c]) === null || _c === void 0 ? void 0 : _c.ct) === null || _d === void 0 ? void 0 : _d.t) === "n") {
-              ctx.luckysheetfile[index].data[r][c].ct.fa = formatString;
-              ctx.luckysheetfile[index].data[r][c].m = (0, _fortuneCore.update)(formatString, ctx.luckysheetfile[index].data[r][c].v);
-            }
-          }
-        }
-      });
-      _onCancel();
-    });
-  }, [_onCancel, decimalPlace, format.tipDecimalPlaces, selectedFormatIndex, setContext, showDialog, toolbarFormat]);
-  var onCancel = (0, _react.useCallback)(function () {
-    setContext(function (ctx) {
-      (0, _fortuneCore.cancelNormalSelected)(ctx);
-      if (cellInput.current) {
-        cellInput.current.innerHTML = "";
-      }
-    });
-    _onCancel();
-  }, [_onCancel, cellInput, setContext]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "format-search"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex flex-col gap-4"
-  }, type === "currency" && (/*#__PURE__*/_react.default.createElement("div", {
-    className: "flex items-center gap-2"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "text-body-sm",
-    style: {
-      width: "180px"
-    }
-  }, format.decimalPlaces, "\uFF1A"), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
-    className: "w-full",
-    type: "number",
-    min: 0,
-    max: 9,
-    defaultValue: 2,
-    onChange: function onChange(e) {
-      setDecimalPlace(parseInt(e.target.value, 10));
-    }
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex flex-col gap-2"
-  }, /*#__PURE__*/_react.default.createElement(_ui.Select, {
-    value: String(selectedFormatIndex),
-    onValueChange: function onValueChange(value) {
-      setSelectedFormatIndex(Number(value));
-    }
-  }, /*#__PURE__*/_react.default.createElement(_ui.SelectTrigger, {
-    className: "w-full"
-  }, /*#__PURE__*/_react.default.createElement(_ui.SelectValue, null, (_b = toolbarFormat[selectedFormatIndex]) === null || _b === void 0 ? void 0 : _b.name, " ", (_c = toolbarFormat[selectedFormatIndex]) === null || _c === void 0 ? void 0 : _c.value)), /*#__PURE__*/_react.default.createElement(_ui.SelectContent, null, toolbarFormat.map(function (v, index) {
-    return /*#__PURE__*/_react.default.createElement(_ui.SelectItem, {
-      key: v.name,
-      value: String(index)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "flex justify-between w-full"
-    }, /*#__PURE__*/_react.default.createElement("span", null, v.name), /*#__PURE__*/_react.default.createElement("span", {
-      className: "text-body-sm text-icon-secondary"
-    }, v.value)));
-  }))))), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
-    className: "w-full border-t-[1px] my-4"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex gap-2 justify-end"
-  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    variant: "secondary",
-    style: {
-      minWidth: "80px"
-    },
-    onClick: onCancel,
-    tabIndex: 0
-  }, button.cancel), /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    variant: "default",
-    style: {
-      minWidth: "80px"
-    },
-    onClick: onConfirm,
-    tabIndex: 0
-  }, button.confirm)));
-};

package/lib/components/FormulaSearch/index.css

@@ -1,65 +0,0 @@
-/*函数公式查找样式*/
-#luckysheet-search-formula {
-  font-size: 12px;
-}
-
-#luckysheet-search-formula .inpbox {
-  margin-bottom: 5px;
-}
-
-#luckysheet-search-formula .inpbox div {
-  display: block;
-  margin-bottom: 5px;
-}
-
-#luckysheet-search-formula .inpbox input {
-  width: 100%;
-  height: 24px;
-  line-height: 24px;
-  border: 1px solid #d4d4d4;
-  padding: 0 10px;
-  box-sizing: border-box;
-  font-size: 12px;
-}
-
-#luckysheet-search-formula .selbox {
-  margin-bottom: 5px;
-}
-
-#luckysheet-search-formula .selbox select {
-  width: 50%;
-  height: 24px;
-  line-height: 24px;
-  border: 1px solid #d4d4d4;
-  box-sizing: border-box;
-  font-size: 12px;
-}
-
-#luckysheet-search-formula .listbox label {
-  display: block;
-  margin-bottom: 5px;
-}
-
-#formulaTypeList {
-  width: 300px;
-  height: 170px;
-  border: 1px solid #d4d4d4;
-  overflow-y: scroll;
-}
-
-.formulaList {
-  width: 300px;
-  height: 170px;
-  border: 1px solid #d4d4d4;
-  overflow-y: scroll;
-}
-
-.listBox {
-  padding: 5px;
-  border-bottom: 1px solid #d4d4d4;
-}
-
-.listBox.on {
-  background-color: #8c89fe;
-  color: #fff;
-}