weex-nuke/lib/node_modules/nuke-web-picker/src/styles/index.js

基于 Rax 、Weex 的高性能组件体系 ~~

import VariableMix from './variable';

function styleProvider(theme = {}) {
  const Variables = VariableMix(theme);
  const core = theme.Core;
  return {
    Picker: {
      mask: {
        backgroundColor: 'rgba(0, 0, 0, .7)'
      },
      picker: {
        position: 'fixed',
        bottom: 0,
        left: 0,
        width: 750,
        backgroundColor: Variables[`background-color`]
      },
      [`picker-toolbar`]: {
        backgroundColor: Variables[`toolbar-background-color`],
        ...core.border(
          Variables[`toolbar-line-width`],
          Variables[`toolbar-line-style`],
          Variables[`toolbar-line-color`],
          'bottom'
        ),

        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height: Variables[`toolbar-height`],
        ...core.padding(0, Variables[`toolbar-padding-lr`]),
        fontSize: Variables[`toolbar-title-font-size`]
      },
      [`picker-cancel`]: {
        width: '20%',
        overflow: 'hidden',
        fontSize: Variables[`toolbar-button-font-size`],
        textAlign: 'left',
        color: Variables[`toolbar-cancel-color`]
      },
      [`picker-done`]: {
        width: '20%',
        overflow: 'hidden',
        fontSize: Variables[`toolbar-button-font-size`],
        textAlign: 'right',
        color: Variables[`toolbar-done-color`]
      },
      [`picker-title`]: {
        flex: 1,
        textAlign: 'center',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        color: Variables[`toolbar-title-color`],
        fontSize: Variables[`toolbar-title-font-size`]
      },
      [`picker-content`]: {
        flexDirection: 'row',
        height: Variables[`height`]
      },
      // },
      // PickerColumn: {
      [`picker-column`]: {
        position: 'relative',
        width: '100%',
        height: Variables[`height`],
        flex: 1,
        overflow: 'hidden',
        [`-webkit-transition`]: 'width ease 0.2s',
        transition: 'width ease 0.2s'
      },
      [`picker-column-mask`]: {
        position: 'absolute',
        left: 0,
        top: 0,
        height: '100%',
        width: '100%',
        [`background-image`]: '-webkit-linear-gradient(top, hsla(0,0%,100%,.95), hsla(0,0%,100%,.6)), -webkit-linear-gradient(bottom,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6))',
        [`background-image`]: 'linear-gradient(180deg, hsla(0,0%,100%,.95), hsla(0,0%,100%,.6)), linear-gradient(0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6))',
        [`background-position`]: 'top, bottom',
        [`background-size`]: Variables['mask-background-size'],
        [`background-repeat`]: 'no-repeat'
      },
      [`picker-column-indicator`]: {
        position: 'absolute',
        left: 0,
        top: Variables[`indicator-top`],
        height: Variables[`item-height`],
        width: '100%',
        [`background-image`]: `-webkit-linear-gradient(top, ${
          Variables[`item-line-color`]
        },${
          Variables[`item-line-color`]
        },transparent, transparent), -webkit-linear-gradient(bottom, ${
          Variables[`item-line-color`]
        },${Variables[`item-line-color`]},transparent, transparent)`,
        [`background-image`]: `linear-gradient(to bottom, ${
          Variables[`item-line-color`]
        },${
          Variables[`item-line-color`]
        }, transparent, transparent), linear-gradient(to top, ${
          Variables[`item-line-color`]
        },${Variables[`item-line-color`]},transparent, transparent)`,
        [`background-position`]: `top, bottom`,
        [`background-size`]: `100% 1px`,
        [`background-repeat`]: `no-repeat`
      },
      [`picker-column-scroll`]: {
        [`-webkit-transform`]: `translate3d(0, 0, 0)`,
        transform: `translate3d(0, 0, 0)`
      },
      // },
      // PickerItem: {
      [`picker-item`]: {
        height: Variables[`item-height`],
        lineHeight: Variables[`item-height`],
        textAlign: 'center',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
      },
      [`picker-item-text`]: {
        color: Variables[`item-text-color`],
        fontSize: Variables[`item-font-size`]
      },
      [`picker-bottom-button`]: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: Variables[`bottom-button-bg-color`],
        height: Variables[`bottom-button-height`]
      },
      [`picker-bottom-button-text`]: {
        color: Variables[`bottom-button-color`],
        fontSize: Variables[`bottom-button-font-size`]
      }
    }
  };
}

module.exports = styleProvider;