@clxx/rolling-notice/build/style.js

Scroll to notice

import { css } from "@emotion/core";
import { normalizeUnit } from "@clxx/base";
export const style = (height, fontSize, bubbleDuration) => {
    return {
        container: css({
            position: "relative",
            overflow: "hidden",
            boxSizing: "content-box",
            height
        }),
        withScroll: css({
            transition: `transform ${bubbleDuration}ms ease`,
            transform: `translateY(-${normalizeUnit(height)})`
        }),
        ul: css({
            listStyleType: "none",
            margin: 0,
            padding: 0,
            position: "absolute",
            left: 0,
            top: 0,
            fontSize: 0,
            width: "100%"
        }),
        li: css({
            margin: 0,
            padding: 0,
            width: "100%",
            height
        }),
        textItem: css({
            fontSize,
            display: "flex",
            alignItems: "center",
            height: "100%",
            margin: 0,
            padding: 0,
            whiteSpace: "nowrap"
        })
    };
};