TypeScript typestyle.cssRule函數代碼示例

export const getTypeStyle = () => {
    const marginPaddingComponents = `html, body, div, object,
    iframe, h1, h2, h3, h4, h5, h6,
    p, blockquote, ol, ul, li, form,
    legend, label, table, header,
    footer, nav, section, figure`;
    cssRule(marginPaddingComponents, {
        margin: 0,
        padding: 0,
    });

    cssRule('.ant-btn, button', {
        cursor: 'default',
    })
    return getStyles();
};

export const bodyCSS = useThemeCache(() => {
    const globalVars = globalVariables();
    cssRule("html, body", {
        backgroundColor: colorOut(globalVars.body.backgroundImage.color),
        ...fonts({
            size: globalVars.fonts.size.medium,
            family: globalVars.fonts.families.body,
            color: globalVars.mainColors.fg,
        }),
        wordBreak: "break-word",
        overscrollBehavior: "none", // For IE -> https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
    });

    cssRule("*", {
        // For Mobile Safari -> https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
        "-webkit-overflow-scrolling": "touch",
    });

    cssRule("h1, h2, h3, h4, h5, h6", {
        display: "block",
        lineHeight: globalVars.lineHeights.condensed,
        ...margins({
            all: 0,
        }),
        ...paddings({
            all: 0,
        }),
    });

    cssRule("p", {
        ...margins({
            all: 0,
        }),
        ...paddings({
            all: 0,
        }),
    });

    cssRule(".page", {
        display: "flex",
        overflow: "visible",
        flexDirection: "column",
        width: percent(100),
        minHeight: viewHeight(100),
        position: "relative",
        zIndex: 0,
    });

    cssRule(".page-minHeight", {
        flexGrow: 1,
        display: "flex",
        flexDirection: "column",
    });
});

import {style, cssRule} from "typestyle";
import {rgba} from "typestyle/lib/csx";

const fontPath = require("./../../common/assets/fonts/roboto_regular_macroman/Roboto-Regular-webfont.woff");
const cssP: string = "url('" + fontPath + "')";

cssRule('@font-face', {
    fontFamily: 'robotoregular',
    src: cssP,
    fontWeight: "normal",
    fontStyle: "normal"
});

cssRule("body", {
    width: "100%",
    height: "100%",
    overflow: "hidden",
    fontFamily: "robotoregular"
});

cssRule("html, body", {
    border: 0,
    lineHeight: "1.5",
    margin: 0,
    padding: 0
});

