TypeScript typestyle cssRaw Examples

Example #1

File: app.ts Project: cyclejs-community/typescript-starter-cycle

import { normalize, setupPage } from 'csstips';
import { makeGithubDriver } from 'drivers/github';

normalize();
setupPage('#app');

cssRaw(`
  #app {
    font-family: medium-content-sans-serif-font,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Arial,sans-serif;
    background: white;
    color: #333;
    display: flex;
  }

  .layout {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: medium-ui-sans-serif-text-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    font-weight: 100;
  }
`);

run(App, {
  dom: makeDOMDriver('#app'),
  history: captureClicks(makeHashHistoryDriver()),
  github: makeGithubDriver()
});

Example #2

File: MarbleView.ts Project: artfuldev/xstream-marbles

// TODO: Refactor 
cssRaw(`
  .marble {
    position: absolute;
    border: 2px solid #000;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    background: white;
  }

  .marble span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 28px;
    text-align: center;
  }

  .complete {
    position: absolute;
    height: 49px;
    width: 2px;
    background: black;
    top: -8px;
  }
`);

interface Sources {

Example #3

File: StreamView.ts Project: artfuldev/xstream-marbles

cssRaw(`
  .stream {
    position: relative;
    margin: 20px 32px 20px 64px;
    height: 32px;
  }

  .stream::before {
    position: absolute;
    left: -32px;
    top: 50%;
    height: 1px;
    background: #000;
    content: '';
    right: 0;
    display: block;
    z-index: -1;
  }

  .stream::after {
    width: 0;
    height: 0;
    border-top-width: 8px;
    border-top-style: solid;
    border-top-color: transparent;
    border-bottom-width: 8px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    border-left-width: 16px;
    border-left-style: solid;
    border-left-color: #000;
    display: inline-block;
    right: -16px;
    position: absolute;
    top: 8px;
    content: '';
  }
`);

Example #4

File: App.ts Project: artfuldev/xstream-marbles

cssRaw(`
  html, body {
    font-size: 100%;
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Source Sans Pro", sans-serif;
  }

  *, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
  }

  #app {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .container {
    display: flex;
    height: 100%;
  }

  aside {
    flex: 0 1 30%;
    max-width: 280px;
  }

  main {
    flex: 1;
  }

  main, aside {
    padding: 1rem;
  }

  .label {
    border: 1px solid #ddd;
    padding: 20px;
    font-size: 30px;
    margin: 30px;
    text-align: center;
  }
`);