const createStyles = (config) => { const thumbSize = Math.max(config.thumb_size, 2 * config.thumb_border_width); const scaledThumbDiff = (config.active_thumb_scale - 1) * thumbSize / 2; const barOffset = (thumbSize / 2); const scaledBorderWidth = Math.max(1, config.thumb_border_width / config.active_thumb_scale); const thumbTouchSize = config.thumb_touch_size; const stepsOffset = config.side_spacing + barOffset - 1; return [{ '.pe-slider': [ mixin.vendorize({ 'user-select': 'none' }, common.prefixes_user_select), { height: config.height + 'px', 'margin-top': ((config.height - config.track_height) / 2) + 'px ', position: 'relative', ' > .pe-icon': { height: config.height + 'px' }, ' .pe-slider__track': [ flex.layoutHorizontal, mixin.defaultTransition('transform', config.animation_duration), mixin.vendorize({ 'user-select': 'none' }, common.prefixes_user_select), { height: config.track_height + 'px', margin: '0 ' + config.side_spacing + 'px', outline: 0 } ], ' div + .pe-slider__track': { margin: '0 ' + config.horizontal_layout_side_spacing + 'px' }, ' .pe-slider__control': [ flex.selfCenter, mixin.defaultTransition('transform, background', config.animation_duration), mixin.vendorize({ 'user-select': 'none' }, common.prefixes_user_select), { width: thumbSize + 'px', height: thumbSize + 'px', 'line-height': 0, 'border-radius': '50%', outline: 0, 'z-index': 1, position: 'relative', // touch area '&:before': [ mixin.defaultTransition('background-color', config.animation_duration), { content: '""', position: 'absolute', 'border-radius': '50%', left: (-thumbTouchSize/2 + thumbSize/2) + 'px', top: (-thumbTouchSize/2 + thumbSize/2) + 'px', width: thumbTouchSize + 'px', height: thumbTouchSize + 'px' } ], // border '&:after': [ mixin.defaultTransition('border', config.animation_duration), positionBorder(thumbSize, config.thumb_border_width), { content: '""', position: 'absolute', 'border-radius': '50%', 'border-style': 'solid' } ] } ], ' .pe-slider__thumb': [ mixin.defaultTransition('opacity', config.animation_duration), mixin.fit(), { '&, .pe-icon': { width: 'inherit', height: 'inherit' } } ], ' .pe-slider__label': { height: config.height + 'px', 'line-height': config.height + 'px', 'min-width': common.unit_icon_size + 'px', 'text-align': 'center', 'font-size': '16px', 'font-weight': common.font_weight_medium }, ' .pe-slider__track-part': [ flex.flex(), mixin.vendorize({ 'user-select': 'none' }, common.prefixes_user_select), { height: config.bar_height + 'px', margin: ((config.track_height - config.bar_height) / 2) + 'px 0px', overflow: 'hidden' // Firefox otherwise uses 6x at 0% } ], ' .pe-slider__track-value, .pe-slider__track-rest': flex.layoutHorizontal, ' .pe-slider__track-bar': [ flex.flex(), { position: 'relative', overflow: 'hidden' } ], ' .pe-slider__track-bar-value': [ flex.flex(), mixin.defaultTransition('transform, background-color', config.animation_duration), { height: config.bar_height + 'px' } ], ' .pe-slider__track-value .pe-slider__track-bar': { 'margin-left': barOffset + 'px' }, ' .pe-slider__track-rest .pe-slider__track-bar': { 'margin-right': barOffset + 'px' }, ' .pe-slider__ticks': [ flex.layoutJustified, mixin.vendorize({ 'user-select': 'none' }, common.prefixes_user_select), { position: 'absolute', width: 'calc(100% - ' + (2 * stepsOffset) + 'px)', height: config.bar_height + 'px', left: 0, top: ((config.height / 2) - 1) + 'px', margin: '0 ' + stepsOffset + 'px', 'pointer-events': 'none' } ], ' .pe-slider__ticks-tick': { width: config.step_width + 'px', height: config.bar_height + 'px' }, ' .pe-slider__pin': [ mixin.vendorize({ 'transform': 'translateZ(0) scale(0) translate(0, 0)' }, common.prefixes_transform), mixin.vendorize({ 'transform-origin': 'bottom' }, common.prefixes_transform), mixin.defaultTransition('transform', '.11s'), { position: 'absolute', 'z-index': 1, width: config.pin_width + 'px', height: 0, left: 0, // set in js top: 0, 'margin': '0 ' + stepsOffset + 'px 0 ' + (stepsOffset - config.pin_width/2 + 1) + 'px', 'pointer-events': 'none', '&::before': [ mixin.vendorize({ 'transform': 'rotate(-45deg)' }, common.prefixes_transform), { content: '" "', position: 'absolute', top: 0, left: 0, width: config.pin_width + 'px', height: config.pin_width + 'px', 'border-radius': '50% 50% 50% 0', 'background-color': 'inherit' } ], '&::after': { content: 'attr(value)', position: 'absolute', top: 0, left: 0, width: config.pin_width + 'px', height: config.pin_height + 'px', 'text-align': 'center', color: '#fff', 'font-size': config.pin_font_size + 'px', 'line-height': config.pin_width + 'px' } } ], '&.pe-slider--active:not(.pe-slider--ticks)': { ' .pe-slider__control': [ mixin.vendorize({ 'transform': 'scale(' + config.active_thumb_scale + ')' }, common.prefixes_transform), { 'border-width': scaledBorderWidth + 'px' } ], // left side ' .pe-slider__track-value .pe-slider__track-bar-value': [ mixin.vendorize({ 'transform': 'translateX(' + (-scaledThumbDiff) + 'px)' }, common.prefixes_transform) ], // right side ' .pe-slider__track-rest .pe-slider__track-bar-value': [ mixin.vendorize({ 'transform': 'translateX(' + (scaledThumbDiff) + 'px)' }, common.prefixes_transform) ] }, '&.pe-slider--pin.pe-slider--active, &.pe-slider--pin.pe-slider--focus': { ' .pe-slider__pin': [ mixin.vendorize({ 'transform': 'translateZ(0) scale(1) translate(0, -24px)' }, common.prefixes_transform) ], ' .pe-slider__control': [ mixin.vendorize({ 'transform': 'scale(' + config.active_pin_thumb_scale + ')' }, common.prefixes_transform) ] }, '&:not(.pe-slider--disabled)': { ' .pe-slider__control': { cursor: 'pointer' }, '&.pe-slider--track': { ' .pe-slider__track': { cursor: 'pointer' } } }, '&.pe-slider--disabled': { ' .pe-slider__control': [ mixin.vendorize({ 'transform': 'scale(' + config.disabled_thumb_scale + ')' }, common.prefixes_transform), { 'border-width': 0 } ], '&.pe-slider--min': { ' .pe-slider__control:after': [ positionBorder(thumbSize, 1 / config.disabled_thumb_scale * config.thumb_border_width) ] } } } ] }]; };
const createStyles = (config) => { return [{ '.pe-header-panel': { position: 'relative', overflow: 'hidden', height: '100%', '&.pe-header-panel--fit': mixin.fit(), ' .pe-header-panel__outer-container': [ mixin.fit(), flex.layoutVertical ], ' .pe-header': mixin.ellipsis(), ' .pe-header-panel__main-container': [ flex.flex(), { position: 'relative', 'overflow-y': 'auto', 'overflow-x': 'hidden', '-webkit-overflow-scrolling': 'touch' } ], ' .pe-header-panel__header-container': { position: 'relative', ' .pe-header-panel__drop-shadow': [ mixin.vendorize({ transition: 'opacity 0.25s' }, common.prefixes_transition), mixin.vendorize({ transform: 'translate3d(0,0,0)' }, common.prefixes_transform), mixin.vendorize({ 'box-shadow': config.box_shadow }, common.prefixes_box_shadow), { opacity: 0, position: 'absolute', top: 'auto', left: 0, right: 0, height: config.box_shadow_height + 'px', 'z-index': 1 } ] }, ' .pe-header-panel__outer-container.pe-header-panel--cascaded > .pe-header-panel__header-container > .pe-header-panel__drop-shadow': { 'opacity': 1 }, '&:not(.pe-header-panel--fixed) > .pe-header-panel__outer-container > .pe-header-panel__header-container': { position: 'absolute', top: 0, right: 0, left: 0, ' .pe-header-panel__background-container': { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', overflow: 'hidden' }, ' .pe-toolbar__top-bar': { 'z-index': 1 }, ' .pe-toolbar__bottom-bar': {} }, '&:not(.pe-header-panel--fixed):not(.pe-header-panel--scroll) > .pe-header-panel__outer-container > .pe-header-panel__header-container': { 'z-index': common.z_header_container }, ' .pe-header-panel__condensed-background': { opacity: 0 }, ' .pe-header-panel__header-background, .pe-header-panel__condensed-background': [ mixin.vendorize({ 'background-size': 'cover' }, common.prefixes_background_size), { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', 'background-repeat': 'no-repeat', 'background-position': 'center center' } ], ' .pe-header-panel__media-dimmer': mixin.fit(), '&.pe-header-panel--standard': { ' .pe-header-panel__drop-shadow': { opacity: 1 } }, '&.pe-header-panel--seamed': { ' .pe-header-panel__drop-shadow': { display: 'none' } }, '&.pe-header-panel--scroll': { ' .pe-header-panel__main-container': { overflow: 'visible' }, ' .pe-header-panel__outer-container': { 'overflow-y': 'auto', 'overflow-x': 'hidden', '-webkit-overflow-scrolling': 'touch' } }, '&.pe-header-panel--cover': { ' .main-panel': { position: 'static' }, ' .pe-header-panel__main-container': mixin.fit(), ' .pe-header-panel__drop-shadow': { position: 'static', width: '100%' } } } }]; };
const createStyles = (config) => { return [{ '.pe-notification__holder': [ mixin.fit(), flex.layoutCenterCenter, { 'z-index': common.z_notification } ], '.pe-notification': [ flex.layoutCenter, { position: 'relative', padding: '0 ' + config.side_padding + 'px', margin: '0 auto', 'border-radius': config.border_radius + 'px', ' .pe-notification__content': { width: '100%' }, ' .pe-notification__title': { 'padding': config.title_single_padding_v + 'px ' + config.title_padding_h + 'px', 'font-size': config.font_size + 'px', 'line-height': config.line_height + 'px' }, ' .pe-notification__action': { ' .pe-button': { margin: 0 } }, '&.pe-notification--horizontal': { ' .pe-notification__content': flex.layoutHorizontal, ' .pe-notification__title': flex.flex(), ' .pe-notification__title--multi-line': { 'padding-top': config.title_multi_padding_v + 'px', 'padding-bottom': config.title_multi_padding_v + 'px' }, ' .pe-notification__action': flex.layoutCenter }, '&.pe-notification--vertical': { ' .pe-notification__content': flex.layoutVertical, ' .pe-notification__title': { 'padding-bottom': '4px' }, ' .pe-notification__title--multi-line': { 'padding-top': config.title_multi_padding_v + 'px' }, ' .pe-notification__action': flex.layoutEndJustified } } ], '.pe-notification--notification': { width: config.width + 'px', 'min-height': config.minHeight + 'px' } }]; };