cssRule("input:-webkit-autofill", {
    color: "#fff !important",
    transition: "all 0.2s",
    transitionDelay: "9999999s",

import { important, percent, px, viewHeight, viewWidth } from 'csx';
import { cssRule, style } from 'typestyle';

export const backgroundColor = '#444';
export const textColor = '#eee';

cssRule('h1, h2, h3, h4, h5, h6, p, label', {
  userSelect: 'none'
});

cssRule('.modal-header > h1, h2, h3, h4, h5, h6', {
  marginTop: px(10)
});

cssRule('html, body', {
  height: percent(100)
});

cssRule('span, p, label', {
  userSelect: 'none',
  cursor: 'default'
});

cssRule('#content', {
  height: viewHeight(100),
  width: viewWidth(100)
});

cssRule('.panel-body', {
  padding: px(10)
});

//.........這裏部分代碼省略.........
    const top = style("top", {
        width: percent(100),
        marginBottom: unit(globalVars.gutter.half),
    });

    const container = style("container", {
        display: "flex",
        flexWrap: "nowrap",
        alignItems: "flex-start",
        justifyContent: "space-between",
    });

    const fullWidth = style("fullWidth", {
        position: "relative",
        padding: 0,
    });

    const leftColumn = style("leftColumn", {
        position: "relative",
        width: unit(vars.panel.paddedWidth),
        flexBasis: unit(vars.panel.paddedWidth),
        minWidth: unit(vars.panel.paddedWidth),
    });

    const rightColumn = style("rightColumn", {
        position: "relative",
        width: unit(vars.panel.paddedWidth),
        flexBasis: unit(vars.panel.paddedWidth),
        minWidth: unit(vars.panel.paddedWidth),
        overflow: "initial",
    });

    const middleColumn = style("middleColumn", {
        justifyContent: "space-between",
        flexGrow: 1,
        width: percent(100),
        maxWidth: percent(100),
        ...mediaQueries.oneColumnDown(paddings({ left: important(0), right: important(0) })),
    });

    const middleColumnMaxWidth = style("middleColumnMaxWidth", {
        $nest: {
            "&.hasAdjacentPanel": {
                flexBasis: calc(`100% - ${unit(vars.panel.paddedWidth)}`),
                maxWidth: calc(`100% - ${unit(vars.panel.paddedWidth)}`),
                ...mediaQueries.oneColumnDown({
                    flexBasis: percent(100),
                    maxWidth: percent(100),
                }),
            },
            "&.hasTwoAdjacentPanels": {
                flexBasis: calc(`100% - ${unit(vars.panel.paddedWidth * 2)}`),
                maxWidth: calc(`100% - ${unit(vars.panel.paddedWidth * 2)}`),
                ...mediaQueries.oneColumnDown({
                    flexBasis: percent(100),
                    maxWidth: percent(100),
                }),
            },
        },
    });

    const breadcrumbs = style("breadcrumbs", {});

    const isSticky = style(
        "isSticky",
        {
            ...sticky(),
            top: titleBarVars.sizing.height * 2,
            height: percent(100),
            overflow: "auto",
        },
        mediaQueries.oneColumnDown({
            position: "relative",
            top: "auto",
            left: "auto",
            bottom: "auto",
        }),
    );

    // To remove when we have overlay styles converted
    cssRule(`.overlay .${root}.noBreadcrumbs .${main}`, {
        paddingTop: 0,
    });

    return {
        root,
        content,
        top,
        main,
        container,
        fullWidth,
        leftColumn,
        rightColumn,
        middleColumn,
        middleColumnMaxWidth,
        panel,
        isSticky,
        breadcrumbs,
    };
});

const browser = require('detect-browser')

if (browser.name === 'ie') {
  const appElement : HTMLElement = document.getElementById('app') as HTMLElement
  appElement.innerHTML = '<h2>You appear to be using Internet Explorer<br/>It would be a good time to examine the life choices that have led you to this moment</h2>'
  appElement.style.cssText = 'height: 100%; text-align: center; padding-top: 50vh; background-color: black;'
  appElement.id = 'nope'
}

normalize()
setupPage('#app')

const popArtShadow = {textShadow: '5px 5px 0 #000, 2px 0 0 black,  0 2px 0 black, 0 -2px 0 black, -2px 0 0 black', color: '#fff'}

cssRule('body', {fontFamily: '"PT Sans", sans-serif', background: `#bb270f url(${bgImage})`, backgroundSize: 'cover', color: '#fff', fontSize: '20px'})
cssRule('h1', {fontFamily: 'Bangers, sans-serif', transform: 'rotate(-4deg)', letterSpacing: '5px', margin: '150px 0 20px 0', textAlign: 'center', fontSize: '4em'}, popArtShadow)
cssRule('h2', {fontFamily: 'Bangers, sans-serif', transform: 'rotate(0deg)', letterSpacing: '2px', margin: '30px 0 20px 0', textAlign: 'center', fontSize: '2em'}, popArtShadow)
cssRule('a', {color: '#fff'})

const main : Component = onionify(App)

const drivers : any = {
    DOM: makeDOMDriver('#app'),
    HTTP: makeHTTPDriver()
}
export const driverNames : string[] = Object.keys(drivers)

// Cycle apps (main functions) are allowed to return any number of sinks streams
// This sets defaults for all drivers that are not used by the app
const defaultSinks : (s : Sources) => RootSinks = sources => ({

import { cssRule } from 'typestyle';

cssRule('.input-group', {
  $nest: {
    'input.form-control': {
      borderColor: '#222529'
    },
    '.input-group-addon': {
      backgroundColor: '#222529',
      borderColor: '#222529'
    }
  }
});

cssRule('.has-error .input-group-addon', {
  borderColor: '#ee5f5b'
});

cssRule('.help-block', {
  color: '#888'
});

cssRule('.btn.disabled, .btn[disabled], fieldset[disabled] .btn', {
  opacity: 0.55
});