How to use the belter/src.perc function in belter
To help you get started, we’ve selected a few belter examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
paypal / paypal-checkout-components / src / ui / buttons / styles / responsive.js View on Github 
}
.${ CLASS.BUTTON } {
height: ${ buttonHeight }px;
min-height: ${ height || style.minHeight }px;
max-height: ${ height || style.maxHeight }px;
}
.${ CLASS.BUTTON } .${ CLASS.SPINNER } {
height: ${ perc(buttonHeight, 50) }px;
width: ${ perc(buttonHeight, 50) }px;
}
.${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 35) + 5 }px;
max-height: ${ perc(buttonHeight, 60) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.CARD }]:not([${ ATTRIBUTE.PAYMENT_METHOD_ID }]) .${ CLASS.BUTTON_LABEL } {
height: 100%;
min-height: 100%;
max-height: 100%;
}
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }] .${ CLASS.BUTTON_LABEL },
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 50) + 5 }px;
max-height: ${ perc(buttonHeight, 70) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.PILL } {
border-radius: ${ Math.ceil(buttonHeight / 2) }px;
}
.${ CLASS.BUTTON }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL } {
margin-bottom: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN) }px;
}
.${ CLASS.BUTTON }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL }:last-of-type {
margin-bottom: 0;
}
.${ CLASS.TAGLINE } .${ CLASS.TEXT } {
height: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.TAGLINE) }px;
line-height: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.TAGLINE) }px;
}
.${ CLASS.CARD } {
display: inline-block;
}
.${ CLASS.BUTTON } .${ CLASS.CARD } {
width: ${ (90 / cardNumber).toFixed(2) }%;
max-width: ${ perc(buttonHeight, 160) }px;
margin-top: 0;
margin-left: ${ (5 / cardNumber).toFixed(2) }%;
margin-right: ${ (5 / cardNumber).toFixed(2) }%;
}
.${ CLASS.BUTTON } .${ CLASS.CARD } img {}
.${ CLASS.BUTTON } .${ CLASS.SPINNER } {
height: ${ perc(buttonHeight, 50) }px;
width: ${ perc(buttonHeight, 50) }px;
}
.${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 35) + 5 }px;
max-height: ${ perc(buttonHeight, 60) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }] .${ CLASS.BUTTON_LABEL },
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 50) + 5 }px;
max-height: ${ perc(buttonHeight, 70) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.RECT } {
border-radius: 4px;
}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.PILL } {
border-radius: ${ Math.ceil(buttonHeight / 2) }px;
}
.${ CLASS.BUTTON }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL } {
margin-bottom: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN) }px;
}}
.${ CLASS.BUTTON } {
height: ${ buttonHeight }px;
min-height: ${ height || style.minHeight }px;
max-height: ${ height || style.maxHeight }px;
}
.${ CLASS.BUTTON } .${ CLASS.SPINNER } {
height: ${ perc(buttonHeight, 50) }px;
width: ${ perc(buttonHeight, 50) }px;
}
.${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 35) + 5 }px;
max-height: ${ perc(buttonHeight, 60) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }] .${ CLASS.BUTTON_LABEL },
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 50) + 5 }px;
max-height: ${ perc(buttonHeight, 70) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.RECT } {
border-radius: 4px;
}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.PILL } {
border-radius: ${ Math.ceil(buttonHeight / 2) }px;.${ CLASS.BUTTON } .${ CLASS.SPINNER } {
height: ${ perc(buttonHeight, 50) }px;
width: ${ perc(buttonHeight, 50) }px;
}
.${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 35) + 5 }px;
max-height: ${ perc(buttonHeight, 60) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }] .${ CLASS.BUTTON_LABEL },
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 50) + 5 }px;
max-height: ${ perc(buttonHeight, 70) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.RECT } {
border-radius: 4px;
}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.PILL } {
border-radius: ${ Math.ceil(buttonHeight / 2) }px;
}
.${ CLASS.BUTTON }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL } {
margin-bottom: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN) }px;
}
.${ CLASS.BUTTON }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL }:last-of-type {
margin-bottom: 0;.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 50) + 5 }px;
max-height: ${ perc(buttonHeight, 70) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.RECT } {
border-radius: 4px;
}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.PILL } {
border-radius: ${ Math.ceil(buttonHeight / 2) }px;
}
.${ CLASS.BUTTON }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL } {
margin-bottom: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN) }px;
}
.${ CLASS.BUTTON }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL }:last-of-type {
margin-bottom: 0;
}
.${ CLASS.TAGLINE } .${ CLASS.TEXT } {
height: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.TAGLINE) }px;
line-height: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.TAGLINE) }px;
}
.${ CLASS.CARD } {
display: inline-block;
}
.${ CLASS.BUTTON } .${ CLASS.CARD } {@media only screen and (min-width: ${ style.minWidth }px) {
.${ CLASS.CONTAINER } {
min-width: ${ style.minWidth }px;
max-width: ${ style.maxWidth }px;
font-size: ${ max(perc(buttonHeight, 32), 10) }px;
}
.${ CLASS.BUTTON } {
height: ${ buttonHeight }px;
min-height: ${ height || style.minHeight }px;
max-height: ${ height || style.maxHeight }px;
}
.${ CLASS.BUTTON } .${ CLASS.SPINNER } {
height: ${ perc(buttonHeight, 50) }px;
width: ${ perc(buttonHeight, 50) }px;
}
.${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 35) + 5 }px;
max-height: ${ perc(buttonHeight, 60) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }] .${ CLASS.BUTTON_LABEL },
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 50) + 5 }px;
max-height: ${ perc(buttonHeight, 70) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}return Object.keys(BUTTON_SIZE_STYLE).map(size => {
const style = BUTTON_SIZE_STYLE[size];
const buttonHeight = height || style.defaultHeight;
const minDualWidth = Math.round(buttonHeight * DUAL_BUTTON_MIN_RATIO * 2);
return `
@media only screen and (min-width: ${ style.minWidth }px) {
.${ CLASS.CONTAINER } {
min-width: ${ style.minWidth }px;
max-width: ${ style.maxWidth }px;
font-size: ${ max(perc(buttonHeight, 32), 10) }px;
}
.${ CLASS.BUTTON } {
height: ${ buttonHeight }px;
min-height: ${ height || style.minHeight }px;
max-height: ${ height || style.maxHeight }px;
}
.${ CLASS.BUTTON } .${ CLASS.SPINNER } {
height: ${ perc(buttonHeight, 50) }px;
width: ${ perc(buttonHeight, 50) }px;
}
.${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 35) + 5 }px;
max-height: ${ perc(buttonHeight, 60) }px;font-size: ${ max(perc(buttonHeight, 32), 10) }px;
}
.${ CLASS.BUTTON } {
height: ${ buttonHeight }px;
min-height: ${ height || style.minHeight }px;
max-height: ${ height || style.maxHeight }px;
}
.${ CLASS.BUTTON } .${ CLASS.SPINNER } {
height: ${ perc(buttonHeight, 50) }px;
width: ${ perc(buttonHeight, 50) }px;
}
.${ CLASS.BUTTON } > .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 35) + 5 }px;
max-height: ${ perc(buttonHeight, 60) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.CARD }]:not([${ ATTRIBUTE.PAYMENT_METHOD_ID }]) .${ CLASS.BUTTON_LABEL } {
height: 100%;
min-height: 100%;
max-height: 100%;
}
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }] .${ CLASS.BUTTON_LABEL },
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 50) + 5 }px;
max-height: ${ perc(buttonHeight, 70) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}height: ${ perc(buttonHeight, 35) + 5 }px;
max-height: ${ perc(buttonHeight, 60) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.CARD }]:not([${ ATTRIBUTE.PAYMENT_METHOD_ID }]) .${ CLASS.BUTTON_LABEL } {
height: 100%;
min-height: 100%;
max-height: 100%;
}
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.EPS }] .${ CLASS.BUTTON_LABEL },
.${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.MYBANK }] .${ CLASS.BUTTON_LABEL } {
height: ${ perc(buttonHeight, 50) + 5 }px;
max-height: ${ perc(buttonHeight, 70) }px;
min-height: ${ perc(buttonHeight, 40) }px;
}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.RECT } {
border-radius: 4px;
}
.${ CLASS.BUTTON }.${ CLASS.SHAPE }-${ BUTTON_SHAPE.PILL } {
border-radius: ${ Math.ceil(buttonHeight / 2) }px;
}
.${ CLASS.BUTTON }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL } {
margin-bottom: ${ perc(buttonHeight, BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN) }px;
}
.${ CLASS.BUTTON }.${ CLASS.LAYOUT }-${ BUTTON_LAYOUT.VERTICAL }:last-of-type {
margin-bottom: 0;
Popular belter functions
- belter/src.base64encode
- belter/src.destroyElement
- belter/src.extend
- belter/src.extendUrl
- belter/src.getElement
- belter/src.hideElement
- belter/src.inlineMemoize
- belter/src.isBrowser
- belter/src.isRegex
- belter/src.memoize
- belter/src.objFilter
- belter/src.once
- belter/src.parseQuery
- belter/src.perc
- belter/src.request
- belter/src.safeInterval
- belter/src.stringifyError
- belter/src.toCSS
- belter/src.uniqueID
- belter/src.values