@varlet/ui 1.23.4-alpha.0 → 1.23.4-alpha.4

package/lib/picker/Picker.js

@@ -0,0 +1,446 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _elements = require("../utils/elements");
+
+var _locale = require("../locale");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MOMENTUM_RECORD_TIME = 300;
+var MOMENTUM_ALLOW_DISTANCE = 15;
+var sid = 0;
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-picker__toolbar"
+};
+var _hoisted_2 = {
+  class: "var-picker__title"
+};
+var _hoisted_3 = ["onTouchstart", "onTouchmove", "onTouchend"];
+var _hoisted_4 = ["onTransitionend"];
+var _hoisted_5 = {
+  class: "var-picker__text"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_button = (0, _vue.resolveComponent)("var-button");
+
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.dynamic ? 'var-popup' : _ctx.Transition), (0, _vue.mergeProps)(_ctx.dynamic ? {
+    onOpen: _ctx.onOpen,
+    onOpened: _ctx.onOpened,
+    onClose: _ctx.onClose,
+    onClosed: _ctx.onClosed,
+    onClickOverlay: _ctx.onClickOverlay,
+    onRouteChange: _ctx.onRouteChange,
+    closeOnClickOverlay: _ctx.closeOnClickOverlay,
+    teleport: _ctx.teleport,
+    show: _ctx.show,
+    'onUpdate:show': _ctx.handlePopupUpdateShow,
+    position: 'bottom',
+    class: 'var-picker__popup'
+  } : null, {
+    "var-picker-cover": ""
+  }), {
+    default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
+      class: "var-picker"
+    }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "cancel", {}, () => [(0, _vue.createVNode)(_component_var_button, {
+      class: "var-picker__cancel-button",
+      "var-picker-cover": "",
+      text: "",
+      "text-color": _ctx.cancelButtonTextColor,
+      onClick: _ctx.cancel
+    }, {
+      default: (0, _vue.withCtx)(() => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.cancelButtonText, _ctx.pack.pickerCancelButtonText)), 1
+      /* TEXT */
+      )]),
+      _: 1
+      /* STABLE */
+
+    }, 8
+    /* PROPS */
+    , ["text-color", "onClick"])]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createElementVNode)("div", _hoisted_2, (0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 1
+    /* TEXT */
+    )]), (0, _vue.renderSlot)(_ctx.$slots, "confirm", {}, () => [(0, _vue.createVNode)(_component_var_button, {
+      class: "var-picker__confirm-button",
+      text: "",
+      "var-picker-cover": "",
+      "text-color": _ctx.confirmButtonTextColor,
+      onClick: _ctx.confirm
+    }, {
+      default: (0, _vue.withCtx)(() => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.confirmButtonText, _ctx.pack.pickerConfirmButtonText)), 1
+      /* TEXT */
+      )]),
+      _: 1
+      /* STABLE */
+
+    }, 8
+    /* PROPS */
+    , ["text-color", "onClick"])])]), (0, _vue.createElementVNode)("div", {
+      class: "var-picker__columns",
+      style: (0, _vue.normalizeStyle)({
+        height: _ctx.columnHeight + "px"
+      })
+    }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.scrollColumns, c => {
+      return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+        class: "var-picker__column",
+        key: c.id,
+        onTouchstart: $event => _ctx.handleTouchstart($event, c),
+        onTouchmove: (0, _vue.withModifiers)($event => _ctx.handleTouchmove($event, c), ["prevent"]),
+        onTouchend: $event => _ctx.handleTouchend($event, c)
+      }, [(0, _vue.createElementVNode)("div", {
+        class: "var-picker__scroller",
+        ref: el => _ctx.getScrollEl(el, c),
+        style: (0, _vue.normalizeStyle)({
+          transform: "translateY(" + c.translate + "px)",
+          transitionDuration: c.duration + "ms",
+          transitionProperty: c.duration ? 'transform' : 'none'
+        }),
+        onTransitionend: $event => _ctx.handleTransitionend(c)
+      }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(c.column.texts, t => {
+        return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+          class: "var-picker__option",
+          style: (0, _vue.normalizeStyle)({
+            height: _ctx.optionHeight + "px"
+          }),
+          key: t
+        }, [(0, _vue.createElementVNode)("div", _hoisted_5, (0, _vue.toDisplayString)(t), 1
+        /* TEXT */
+        )], 4
+        /* STYLE */
+        );
+      }), 128
+      /* KEYED_FRAGMENT */
+      ))], 44
+      /* STYLE, PROPS, HYDRATE_EVENTS */
+      , _hoisted_4)], 40
+      /* PROPS, HYDRATE_EVENTS */
+      , _hoisted_3);
+    }), 128
+    /* KEYED_FRAGMENT */
+    )), (0, _vue.createElementVNode)("div", {
+      class: "var-picker__picked",
+      style: (0, _vue.normalizeStyle)({
+        top: _ctx.center + "px",
+        height: _ctx.optionHeight + "px"
+      })
+    }, null, 4
+    /* STYLE */
+    ), (0, _vue.createElementVNode)("div", {
+      class: "var-picker__mask",
+      style: (0, _vue.normalizeStyle)({
+        backgroundSize: "100% " + (_ctx.columnHeight - _ctx.optionHeight) / 2 + "px"
+      })
+    }, null, 4
+    /* STYLE */
+    )], 4
+    /* STYLE */
+    )], 16
+    /* FULL_PROPS */
+    )]),
+    _: 3
+    /* FORWARDED */
+
+  }, 16
+  /* FULL_PROPS */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarPicker',
+  components: {
+    VarButton: _button.default,
+    VarPopup: _popup.default
+  },
+  inheritAttrs: false,
+  props: _props.props,
+
+  setup(props) {
+    var scrollColumns = (0, _vue.ref)([]);
+    var optionHeight = (0, _vue.computed)(() => (0, _elements.toPxNum)(props.optionHeight));
+    var optionCount = (0, _vue.computed)(() => (0, _elements.toPxNum)(props.optionCount));
+    var center = (0, _vue.computed)(() => optionCount.value * optionHeight.value / 2 - optionHeight.value / 2);
+    var columnHeight = (0, _vue.computed)(() => optionCount.value * optionHeight.value);
+    var prevIndexes = [];
+
+    var getScrollEl = (el, scrollColumn) => {
+      scrollColumn.scrollEl = el;
+    };
+
+    var handlePopupUpdateShow = value => {
+      var _props$onUpdateShow;
+
+      (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, value);
+    };
+
+    var limitTranslate = scrollColumn => {
+      var START_LIMIT = optionHeight.value + center.value;
+      var END_LIMIT = center.value - scrollColumn.column.texts.length * optionHeight.value;
+
+      if (scrollColumn.translate >= START_LIMIT) {
+        scrollColumn.translate = START_LIMIT;
+      }
+
+      if (scrollColumn.translate <= END_LIMIT) {
+        scrollColumn.translate = END_LIMIT;
+      }
+    };
+
+    var boundaryIndex = (scrollColumn, index) => {
+      var {
+        length
+      } = scrollColumn.column.texts;
+      index = index >= length ? length - 1 : index;
+      index = index <= 0 ? 0 : index;
+      return index;
+    };
+
+    var getIndex = scrollColumn => {
+      var index = Math.round((center.value - scrollColumn.translate) / optionHeight.value);
+      return boundaryIndex(scrollColumn, index);
+    };
+
+    var getPicked = () => {
+      var texts = scrollColumns.value.map(scrollColumn => scrollColumn.column.texts[scrollColumn.index]);
+      var indexes = scrollColumns.value.map(scrollColumn => scrollColumn.index);
+      return {
+        texts,
+        indexes
+      };
+    };
+
+    var scrollTo = (scrollColumn, index, duration, noEmit = false) => {
+      var translate = center.value - boundaryIndex(scrollColumn, index) * optionHeight.value;
+
+      if (translate === scrollColumn.translate) {
+        scrollColumn.scrolling = false;
+        !noEmit && change(scrollColumn);
+      }
+
+      scrollColumn.translate = translate;
+      scrollColumn.duration = duration;
+    };
+
+    var momentum = (scrollColumn, distance, duration) => {
+      scrollColumn.translate += Math.abs(distance / duration) / 0.003 * (distance < 0 ? -1 : 1);
+    };
+
+    var handleTouchstart = (event, scrollColumn) => {
+      scrollColumn.touching = true;
+      scrollColumn.scrolling = false;
+      scrollColumn.duration = 0;
+      scrollColumn.translate = (0, _elements.getTranslate)(scrollColumn.scrollEl);
+    };
+
+    var handleTouchmove = (event, scrollColumn) => {
+      if (!scrollColumn.touching) {
+        return;
+      }
+
+      var {
+        clientY
+      } = event.touches[0];
+      var moveY = scrollColumn.prevY !== undefined ? clientY - scrollColumn.prevY : 0;
+      scrollColumn.prevY = clientY;
+      scrollColumn.translate += moveY;
+      limitTranslate(scrollColumn);
+      var now = performance.now();
+
+      if (now - scrollColumn.momentumTime > MOMENTUM_RECORD_TIME) {
+        scrollColumn.momentumTime = now;
+        scrollColumn.momentumPrevY = scrollColumn.translate;
+      }
+    };
+
+    var handleTouchend = (event, scrollColumn) => {
+      scrollColumn.touching = false;
+      scrollColumn.scrolling = true;
+      scrollColumn.prevY = undefined;
+      var distance = scrollColumn.translate - scrollColumn.momentumPrevY;
+      var duration = performance.now() - scrollColumn.momentumTime;
+      var shouldMomentum = Math.abs(distance) >= MOMENTUM_ALLOW_DISTANCE && duration <= MOMENTUM_RECORD_TIME;
+      shouldMomentum && momentum(scrollColumn, distance, duration);
+      scrollColumn.index = getIndex(scrollColumn);
+      scrollTo(scrollColumn, scrollColumn.index, shouldMomentum ? 1000 : 200);
+    };
+
+    var handleTransitionend = scrollColumn => {
+      scrollColumn.scrolling = false;
+      change(scrollColumn);
+    };
+
+    var normalizeNormalColumns = normalColumns => {
+      return normalColumns.map(column => {
+        var _normalColumn$initial;
+
+        var normalColumn = (0, _shared.isArray)(column) ? {
+          texts: column
+        } : column;
+        var scrollColumn = {
+          id: sid++,
+          prevY: undefined,
+          momentumPrevY: undefined,
+          touching: false,
+          translate: center.value,
+          index: (_normalColumn$initial = normalColumn.initialIndex) != null ? _normalColumn$initial : 0,
+          duration: 0,
+          momentumTime: 0,
+          column: normalColumn,
+          scrollEl: null,
+          scrolling: false
+        };
+        scrollTo(scrollColumn, scrollColumn.index, 200);
+        return scrollColumn;
+      });
+    };
+
+    var normalizeCascadeColumns = cascadeColumns => {
+      var scrollColumns = [];
+      createChildren(scrollColumns, cascadeColumns);
+      return scrollColumns;
+    };
+
+    var createChildren = (scrollColumns, children) => {
+      if ((0, _shared.isArray)(children) && children.length) {
+        var scrollColumn = {
+          id: sid++,
+          prevY: undefined,
+          momentumPrevY: undefined,
+          touching: false,
+          translate: center.value,
+          index: 0,
+          duration: 0,
+          momentumTime: 0,
+          column: {
+            texts: children.map(cascadeColumn => cascadeColumn[props.textKey])
+          },
+          columns: children,
+          scrollEl: null,
+          scrolling: false
+        };
+        scrollColumns.push(scrollColumn);
+        createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children);
+      }
+    };
+
+    var rebuildChildren = scrollColumn => {
+      scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
+      createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children);
+    };
+
+    var change = scrollColumn => {
+      var {
+        cascade,
+        onChange
+      } = props;
+      cascade && rebuildChildren(scrollColumn);
+      var hasScrolling = scrollColumns.value.some(scrollColumn => scrollColumn.scrolling);
+
+      if (hasScrolling) {
+        return;
+      }
+
+      var {
+        texts,
+        indexes
+      } = getPicked();
+      var samePicked = indexes.every((index, idx) => index === prevIndexes[idx]);
+
+      if (samePicked) {
+        return;
+      }
+
+      prevIndexes = [...indexes];
+      onChange == null ? void 0 : onChange(texts, indexes);
+    };
+
+    var stopScroll = () => {
+      if (props.cascade) {
+        var currentScrollColumn = scrollColumns.value.find(scrollColumn => scrollColumn.scrolling);
+
+        if (currentScrollColumn) {
+          currentScrollColumn.translate = (0, _elements.getTranslate)(currentScrollColumn.scrollEl);
+          currentScrollColumn.index = getIndex(currentScrollColumn);
+          scrollTo(currentScrollColumn, currentScrollColumn.index, 0, true);
+          currentScrollColumn.scrolling = false;
+          rebuildChildren(currentScrollColumn);
+        }
+      } else {
+        scrollColumns.value.forEach(scrollColumn => {
+          scrollColumn.translate = (0, _elements.getTranslate)(scrollColumn.scrollEl);
+          scrollColumn.index = getIndex(scrollColumn);
+          scrollTo(scrollColumn, scrollColumn.index, 0);
+        });
+      }
+    }; // expose
+
+
+    var confirm = () => {
+      stopScroll();
+      var {
+        texts,
+        indexes
+      } = getPicked();
+      prevIndexes = [...indexes];
+      props.onConfirm == null ? void 0 : props.onConfirm(texts, indexes);
+    }; // expose
+
+
+    var cancel = () => {
+      stopScroll();
+      var {
+        texts,
+        indexes
+      } = getPicked();
+      prevIndexes = [...indexes];
+      props.onCancel == null ? void 0 : props.onCancel(texts, indexes);
+    };
+
+    (0, _vue.watch)(() => props.columns, newValue => {
+      scrollColumns.value = props.cascade ? normalizeCascadeColumns((0, _vue.toRaw)(newValue)) : normalizeNormalColumns((0, _vue.toRaw)(newValue));
+      var {
+        indexes
+      } = getPicked();
+      prevIndexes = [...indexes];
+    }, {
+      immediate: true
+    });
+    return {
+      pack: _locale.pack,
+      optionHeight,
+      optionCount,
+      scrollColumns,
+      columnHeight,
+      center,
+      Transition: _vue.Transition,
+      getScrollEl,
+      handlePopupUpdateShow,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
+      handleTransitionend,
+      confirm,
+      cancel,
+      dt: _shared.dt
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/picker/index.js

@@ -0,0 +1,98 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._PickerComponent = void 0;
+
+var _Picker = _interopRequireDefault(require("./Picker.js"));
+
+var _vue = require("vue");
+
+var _shared = require("../utils/shared");
+
+var _components = require("../utils/components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var singletonOptions;
+
+function Picker(options) {
+  return new Promise(resolve => {
+    Picker.close();
+    var pickerOptions = (0, _shared.isArray)(options) ? {
+      columns: options
+    } : options;
+    var reactivePickerOptions = (0, _vue.reactive)(pickerOptions);
+    reactivePickerOptions.dynamic = true;
+    reactivePickerOptions.teleport = 'body';
+    singletonOptions = reactivePickerOptions;
+    var {
+      unmountInstance
+    } = (0, _components.mountInstance)(_Picker.default, reactivePickerOptions, {
+      onConfirm: (texts, indexes) => {
+        reactivePickerOptions.onConfirm == null ? void 0 : reactivePickerOptions.onConfirm(texts, indexes);
+        resolve({
+          state: 'confirm',
+          texts,
+          indexes
+        });
+        reactivePickerOptions.show = false;
+        singletonOptions === reactivePickerOptions && (singletonOptions = null);
+      },
+      onCancel: (texts, indexes) => {
+        reactivePickerOptions.onCancel == null ? void 0 : reactivePickerOptions.onCancel(texts, indexes);
+        resolve({
+          state: 'cancel',
+          texts,
+          indexes
+        });
+        reactivePickerOptions.show = false;
+        singletonOptions === reactivePickerOptions && (singletonOptions = null);
+      },
+      onClose: () => {
+        reactivePickerOptions.onClose == null ? void 0 : reactivePickerOptions.onClose();
+        resolve({
+          state: 'close'
+        });
+        singletonOptions === reactivePickerOptions && (singletonOptions = null);
+      },
+      onClosed: () => {
+        reactivePickerOptions.onClosed == null ? void 0 : reactivePickerOptions.onClosed();
+        unmountInstance();
+        singletonOptions === reactivePickerOptions && (singletonOptions = null);
+      },
+      onRouteChange: () => {
+        unmountInstance();
+        singletonOptions === reactivePickerOptions && (singletonOptions = null);
+      },
+      'onUpdate:show': value => {
+        reactivePickerOptions.show = value;
+      }
+    });
+    reactivePickerOptions.show = true;
+  });
+}
+
+_Picker.default.install = function (app) {
+  app.component(_Picker.default.name, _Picker.default);
+};
+
+Picker.Component = _Picker.default;
+
+Picker.install = function (app) {
+  app.component(_Picker.default.name, _Picker.default);
+};
+
+Picker.close = () => {
+  if (singletonOptions != null) {
+    var prevSingletonOptions = singletonOptions;
+    singletonOptions = null;
+    (0, _vue.nextTick)().then(() => {
+      prevSingletonOptions.show = false;
+    });
+  }
+};
+
+var _PickerComponent = _Picker.default;
+exports._PickerComponent = _PickerComponent;
+var _default = Picker;
+exports.default = _default;

package/lib/picker/picker.css

@@ -0,0 +1 @@
+:root { --picker-background: #fff; --picker-toolbar-height: 44px; --picker-confirm-button-text-color: var(--color-primary); --picker-cancel-button-text-color: #888; --picker-picked-border: 1px solid rgba(0, 0, 0, 0.12); --picker-title-font-size: 16px; --picker-toolbar-padding: 0 4px; --picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));}.var-picker { width: 100%; background: var(--picker-background); user-select: none; transition: 0.25s background-color;}.var-picker__popup[var-picker-cover] { width: 100%;}.var-picker__columns { position: relative; display: flex; width: 100%; cursor: grab;}.var-picker__column { flex: 1; overflow: hidden;}.var-picker__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.var-picker__scroller { width: 100%; transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);}.var-picker__option { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0 4px;}.var-picker__picked { position: absolute; z-index: 2; pointer-events: none; width: 100%; left: 0; border-top: var(--picker-picked-border); border-bottom: var(--picker-picked-border); transition: 0.25s border;}.var-picker__mask { position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%;}.var-picker__toolbar { display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--picker-toolbar-height); padding: var(--picker-toolbar-padding);}.var-picker__confirm-button[var-picker-cover] { color: var(--picker-confirm-button-text-color);}.var-picker__cancel-button[var-picker-cover] { color: var(--picker-cancel-button-text-color);}.var-picker__title { font-size: var(--picker-title-font-size);}

package/lib/picker/picker.less

@@ -0,0 +1,103 @@
+@picker-background: #fff;
+@picker-toolbar-height: 44px;
+@picker-confirm-button-text-color: var(--color-primary);
+@picker-cancel-button-text-color: #888;
+@picker-picked-border: 1px solid rgba(0, 0, 0, 0.12);
+@picker-title-font-size: 16px;
+@picker-toolbar-padding: 0 4px;
+@picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)),
+  linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
+
+:root {
+  --picker-background: @picker-background;
+  --picker-toolbar-height: @picker-toolbar-height;
+  --picker-confirm-button-text-color: @picker-confirm-button-text-color;
+  --picker-cancel-button-text-color: @picker-cancel-button-text-color;
+  --picker-picked-border: @picker-picked-border;
+  --picker-title-font-size: @picker-title-font-size;
+  --picker-toolbar-padding: @picker-toolbar-padding;
+  --picker-mask-background-image: @picker-mask-background-image;
+}
+
+.var-picker {
+  width: 100%;
+  background: var(--picker-background);
+  user-select: none;
+  transition: 0.25s background-color;
+
+  &__popup[var-picker-cover] {
+    width: 100%;
+  }
+
+  &__columns {
+    position: relative;
+    display: flex;
+    width: 100%;
+    cursor: grab;
+  }
+
+  &__column {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__scroller {
+    width: 100%;
+    transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
+  }
+
+  &__option {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: 0 4px;
+  }
+
+  &__picked {
+    position: absolute;
+    z-index: 2;
+    pointer-events: none;
+    width: 100%;
+    left: 0;
+    border-top: var(--picker-picked-border);
+    border-bottom: var(--picker-picked-border);
+    transition: 0.25s border;
+  }
+
+  &__mask {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: var(--picker-toolbar-height);
+    padding: var(--picker-toolbar-padding);
+  }
+
+  &__confirm-button[var-picker-cover] {
+    color: var(--picker-confirm-button-text-color);
+  }
+
+  &__cancel-button[var-picker-cover] {
+    color: var(--picker-cancel-button-text-color);
+  }
+
+  &__title {
+    font-size: var(--picker-title-font-size);
+  }
+}