goTorrent/torrent-project/node_modules/material-ui/node_modules/jss-expand/docs/index.md

Features

Expanded properties.

A much more readable syntax and less repeatitions compared to CSS.

border: {
  color: 'black',
  width: 1,
  style: 'solid'
}

will output:

border: 1px solid black;

See properties section for more details.

Using arrays for space separated properties.

padding: [5, 10, 5],
margin: [10, 5]

will output

padding: 5px 10px 5px;
margin: 10px 5px

Supported properties:

• backgroundSize
• backgroundPosition
• border
• borderBottom
• borderLeft
• borderTop
• borderRight
• boxShadow
• flex
• margin
• padding
• outline
• transformOrigin
• transform
• transition

Using arrays for multi value properties.

transition: [
  ['opacity', '200ms'],
  ['width', '300ms']
]

will output

transition: opacity 200ms, width 300ms;

Use objects inside of arrays.

transition: [{
    property: 'opacity',
    duration: '200ms'
  }, {
    property: 'width',
    duration: '300ms'
}]

will output:

transition: opacity 200ms, width 300ms;

Fallbacks are supported.

JSS has a fallbacks api which is also supported.

button: {
  background: {
    image: 'linear-gradient(red, green)'
  },
  fallbacks: {
    background: {
      color: 'red',
      repeat: 'no-repeat',
      position: [0 , 0]
    }
  }
}

will output:

foo {
  background: red no-repeat 0 0;
  background: linear-gradient(red, green);
}

Supported properties.

A list of all properties supported in expanded syntax and their corresponding defaults.

padding: {
  top: 10 // Props right, bottom, left will get 0 as defaults, as opposite to `padding: 10px`.
}

Will output:

padding: 10px 0 0 0;

padding

padding: {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
}

margin

margin: {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
}

font

font: {
  style: null,
  variant: null,
  weight: null,
  stretch: null,
  size: null,
  family: null,
  lineHeight: null
}

background

Unlike pure CSS, background-size property can be written inside common background property.

background: {
  attachment: null,
  color: null,
  image: null,
  position: null, // Can be written using array e.g. `[0, 0]`
  repeat: null,
  size: null, // Can be written using array e.g. `['center', 'center']`
}

border

Same goes for borderTop, borderRight, borderBottom, borderLeft.

Unlike pure CSS, border-radius property can be written inside common border property.

border: {
  width: null,
  style: null,
  color: null
}

outline

outline: {
  width: null,
  style: null,
  color: null
}

listStyle

listStyle: {
  type: null,
  position: null,
  image: null
}

transition

transition: {
  property: null,
  duration: null,
  timingFunction: null,
  delay: null
}

animation

animation: {
  name: null,
  duration: null,
  timingFunction: null,
  delay: null,
  iterationCount: null,
  direction: null,
  fillMode: null,
  playState: null
}

boxShadow

boxShadow: {
  x: 0,
  y: 0,
  blur: null,
  spread: null,
  color: null,
  inset: null // If you want to add inset you need to write "inset: 'inset'"
}

textShadow

textShadow: {
  x: 0,
  y: 0,
  blur: null,
  color: null
}

flex

flex: {
  basis: null,
  direction: null,
  flow: null,
  grow: null,
  shrink: null,
  wrap: null
}

align

align: {
  self: null,
  items: null,
  content: null
}