本文整理汇总了TypeScript中typestyle.cssRule函数的典型用法代码示例。如果您正苦于以下问题:TypeScript cssRule函数的具体用法?TypeScript cssRule怎么用?TypeScript cssRule使用的例子?那么, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了cssRule函数的7个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: 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();
};
示例2: useThemeCache
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",
});
});
示例3: require
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",
示例4: cssRule
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)
});
示例5: useThemeCache
//.........这里部分代码省略.........
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,
};
});
示例6: require
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 => ({
示例7: cssRule
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
});