@xenknight/framework7 0.0.2

package/components/picker/picker-ios.less

@@ -0,0 +1,12 @@
+.ios {
+  .picker-center-highlight {
+    left: 16px;
+    right: 16px;
+    background-color: var(--f7-picker-item-selected-bg-color);
+    border-radius: 8px;
+    .popover & {
+      left: 8px;
+      right: 8px;
+    }
+  }
+}

package/components/picker/picker-md.less

@@ -0,0 +1,8 @@
+.md {
+  .picker-center-highlight {
+    left: 0;
+    right: 0;
+    border-top: 1px solid var(--f7-md-outline);
+    border-bottom: 1px solid var(--f7-md-outline);
+  }
+}

package/components/picker/picker-rtl.css

@@ -0,0 +1 @@
+:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px}.ios{--f7-picker-column-font-size:20px;--f7-picker-item-selected-text-color:#000;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-item-selected-text-color:#fff;--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px}.md,.md .dark,.md [class*=color-]{--f7-picker-item-selected-text-color:var(--f7-md-on-surface);--f7-picker-item-text-color:var(--f7-md-on-surface-variant);--f7-picker-divider-text-color:var(--f7-md-on-surface);--f7-picker-item-selected-border-color:var(--f7-md-outline)}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;font-size:var(--f7-picker-column-font-size);--f7-picker-mask-bg-color:transparent}.popover .picker-columns{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.picker-columns::after,.picker-columns::before{content:'';position:absolute;left:0;width:100%;height:20%;z-index:100;pointer-events:none}.page .picker-columns{--f7-picker-mask-bg-color:var(--f7-page-bg-color)}.block-strong .picker-columns{--f7-picker-mask-bg-color:var(--f7-block-strong-bg-color)}.picker-sheet .picker-columns{--f7-picker-mask-bg-color:var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color))}.picker-popover .picker-columns{--f7-picker-mask-bg-color:var(--f7-popover-bg-color)}.picker-columns::before{top:0;background-image:linear-gradient(to bottom,var(--f7-picker-mask-bg-color),transparent)}.picker-columns::after{bottom:0;background-image:linear-gradient(to top,var(--f7-picker-mask-bg-color),transparent)}.picker-column{position:relative;max-height:100%;z-index:10}.picker-column.picker-column-first.picker-column-last{width:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{overflow:auto;scroll-snap-type:y mandatory;height:100%;box-sizing:border-box;padding:var(--f7-picker-scroll-padding,0px) 0px;scrollbar-width:none;scrollbar-color:transparent}.picker-items::-webkit-scrollbar{-webkit-appearance:none;appearance:none;width:0px;display:none;opacity:0;background:0 0}.picker-items::-webkit-scrollbar-track{box-shadow:none;background:0 0}.picker-items::-webkit-scrollbar-thumb{background-color:transparent;outline:0;border-radius:9999px;position:relative}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;scroll-snap-align:center}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{perspective:1200px;overflow:visible}.picker-3d .picker-item>span{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;transform-style:preserve-3d;position:relative;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;transform-origin:center center -100px}.ios .picker-center-highlight{left:16px;right:16px;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .ios .picker-center-highlight{left:8px;right:8px}.md .picker-center-highlight{left:0;right:0;border-top:1px solid var(--f7-md-outline);border-bottom:1px solid var(--f7-md-outline)}

package/components/picker/picker-vars.less

@@ -0,0 +1,35 @@
+:root {
+  --f7-picker-height: 260px;
+  --f7-picker-inline-height: 200px;
+  --f7-picker-popover-height: 260px;
+  --f7-picker-popover-width: 280px;
+  --f7-picker-landscape-height: 200px;
+  --f7-picker-item-height: 36px;
+  /*
+  --f7-picker-sheet-bg-color: var(--f7-sheet-bg-color);
+  */
+}
+.ios-vars({
+  --f7-picker-column-font-size: 20px;
+  .light-vars({
+    --f7-picker-item-selected-text-color: #000;
+    --f7-picker-item-selected-bg-color: rgba(0,0,0,0.12);
+    --f7-picker-divider-text-color: #000;
+    --f7-picker-item-text-color: rgba(0,0,0,0.45);
+  });
+  .dark-vars({
+    --f7-picker-item-selected-text-color: #fff;
+    --f7-picker-item-selected-bg-color: rgba(255,255,255,0.1);
+    --f7-picker-divider-text-color: #fff;
+    --f7-picker-item-text-color: rgba(255,255,255,0.55);
+  });
+});
+.md-vars({
+  --f7-picker-column-font-size: 20px;
+});
+.md-color-vars({
+  --f7-picker-item-selected-text-color: var(--f7-md-on-surface);
+  --f7-picker-item-text-color: var(--f7-md-on-surface-variant);
+  --f7-picker-divider-text-color: var(--f7-md-on-surface);
+  --f7-picker-item-selected-border-color: var(--f7-md-outline);
+});

package/components/picker/picker.css

@@ -0,0 +1 @@
+:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px}.ios{--f7-picker-column-font-size:20px;--f7-picker-item-selected-text-color:#000;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-item-selected-text-color:#fff;--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px}.md,.md .dark,.md [class*=color-]{--f7-picker-item-selected-text-color:var(--f7-md-on-surface);--f7-picker-item-text-color:var(--f7-md-on-surface-variant);--f7-picker-divider-text-color:var(--f7-md-on-surface);--f7-picker-item-selected-border-color:var(--f7-md-outline)}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;font-size:var(--f7-picker-column-font-size);--f7-picker-mask-bg-color:transparent}.popover .picker-columns{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.picker-columns::after,.picker-columns::before{content:'';position:absolute;left:0;width:100%;height:20%;z-index:100;pointer-events:none}.page .picker-columns{--f7-picker-mask-bg-color:var(--f7-page-bg-color)}.block-strong .picker-columns{--f7-picker-mask-bg-color:var(--f7-block-strong-bg-color)}.picker-sheet .picker-columns{--f7-picker-mask-bg-color:var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color))}.picker-popover .picker-columns{--f7-picker-mask-bg-color:var(--f7-popover-bg-color)}.picker-columns::before{top:0;background-image:linear-gradient(to bottom,var(--f7-picker-mask-bg-color),transparent)}.picker-columns::after{bottom:0;background-image:linear-gradient(to top,var(--f7-picker-mask-bg-color),transparent)}.picker-column{position:relative;max-height:100%;z-index:10}.picker-column.picker-column-first.picker-column-last{width:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{overflow:auto;scroll-snap-type:y mandatory;height:100%;box-sizing:border-box;padding:var(--f7-picker-scroll-padding,0px) 0px;scrollbar-width:none;scrollbar-color:transparent}.picker-items::-webkit-scrollbar{-webkit-appearance:none;appearance:none;width:0px;display:none;opacity:0;background:0 0}.picker-items::-webkit-scrollbar-track{box-shadow:none;background:0 0}.picker-items::-webkit-scrollbar-thumb{background-color:transparent;outline:0;border-radius:9999px;position:relative}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;scroll-snap-align:center}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{perspective:1200px;overflow:visible}.picker-3d .picker-item>span{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;transform-style:preserve-3d;position:relative;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;transform-origin:center center -100px}.ios .picker-center-highlight{left:16px;right:16px;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .ios .picker-center-highlight{left:8px;right:8px}.md .picker-center-highlight{left:0;right:0;border-top:1px solid var(--f7-md-outline);border-bottom:1px solid var(--f7-md-outline)}

package/components/picker/picker.d.ts

@@ -0,0 +1,209 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+import { View } from '../view/view.js';
+
+export namespace Picker {
+  interface Picker extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Picker wrapping container HTML element (when inline picker is in use) */
+    containerEl: HTMLElement;
+    /** Dom7 instance with picker wrapping container HTML element (when inline picker is in use) */
+    $containerEl: Dom7Array;
+    /** Picker HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with picker HTML element */
+    $el: Dom7Array;
+    /** Picker input HTML element (passed in inputEl parameter) */
+    inputEl: HTMLElement;
+    /** Dom7 instance with picker input HTML element (passed in inputEl parameter) */
+    $inputEl: Dom7Array;
+    /** Array where each item represents current selected value for each column */
+    value: unknown;
+    /** Array with specified Picker columns. Each column also has its own methods and properties (look below) */
+    cols: Column[];
+    /** true if Picker is currently opened */
+    opened: boolean;
+    /** true when inline picker is in use */
+    inline: boolean;
+    /** Picker URL (that was passed in url parameter) */
+    url: string;
+    /** Picker View (that was passed in view parameter) or found parent view */
+    view: View.View;
+    /** Object with initialization parameters */
+    params: Parameters;
+    /** Set new picker value. values is array where each item represents value for each column. duration - transition duration in ms */
+    setValue(values: unknown[]): void;
+    /** Returns current picker value */
+    getValue(): unknown;
+    /** Open Picker */
+    open(): void;
+    /** Close Picker */
+    close(): void;
+    /** Destroy Picker instance and remove all events */
+    destroy(): void;
+  }
+
+  interface Column {
+    /** Column HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with column HTML container */
+    $el: Dom7Array;
+    /** Dom7 instance with column items HTML elements */
+    items: HTMLElement[];
+    /** Currently selected column value */
+    value: unknown;
+    /** Currently selected column display value */
+    displayValue: string;
+    /** Index number of currently selected/active item */
+    activeIndex: number;
+
+    /** Set new value for current column. value is a new value, duration - transition duration in ms */
+    setValue(value: unknown): void;
+    /** Replace column values and displayValues with new ones */
+    replaceValues(values: unknown[], displayValues: unknown[]): void;
+  }
+
+  interface ColumnParameters {
+    /** Array with string columns values. */
+    values?: string[];
+    /** Array with string columns values that will be displayed in Picker. If not specified, it will display values from values parameter. */
+    displayValues?: string[];
+    /** Additional CSS class name to be set on column HTML container. */
+    cssClass?: string;
+    /** Text alignment of column values, could be "left", "center" or "right". */
+    textAlign?: string;
+    /** Column width in px. Useful if you need to fix column widths in picker with dependent columns. By default, calculated automatically. */
+    width?: number;
+    /** Defines column that should be used as a visual divider, that doesn't have any values. (default false) */
+    divider?: boolean;
+    /** Should be specified for divider-column (divider:true) with content of the column. */
+    content?: string;
+    /** Callback function that will be executed when picker value changed. */
+    onChange?: (picker: Picker, value: string, displayValue: string) => void;
+  }
+
+  interface Parameters {
+    /** Enables 3D rotate effect. (default false) */
+    rotateEffect?: boolean;
+    /** Disables snapping on values. (default false) */
+    freeMode?: boolean;
+    /** Array with initial values. Each array item represents value of related column. */
+    value?: unknown[];
+    /** Function to format input value, should return new/formatted string value. values and displayValues are arrays where each item represents value/display value of related column. */
+    formatValue?: (values: unknown[], displayValues: unknown[]) => string;
+    /** Array with columns. Each array item represents object with column parameters. */
+    cols?: ColumnParameters[];
+
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+
+    /** String with CSS selector or HTMLElement where to place generated Picker HTML. Use only for inline picker. */
+    containerEl?: HTMLElement | CSSSelector;
+    /** Can be auto, popover (to open picker in popover), sheet (to open in sheet modal). In case of auto will open in sheet modal on small screens and in popover on large screens.. (default auto) */
+    openIn?: string;
+    /** Enables Picker sheet to push view/s behind on open (default false) */
+    sheetPush?: boolean;
+    /** Enables ability to close Picker sheet with swipe (default false) */
+    sheetSwipeToClose?: boolean | undefined;
+    /** Enables backdrop (dark semi transparent layer behind). (default undefined - based on Popover or Sheet defaults) */
+    backdrop?: boolean;
+    /** String with CSS selector or HTMLElement with related input element. */
+    inputEl?: HTMLElement | CSSSelector;
+    /** Scroll viewport (page-content) to input when picker opened. (default true) */
+    scrollToInput?: boolean;
+    /** Scroll to a different element than the inputEl when picker opened. */
+    scrollToEl?: HTMLElement | CSSSelector;
+    /** Sets "readonly" attribute on specified input. (default true) */
+    inputReadOnly?: boolean;
+    /** Additional CSS class name to be set on picker element. */
+    cssClass?: string;
+    /** If enabled, picker will be closed by clicking outside of picker or related input element. (default true) */
+    closeByOutsideClick?: boolean;
+    /** Enables picker toolbar. (default true) */
+    toolbar?: boolean;
+    /** Text for Done/Close toolbar button. (default Done) */
+    toolbarCloseText?: string;
+    /** Will add opened picker to router history which gives ability to close picker by going back in router history and set current route to the picker modal. (default false) */
+    routableModals?: boolean;
+    /** Picker modal URL that will be set as a current route. (default select/) */
+    url?: string;
+    /** View where to set routing when routableModals enabled. Defaults to parent view of inputEl or main view if not found parent view. */
+    view?: object;
+
+    /** Function to render toolbar. Must return toolbar HTML string. */
+    renderToolbar?: () => string;
+    /** Function to render whole picker. Must return picker full HTML string. */
+    render?: () => string;
+  }
+
+  interface Events {
+    /** Event will be triggered when picker value changes */
+    change: (picker: Picker, value: unknown, displayValue: unknown) => void;
+    /** Event will be triggered when picker initialized */
+    init: (picker: Picker) => void;
+    /** Event will be triggered when Picker starts its opening animation. As an argument event handler receives picker instance */
+    open: (picker: Picker) => void;
+    /** Event will be triggered when Picker completes its opening animation. As an argument event handler receives picker instance */
+    opened: (picker: Picker) => void;
+    /** Event will be triggered when Picker starts its closing animation. As an argument event handler receives picker instance */
+    close: (picker: Picker) => void;
+    /** Event will be triggered after Picker completes its closing animation. As an argument event handler receives picker instance */
+    closed: (picker: Picker) => void;
+    /** Event will be triggered right before Picker instance will be destroyed */
+    beforeDestroy: (picker: Picker) => void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered when Picker starts its opening animation */
+    'picker:open': () => void;
+    /** Event will be triggered after Picker completes its opening animation */
+    'picker:opened': () => void;
+    /** Event will be triggered when Picker starts its closing animation */
+    'picker:close': () => void;
+    /** Event will be triggered after Picker completes its closing animation */
+    'picker:closed': () => void;
+  }
+
+  interface AppMethods {
+    picker: {
+      /** create Picker instance */
+      create(parameters: Parameters): Picker;
+      /** destroy Picker instance */
+      destroy(el: HTMLElement | CSSSelector | Picker): void;
+      /** get Picker instance by HTML element */
+      get(el: HTMLElement | CSSSelector): Picker;
+      /** closes Picker */
+      close(el: HTMLElement | CSSSelector): Picker;
+    };
+  }
+  interface AppParams {
+    picker?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when picker value changes */
+    pickerChange: (picker: Picker, value: unknown, displayValue: unknown) => void;
+    /** Event will be triggered when picker initialized */
+    pickerInit: (picker: Picker) => void;
+    /** Event will be triggered when Picker starts its opening animation. As an argument event handler receives picker instance */
+    pickerOpen: (picker: Picker) => void;
+    /** Event will be triggered when Picker completes its opening animation. As an argument event handler receives picker instance */
+    pickerOpened: (picker: Picker) => void;
+    /** Event will be triggered when Picker starts its closing animation. As an argument event handler receives picker instance */
+    pickerClose: (picker: Picker) => void;
+    /** Event will be triggered after Picker completes its closing animation. As an argument event handler receives picker instance */
+    pickerClosed: (picker: Picker) => void;
+    /** Event will be triggered right before Picker instance will be destroyed */
+    pickerBeforeDestroy: (picker: Picker) => void;
+  }
+}
+
+declare const PickerComponent: Framework7Plugin;
+
+export default PickerComponent;

