本文整理汇总了TypeScript中@library/styles/shadowHelpers.shadowHelper函数的典型用法代码示例。如果您正苦于以下问题:TypeScript shadowHelper函数的具体用法?TypeScript shadowHelper怎么用?TypeScript shadowHelper使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了shadowHelper函数的7个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: useThemeCache
export const richEditorFlyoutClasses = useThemeCache(() => {
const vars = richEditorVariables();
const style = styleFactory("richEditorFlyout");
const shadows = shadowHelper();
const globalVars = globalVariables();
const root = style({
...shadows.dropDown(),
position: "absolute",
left: 0,
width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
zIndex: 6,
overflow: "hidden",
backgroundColor: colorOut(vars.colors.bg),
...borders(),
$nest: {
"&& .ReactVirtualized__Grid": {
width: important(unit(vars.richEditorWidth) as string),
},
},
});
const header = style("header", {
position: "relative",
borderBottom: singleBorder(),
...paddings(vars.emojiHeader.padding),
});
const title = style("title", {
display: "flex",
alignItems: "center",
...longWordEllipsis(),
margin: 0,
maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
minHeight: vars.menuButton.size - vars.emojiBody.padding.horizontal,
fontSize: percent(100),
lineHeight: "inherit",
color: colorOut(globalVars.mainColors.fg),
$nest: {
"&:focus": {
outline: 0,
},
},
});
const body = style("body", {
...paddings(vars.emojiBody.padding),
width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
});
const footer = style("footer", {
borderTop: singleBorder(),
});
return { root, header, body, footer, title };
});
示例2: useThemeCache
export const subcommunityTileClasses = useThemeCache(() => {
const vars = subcommunityTileVariables();
const globalVars = globalVariables();
const debug = debugHelper("subcommunityTile");
const shadow = shadowHelper();
const root = style({
display: "flex",
flexDirection: "column",
alignItems: "stretch",
width: percent(100),
padding: unit(vars.spacing.default),
...userSelect(),
flexGrow: 1,
...debug.name(),
});
const link = style({
...defaultTransition("box-shadow", "border"),
...paddings(vars.link.padding),
display: "block",
position: "relative",
cursor: "pointer",
flexGrow: 1,
color: vars.link.fg.toString(),
backgroundColor: colorOut(vars.link.bg),
borderRadius: unit(2),
minHeight: unit(vars.link.minHeight),
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: vars.link.fg.fade(0.3),
}),
shadow.embed(),
),
$nest: {
"&:hover": {
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: vars.link.fg.fade(0.5),
}),
shadow.embedHover(),
),
},
},
...debug.name("link"),
});
const main = style({
position: "relative",
...debug.name("main"),
});
const frame = style({
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
height: unit(vars.frame.height),
width: unit(vars.frame.width),
marginTop: "auto",
marginRight: "auto",
marginLeft: "auto",
marginBottom: unit(vars.frame.bottomMargin),
...debug.name("iconFrame"),
});
const icon = style({
display: "block",
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
margin: "auto",
height: "auto",
maxWidth: percent(100),
maxHeight: percent(100),
...debug.name("icon"),
});
const title = style({
fontSize: unit(vars.title.fontSize),
lineHeight: vars.title.lineHeight,
textAlign: "center",
marginBottom: unit(vars.title.marginBottom),
...debug.name("title"),
});
const description = style({
position: "relative",
marginTop: unit(vars.description.marginTop),
fontSize: unit(vars.description.fontSize),
lineHeight: vars.description.lineHeight,
textAlign: "center",
...debug.name("description"),
});
const fallBackIcon = style({
//.........这里部分代码省略.........
示例3: useThemeCache
export const dropDownClasses = useThemeCache(() => {
const vars = dropDownVariables();
const globalVars = globalVariables();
const style = styleFactory("dropDown");
const shadows = shadowHelper();
const mediaQueries = layoutVariables().mediaQueries();
const root = style({
position: "relative",
});
const contents = style("contents", {
position: "absolute",
minWidth: unit(vars.sizing.width),
backgroundColor: colorOut(vars.contents.bg),
color: colorOut(vars.contents.fg),
overflow: "auto",
...shadowOrBorderBasedOnLightness(vars.contents.bg, borders({}), shadows.dropDown()),
...borders(vars.contents.border),
zIndex: 3,
$nest: {
"&.isParentWidth": {
minWidth: "initial",
},
"&.isOwnWidth": {
width: "initial",
},
"&.isRightAligned": {
right: 0,
top: 0,
},
"& .frame": {
boxShadow: "none",
},
"&.noMinWidth": {
minWidth: 0,
},
"&.hasVerticalPadding": {
...paddings({
vertical: 12,
horizontal: important(0),
}),
},
"&:empty": {
display: "none",
},
},
});
const asModal = style("asModal", {
$nest: {
"&.hasVerticalPadding": paddings({
vertical: 12,
}),
},
});
const likeDropDownContent = style("likeDropDownContent", {
...shadows.dropDown(),
backgroundColor: colorOut(globalVars.mainColors.bg),
...borders(),
});
const items = style("items", {
fontSize: unit(globalVars.fonts.size.medium),
});
const metaItems = style("metaItems", {
$nest: {
"&&": {
display: "block",
},
},
...paddings(vars.metas.padding),
});
const metaItem = style("metaItem", {
$nest: {
"& + &": {
paddingTop: unit(vars.item.padding.top),
},
},
...fonts(vars.metas.font),
});
// wrapping element
const item = style("item", {
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
width: percent(100),
color: "inherit",
...userSelect("none"),
textAlign: "left",
lineHeight: globalVars.lineHeights.condensed,
});
const section = style("section", {
display: "block",
});
//.........这里部分代码省略.........
示例4: useThemeCache
export const modalClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = modalVariables();
const style = styleFactory("modal");
const mediaQueries = layoutVariables().mediaQueries();
const shadows = shadowHelper();
const titleBarVars = titleBarVariables();
const overlay = style("overlay", {
position: "fixed",
// Viewport units are useful here because
// we're actually fine this being taller than the initially visible viewport.
height: viewHeight(100),
width: percent(100),
top: 0,
left: 0,
right: 0,
bottom: 0,
background: colorOut(vars.colors.overlayBg),
zIndex: 10,
});
const root = style({
display: "flex",
flexDirection: "column",
width: percent(100),
maxWidth: percent(100),
maxHeight: viewHeight(80),
zIndex: 1,
backgroundColor: colorOut(vars.colors.bg),
position: "fixed",
top: percent(50),
left: percent(50),
bottom: "initial",
overflow: "hidden",
borderRadius: unit(vars.border.radius),
// NOTE: This transform can cause issues if anything inside of us needs fixed positioning.
// See http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
// See also https://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201/#introduction
// This is why fullscreen unsets the transforms.
transform: translate(`-50%`, `-50%`),
...margins({ all: "auto" }),
$nest: {
"&&.isFullScreen": {
width: percent(100),
height: percent(100),
maxHeight: percent(100),
maxWidth: percent(100),
borderRadius: 0,
border: "none",
top: 0,
bottom: 0,
transform: "none",
left: 0,
right: 0,
},
"&.isLarge": {
width: unit(vars.sizing.large),
maxWidth: calc(`100% - ${unit(vars.spacing.horizontalMargin * 2)}`),
},
"&.isMedium": {
width: unit(vars.sizing.medium),
maxWidth: calc(`100% - ${unit(vars.spacing.horizontalMargin * 2)}`),
},
"&.isSmall": {
width: unit(vars.sizing.small),
maxWidth: calc(`100% - ${unit(vars.spacing.horizontalMargin * 2)}`),
},
"&&&.isSidePanel": {
left: unit(vars.dropDown.padding),
width: calc(`100% - ${unit(vars.dropDown.padding)}`),
display: "flex",
flexDirection: "column",
top: 0,
bottom: 0,
right: 0,
transform: "none",
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
"&&.isDropDown": {
top: 0,
left: 0,
right: 0,
bottom: globalVars.gutter.size,
width: percent(100),
marginBottom: "auto",
transform: "none",
maxHeight: percent(100),
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
"&.isShadowed": {
...shadows.dropDown(),
...borders(),
},
},
});
//.........这里部分代码省略.........
示例5: useThemeCache
//.........这里部分代码省略.........
...paddings({
top: vars.codeInline.paddingVertical,
bottom: vars.codeInline.paddingVertical,
left: vars.codeInline.paddingHorizontal,
right: vars.codeInline.paddingHorizontal,
}),
background: colorOut(vars.codeInline.bg),
borderRadius: vars.codeInline.borderRadius,
// We CAN'T use display: `inline` & position: `relative` together.
// This causes the cursor to disappear in a contenteditable.
// @see https://bugs.chromium.org/p/chromium/issues/detail?id=724821
display: "inline",
position: "static",
},
"&& .codeBlock": {
display: "block",
wordWrap: "normal",
lineHeight: vars.codeBlock.lineHeight,
borderRadius: vars.codeBlock.borderRadius,
flexShrink: 0, // Needed so code blocks don't collapse in the editor.
whiteSpace: "pre",
...paddings({
top: vars.codeBlock.paddingVertical,
bottom: vars.codeBlock.paddingVertical,
left: vars.codeBlock.paddingHorizontal,
right: vars.codeBlock.paddingHorizontal,
}),
},
};
// Blockquotes & spoilers
// These are temporarily kludged here due to lack of time.
// They should be fully converted in the future but at the moment
// Only the bare minimum is convverted in order to make the colors work.
const spoilersAndQuotes: NestedCSSSelectors = {
[`& .spoiler,
& .button-spoiler,
& .spoiler-icon`]: {
background: colorOut(vars.blocks.bg),
color: colorOut(vars.blocks.fg),
},
"& .spoiler-icon": {
margin: 0,
},
"& .embedExternal-content": {
borderRadius: vars.embeds.borderRadius,
$nest: {
"&::after": {
borderRadius: vars.embeds.borderRadius,
},
},
},
"& .embedText-content": {
background: colorOut(vars.embeds.bg),
color: colorOut(vars.embeds.fg),
overflow: "hidden",
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: vars.embeds.fg.fade(0.3),
}),
shadowHelper().embed(),
),
},
[`& .embedText-title,
& .embedLink-source,
& .embedLink-excerpt`]: {
color: colorOut(vars.blocks.fg),
},
"& .metaStyle": {
opacity: 0.8,
},
"& .embedLoader-box": {
background: colorOut(vars.embeds.bg),
...borders({
color: vars.embeds.fg.fade(0.3),
}),
},
};
const root = style({
// These CAN'T be flexed. That breaks margin collapsing.
display: important("block"),
position: "relative",
width: percent(100),
wordBreak: "break-word",
lineHeight: globalVars.lineHeights.base,
fontSize: vars.fonts.size,
$nest: {
...headings,
...lists,
...paragraphSpacing,
...linkStyles,
...codeStyles,
...spoilersAndQuotes,
},
});
return { root };
});
示例6: useThemeCache
export const messagesClasses = useThemeCache(() => {
const vars = messagesVariables();
const globalVars = globalVariables();
const style = styleFactory("messages");
const titleBarVars = titleBarVariables();
const shadows = shadowHelper();
const mediaQueries = layoutVariables().mediaQueries();
// Fixed wrapper
const fixed = style("fixed", {
position: "fixed",
left: 0,
top: unit(titleBarVars.sizing.height - 8),
minHeight: unit(vars.sizing.minHeight),
width: percent(100),
maxWidth: viewWidth(100),
zIndex: 20,
});
const root = style(
{
width: percent(100),
},
margins({ horizontal: "auto" }),
);
const wrap = style(
"wrap",
{
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
minHeight: unit(vars.sizing.minHeight),
backgroundColor: colorOut(vars.colors.bg),
width: percent(100),
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: globalVars.mainColors.fg,
}),
shadows.embed(),
),
margin: "auto",
color: colorOut(vars.colors.fg),
...paddings({
...vars.spacing.padding,
right: vars.spacing.padding.horizontal / 2,
}),
},
mediaQueries.xs({
flexWrap: "wrap",
paddingLeft: unit(vars.spacing.padding.horizontal / 2),
}),
);
const message = style("message", {
...userSelect(),
...fonts(vars.text.font),
flex: 1,
});
const setWidth = style("setWidth", {
width: unit(vars.sizing.width),
maxWidth: percent(100),
});
const actionButton = style(
"actionButton",
{
...paddings(vars.actionButton.padding),
minHeight: unit(vars.actionButton.minHeight),
whiteSpace: "nowrap",
...fonts(vars.actionButton.font),
...allButtonStates({
noState: {
color: colorOut(vars.colors.fg),
},
allStates: {
color: colorOut(vars.colors.states.fg),
},
focusNotKeyboard: {
outline: 0,
},
}),
},
mediaQueries.xs({
padding: 0,
width: percent(100),
textAlign: "center",
}),
);
return {
root,
wrap,
actionButton,
message,
fixed,
setWidth,
};
//.........这里部分代码省略.........
示例7: useThemeCache
export const attachmentClasses = useThemeCache(() => {
const globalVars = globalVariables();
const formElementVars = formElementsVariables();
const vars = attachmentVariables();
const style = styleFactory("attachment");
const hoverFocusStates = {
"&:hover": {
boxShadow: `0 0 0 ${px(globalVars.embed.select.borderWidth)} ${globalVars.embed.focus.color.fade(
0.5,
)} inset`,
},
"&:focus": {
boxShadow: `0 0 0 ${px(
globalVars.embed.select.borderWidth,
)} ${globalVars.embed.focus.color.toString()} inset`,
},
};
const root = style({
display: "block",
position: "relative",
textDecoration: "none",
color: "inherit",
width: px(globalVars.embed.sizing.width),
maxWidth: percent(100),
margin: "auto",
overflow: "hidden",
...userSelect(),
...borders(vars.border),
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: vars.border.color,
}),
shadowHelper().embed(),
),
$nest: {
// These 2 can't be joined together or their pseudselectors don't get created properly.
"&.isLoading": {
cursor: "pointer",
$nest: hoverFocusStates,
},
"&.hasError": {
cursor: "pointer",
$nest: hoverFocusStates,
},
},
});
const link = style("link", {
...allLinkStates({
allStates: {
textDecoration: "none",
},
}),
});
const box = style("box", {
position: "relative",
display: "flex",
flexWrap: "nowrap",
alignItems: "flex-start",
justifyContent: "space-between",
padding: px(vars.padding.default),
width: percent(100),
...borders({
color: transparentColor,
width: 2,
radius: 0,
}),
});
const format = style("format", {
flexBasis: px(globalVars.icon.sizes.small + vars.padding.default),
height: unit(globalVars.icon.sizes.small),
paddingRight: unit(vars.padding.default),
flexShrink: 1,
});
const main = style("main", {
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "flex-start",
flexGrow: 1,
});
const title = style("title", {
fontSize: px(vars.text.fontSize),
color: vars.title.color.toString(),
fontWeight: globalVars.fonts.weights.semiBold,
lineHeight: px(globalVars.icon.sizes.small),
});
const metas = style("metas", {
marginBottom: px(0),
lineHeight: globalVars.lineHeights.condensed,
});
//.........这里部分代码省略.........