本文整理匯總了TypeScript中@library/headers/titleBarStyles.titleBarVariables函數的典型用法代碼示例。如果您正苦於以下問題:TypeScript titleBarVariables函數的具體用法?TypeScript titleBarVariables怎麽用?TypeScript titleBarVariables使用的例子?那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了titleBarVariables函數的8個代碼示例,這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚,您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: useThemeCache
export const compactSearchVariables = useThemeCache(() => {
const makeVars = variableFactory("compactSearch");
const titleBarVars = titleBarVariables();
const globalVars = globalVariables();
const baseColor = titleBarVars.colors.bg.darken(0.05);
const colors = makeVars("colors", {
bg: baseColor.fade(0.8),
fg: titleBarVars.colors.fg,
placeholder: globalVars.mainColors.bg,
active: {
bg: baseColor,
},
});
return { colors };
});
示例2: useThemeCache
export const meBoxClasses = useThemeCache(() => {
const globalVars = globalVariables();
const formVars = formElementsVariables();
const titleBarVars = titleBarVariables();
const debug = debugHelper("meBox");
const mediaQueries = layoutVariables().mediaQueries();
const flex = flexHelper();
const style = styleFactory("meBox");
const root = style(
{
...debug.name(),
display: "flex",
alignItems: "center",
height: unit(titleBarVars.sizing.height),
},
mediaQueries.oneColumnDown({
height: unit(titleBarVars.sizing.mobile.height),
}),
);
const buttonContent = style("buttonContent", {
...flex.middle(),
width: unit(formVars.sizing.height),
maxWidth: unit(formVars.sizing.height),
flexBasis: unit(formVars.sizing.height),
height: unit(titleBarVars.meBox.sizing.buttonContents),
});
const rootFlexClass = (count: number) => {
return style("footFlexClass", {
flexBasis: unit(count * formElementsVariables().sizing.height),
});
};
return {
root,
buttonContent,
rootFlexClass,
};
});
示例3: useThemeCache
export const mobileDropDownVariables = useThemeCache(() => {
const globalVars = globalVariables();
const titleBarVars = titleBarVariables();
const mixBgAndFg = globalVars.mixBgAndFg;
const vars = variableFactory("mobileDropDown");
const title = vars("title", {
letterSpacing: -0.26,
maxWidth: calc(`100% - ${px(titleBarVars.endElements.flexBasis * 2)}`),
});
const chevron = vars("chevron", {
width: 8,
height: 8,
color: mixBgAndFg(0.7),
});
const header = vars("header", {
minHeight: titleBarVars.sizing.height,
});
const padding = vars("padding", {
horizontal: 2,
});
const side = vars("side", {
width: globalVars.icon.sizes.default + padding.horizontal,
});
return {
title,
chevron,
header,
padding,
side,
};
});
示例4: titleBarNavClasses
export default function titleBarNavClasses() {
const globalVars = globalVariables();
const titleBarVars = titleBarVariables();
const vars = titleBarNavigationVariables();
const mediaQueries = layoutVariables().mediaQueries();
const flex = flexHelper();
const style = styleFactory("titleBarNav");
const root = style(
{
...flex.middleLeft(),
position: "relative",
height: unit(titleBarVars.sizing.height),
},
mediaQueries.oneColumnDown({
height: unit(titleBarVars.sizing.mobile.height),
}),
);
const navigation = style("navigation", {});
const items = style(
"items",
{
...flex.middleLeft(),
height: unit(titleBarVars.sizing.height),
...paddings(vars.padding),
},
mediaQueries.oneColumnDown({
height: px(titleBarVars.sizing.mobile.height),
justifyContent: "center",
width: percent(100),
}),
);
const link = style("link", {
...userSelect(),
color: colorOut(titleBarVars.colors.fg),
whiteSpace: "nowrap",
lineHeight: globalVars.lineHeights.condensed,
display: "flex",
alignItems: "center",
justifyContent: "center",
height: unit(vars.item.size),
textDecoration: "none",
$nest: {
"&.focus-visible": {
backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
},
"&:focus": {
backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
},
"&:hover": {
backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
},
},
});
const linkActive = style("linkActive", {
$nest: {
"&:after": {
...absolutePosition.topLeft(
`calc(50% - ${unit(vars.linkActive.height + vars.linkActive.bottomSpace)})`,
),
content: quote(""),
height: unit(vars.linkActive.height),
marginLeft: unit(negative(vars.linkActive.offset)),
width: calc(`100% + ${unit(vars.linkActive.offset * 2)}`),
backgroundColor: colorOut(vars.linkActive.bg),
transform: `translateY(${unit(titleBarVars.sizing.height / 2)})`,
},
},
});
const linkContent = style("linkContent", {
position: "relative",
});
const firstItem = style("lastItem", {
zIndex: 2,
});
const lastItem = style("lastItem", {
zIndex: 2,
});
return {
root,
navigation,
items,
link,
linkActive,
linkContent,
lastItem,
firstItem,
};
}
示例5: useThemeCache
export const panelLayoutClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = layoutVariables();
const mediaQueries = vars.mediaQueries();
const style = styleFactory("panelLayout");
const classesPanelArea = panelAreaClasses();
const classesPanelList = panelListClasses();
const titleBarVars = titleBarVariables();
const main = style("main", {
minHeight: viewHeight(20),
width: percent(100),
});
const root = style({
...margins(vars.panelLayoutSpacing.margin),
width: percent(100),
$nest: {
[`&.noBreadcrumbs > .${main}`]: {
paddingTop: unit(globalVars.gutter.size),
...mediaQueries.oneColumnDown({
paddingTop: 0,
}),
},
"&.isOneCol": {
width: unit(vars.middleColumn.paddedWidth),
maxWidth: percent(100),
margin: "auto",
...mediaQueries.oneColumnDown({
width: percent(100),
}),
},
"&.hasTopPadding": {
paddingTop: unit(vars.panelLayoutSpacing.extraPadding.top),
},
"&.hasTopPadding.noBreadcrumbs": {
paddingTop: unit(vars.panelLayoutSpacing.extraPadding.noBreadcrumbs.top),
},
"&.hasLargePadding": {
...paddings(vars.panelLayoutSpacing.largePadding),
},
},
});
const content = style("content", {
display: "flex",
flexGrow: 1,
width: percent(100),
justifyContent: "space-between",
});
const panel = style("panel", {
width: percent(100),
$nest: {
[`& > .${classesPanelArea.root}:first-child .${classesPanelList.root}`]: {
marginTop: unit(
(globalVars.fonts.size.title * globalVars.lineHeights.condensed) / 2 -
globalVariables().fonts.size.medium / 2,
),
},
},
});
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),
//.........這裏部分代碼省略.........
示例6: useThemeCache
export const searchBarClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = searchBarVariables();
const titleBarVars = titleBarVariables();
const classesButton = buttonClasses();
const formElementVars = formElementsVariables();
const mediaQueries = layoutVariables().mediaQueries();
const style = styleFactory("searchBar");
const root = style(
{
cursor: "pointer",
$nest: {
"& .searchBar__placeholder": {
color: colorOut(globalVars.mixBgAndFg(0.5)),
margin: "auto",
},
"& .suggestedTextInput-valueContainer": {
$nest: {
".inputBlock-inputText": {
height: "auto",
},
},
},
"& .searchBar-submitButton": {
position: "relative",
borderTopLeftRadius: important(0),
borderBottomLeftRadius: important(0),
marginLeft: unit(-globalVars.border.width * 2),
minWidth: unit(vars.search.minWidth),
flexBasis: unit(vars.search.minWidth),
minHeight: unit(vars.sizing.height),
$nest: {
"&:hover, &:focus": {
zIndex: 1,
},
},
},
"& .searchBar__control": {
display: "flex",
flex: 1,
border: 0,
backgroundColor: "transparent",
height: percent(100),
maxWidth: calc(`100% - ${unit(vars.sizing.height)}`),
$nest: {
"&.searchBar__control--is-focused": {
boxShadow: "none",
$nest: {
"&.inputText": {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
...borders(buttonVariables().standard.borders),
},
},
},
},
},
"& .searchBar__value-container": {
overflow: "auto",
$nest: {
"& > div": {
width: percent(100),
},
},
},
"& .searchBar__indicators": {
display: "none",
},
"& .searchBar__input": {
color: colorOut(globalVars.mainColors.fg),
width: percent(100),
display: important("block"),
$nest: {
input: {
width: important(percent(100).toString()),
lineHeight: globalVars.lineHeights.base,
},
},
},
"& .searchBar__menu-list": {
maxHeight: calc(`100vh - ${unit(titleBarVars.sizing.height)}`),
},
},
},
mediaQueries.oneColumnDown({
$nest: {
"& .searchBar-submitButton": {
minWidth: 0,
},
},
}),
);
const results = style("results", {
backgroundColor: colorOut(vars.results.bg),
color: colorOut(vars.results.fg),
$nest: {
".suggestedTextInput__placeholder": {
//.........這裏部分代碼省略.........
示例7: 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(),
},
},
});
//.........這裏部分代碼省略.........
示例8: 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,
};
//.........這裏部分代碼省略.........