package/components/picker/picker.js

@@ -0,0 +1,59 @@
+import $ from '../../shared/dom7.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+import Picker from './picker-class.js';
+export default {
+  name: 'picker',
+  static: {
+    Picker
+  },
+  create() {
+    const app = this;
+    app.picker = ConstructorMethods({
+      defaultSelector: '.picker',
+      constructor: Picker,
+      app,
+      domProp: 'f7Picker'
+    });
+    app.picker.close = function close(el) {
+      if (el === void 0) {
+        el = '.picker';
+      }
+      const $el = $(el);
+      if ($el.length === 0) return;
+      const picker = $el[0].f7Picker;
+      if (!picker || picker && !picker.opened) return;
+      picker.close();
+    };
+  },
+  params: {
+    picker: {
+      // Picker settings
+      rotateEffect: false,
+      freeMode: false,
+      cols: [],
+      // Common opener settings
+      containerEl: null,
+      openIn: 'auto',
+      // or 'popover' or 'sheet'
+      sheetPush: false,
+      sheetSwipeToClose: undefined,
+      backdrop: undefined,
+      // uses Popover or Sheet defaults
+      formatValue: null,
+      inputEl: null,
+      inputReadOnly: true,
+      closeByOutsideClick: true,
+      scrollToInput: true,
+      scrollToEl: undefined,
+      toolbar: true,
+      toolbarCloseText: 'Done',
+      cssClass: null,
+      routableModals: false,
+      view: null,
+      url: 'select/',
+      // Render functions
+      renderToolbar: null,
+      render: null
+    }
+  }
+};

