TypeScript core.css函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@emotion/core.css函数的典型用法代码示例。如果您正苦于以下问题：TypeScript css函数的具体用法？TypeScript css怎么用？TypeScript css使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了css函数的5个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: css

import { css } from '@emotion/core';

export const AppStyles = {
  flex: css({
    flex: '1 1 auto',
  }),
  margin0: css({
    margin: 0,
  }),
};

开发者ID:thomasgazzoni，项目名称:gazblog，代码行数:10，代码来源:shared.ts

示例2: color

    body: "Cabin",
    header: "Arvo",
    sans: "Cabin",
    serif: "Arvo",
    mono: "PT Mono",
  },
  colors: {
    link: "coral",
    background: color("mediumseagreen").darken(0.06).string(),
    lightBackground: "snow",
    darkBackground: "darkslategray",
    lightText: "snow",
    darkText: color("darkslategray").darken(0.5).fade(0.15).string(),
    teal: "rgb(0, 190, 166)",
  },
  from(key: string, values: any[]): any {
    return values.map((x) => theme[key][x])
  },
}

theme.mediaQueries = theme.breakpoints.map((w) => 
  w === "52em" ? `@media print, (min-width: ${w})` : `@media(min-width: ${w})`
)
const mqBase = facepaint(theme.mediaQueries)
export const mq = (style: Interpolation) =>
  mqBase(themed(theme, style))

export const fullWidthClass = css(mq({ width: theme.fullWidth }))

export default theme

开发者ID:loafofpiecrust，项目名称:loafofpiecrust.github.io，代码行数:30，代码来源:theme.ts

示例3: css

export const globalStyles = css({
  html: {
    height: "100%",
    width: "100%",
  },
  body: {
    "@media screen": {
      backgroundColor: theme.colors.background,
      color: theme.colors.darkText,
    },
    fontFamily: theme.fonts.body,
  },
  "h1,h2,h3,h4,h5,header": {
    fontFamily: theme.fonts.header,
    "&:first-of-type": {
      marginTop: 0,
    },
    "&:only-child": {
      marginBottom: 0,
    }
  },
  "@page": {
    size: "auto",
    margin: 0,
  },
  "main a": {
    color: "inherit",
    textDecoration: "none",
    borderBottom: `2px dashed ${theme.colors.link}`,
    transition: `all ${theme.transitionTime}`,
    "&:hover, &:active": {
      // borderBottomColor: "transparent",
      color: theme.colors.link,
    },
  },
  blockquote: {
    borderLeftColor: theme.colors.link,
    borderLeftStyle: "solid",
    fontStyle: "italic",
    backgroundColor: "lavenderblush",
    color: color(theme.colors.darkText).fade(0.1).string(),
  },
  code: {
    border: `1px solid ${theme.colors.link}`,
    padding: 5,
    borderRadius: 3,
    ...contrastBackground("seashell"),
    "&.dark": contrastBackground(theme.colors.darkText),
  }
})

开发者ID:loafofpiecrust，项目名称:loafofpiecrust.github.io，代码行数:50，代码来源:global.ts

示例4: color

)

export const size = (value: number | string | any[]) => (
  { width: value, height: value }
)

export const contrastBackground = (value: string) => {
  const bg = color(value)
  const fg = bg.isDark() ? theme.colors.lightText : theme.colors.darkText
  return {
    backgroundColor: value,
    color: fg,
  }
}

export const fillParent = css(size("100%"))

export const flex = {
  box: css({ display: "flex" }),
  column: css({
    display: "flex",
    flexDirection: "column",
  }),
  row: css({
    display: "flex",
    flexDirection: "row",
  }),
  wrap: css({ flexWrap: "wrap" }),
  alignCenter: css({ alignItems: "center" }),
  alignEnd: css({ alignItems: "flex-end" }),
  justifyBetween: css({ justifyContent: "space-between" }),

开发者ID:loafofpiecrust，项目名称:loafofpiecrust.github.io，代码行数:31，代码来源:shortcuts.ts

示例5: css

export const GlobalStyle = css(`
  body, html {
    background: ${Colors.bodyBgColor};
  }
  .app-slideshow {
    background-color: inherit;
    .carousel .slide {
      background-color: inherit;
    }
    .carousel .slide .legend {
      background-color: inherit;
    }
    .carousel .control-dots {
      background-color: #f4f7f8;
    }
  }
  code {
    white-space: pre-wrap;
  }
  .link-plain {
    background: none;
  }
  .alignleft {
    float: left;
    margin: 0 15px 8px 0;
    box-shadow: 0 2px 4px 0 rgba(14,30,37,.12);
    border-radius: 8px;
  }
  .alignright {
    float: right;
    margin: 0 0 8px 15px;
    box-shadow: 0 2px 4px 0 rgba(14,30,37,.12);
    border-radius: 8px;
  }
  .headroom--unpinned {
    transition: none !important;
  }
  p small {
    font-size: .875em;
    font-weight: 400;
  }
  .header-title {
    color: #fff;
    font-family: Arvo;
    font-weight: bold;
    text-shadow:
      -3px -3px 0 #222,
      3px -3px 0 #222,
      -3px 3px 0 #222,
      3px 3px 0 #222,
      4px 4px 0 #fff,
      5px 5px 0 #fff,
      6px 6px 0 #fff,
      7px 7px 0 #fff;
    line-height: 0.8em;
    letter-spacing: 0.1em;
    transform: scaleY(0.7);
    margin: 4px 0 0 0;
    text-align: center;
  }
  .header-script {
    font-family: "Seaweed Script";
    color: #fff;
    text-align: center;
    font-size: 40px;
    position: relative;
    margin:0;
  }
  .header-script span {
    background-color: #222;
    padding: 0 0.3em;
  }
  .header-script:before {
    content:"";
    display: block;
    position: absolute;
    z-index:-1;
    top: 50%;
    width: 100%;
    border-bottom: 3px solid #fff;
  }

/* Image overlay */
  .image-overlay::before {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(44, 51, 64, 0.8);
  }

/* Zoom In  */
  .hover-zoom-in img {
    transform: scale(1);
    transition: 0.3s ease-in-out;
  }
  .hover-zoom-in:hover img {
    transform: scale(1.2);
//.........这里部分代码省略.........

开发者ID:thomasgazzoni，项目名称:gazblog，代码行数:101，代码来源:global.ts

注：本文中的@emotion/core.css函数示例整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。