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'
}
}];
};