package/components/picker/picker.less

@@ -0,0 +1,180 @@
+/* === Picker === */
+@import './picker-vars.less';
+
+.picker {
+  width: 100%;
+  height: var(--f7-picker-height);
+  &.picker-inline {
+    height: var(--f7-picker-inline-height);
+  }
+  .popover & {
+    height: var(--f7-picker-popover-height);
+  }
+  @media (orientation: landscape) and (max-height: 415px) {
+    &:not(.picker-inline) {
+      height: var(--f7-picker-landscape-height);
+    }
+  }
+  &.sheet-modal {
+    background: var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color));
+  }
+}
+.picker-popover {
+  width: var(--f7-picker-popover-width);
+  .toolbar {
+    .hairline-remove(top);
+    background: none;
+    border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
+  }
+  .toolbar + .picker-columns {
+    height: calc(100% - var(--f7-toolbar-height));
+  }
+}
+.picker-columns {
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+  padding: 0;
+  text-align: right;
+  height: 100%;
+  position: relative;
+  font-size: var(--f7-picker-column-font-size);
+  .popover & {
+    border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
+  }
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 20%;
+    z-index: 100;
+    pointer-events: none;
+  }
+  --f7-picker-mask-bg-color: transparent;
+  .page & {
+    --f7-picker-mask-bg-color: var(--f7-page-bg-color);
+  }
+  .block-strong & {
+    --f7-picker-mask-bg-color: var(--f7-block-strong-bg-color);
+  }
+  .picker-sheet & {
+    --f7-picker-mask-bg-color: var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color));
+  }
+  .picker-popover & {
+    --f7-picker-mask-bg-color: var(--f7-popover-bg-color);
+  }
+  &::before {
+    top: 0;
+    background-image: linear-gradient(to bottom, var(--f7-picker-mask-bg-color), transparent);
+  }
+  &::after {
+    bottom: 0;
+    background-image: linear-gradient(to top, var(--f7-picker-mask-bg-color), transparent);
+  }
+}
+.picker-column {
+  position: relative;
+  max-height: 100%;
+  z-index: 10;
+  &.picker-column-first.picker-column-last {
+    width: 100%;
+  }
+
+  &.picker-column-left {
+    text-align: left;
+  }
+  &.picker-column-center {
+    text-align: center;
+  }
+  &.picker-column-right {
+    text-align: right;
+  }
+  &.picker-column-divider {
+    display: flex;
+    align-items: center;
+    color: var(--f7-picker-divider-text-color);
+  }
+}
+.picker-items {
+  overflow: auto;
+  scrollbar-width: none;
+  scroll-snap-type: y mandatory;
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--f7-picker-scroll-padding, 0px) 0px;
+  .no-scrollbar();
+}
+.picker-item {
+  height: var(--f7-picker-item-height);
+  line-height: var(--f7-picker-item-height);
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  left: 0;
+  top: 0;
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--f7-picker-item-text-color);
+  cursor: pointer;
+  scroll-snap-align: center;
+  span {
+    padding: 0 10px;
+  }
+  &.picker-item-far {
+    pointer-events: none;
+  }
+  &.picker-item-selected {
+    color: var(--f7-picker-item-selected-text-color);
+    transform: translate3d(0, 0, 0) rotateX(0deg);
+  }
+  .picker-column-free-mode & {
+    scroll-snap-align: none;
+  }
+}
+.picker-center-highlight {
+  height: var(--f7-picker-item-height);
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  margin-top: calc(-1 * var(--f7-picker-item-height) / 2);
+  pointer-events: none;
+}
+.picker-3d {
+  .picker-columns {
+    overflow: hidden;
+  }
+  .picker-column,
+  .picker-items,
+  .picker-item {
+    transform-style: preserve-3d;
+  }
+  .picker-column {
+    overflow: visible;
+  }
+  .picker-item {
+    perspective: 1200px;
+    overflow: visible;
+
+    > span {
+      backface-visibility: hidden;
+      display: block;
+      transform-style: preserve-3d;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-sizing: border-box;
+      max-width: 100%;
+      transform-origin: center center -100px;
+    }
+  }
+}
+
+.if-ios-theme({
+  @import './picker-ios.less';
+});
+.if-md-theme({
+  @import './picker-md.less';
+});