JavaScript lib css Examples

Example #1

File: Search.js Project: jeffpeterson/music

}

css({
  ".Search": {
    flex: '1 0 50%',
    background: 'none',
    border: 'none',
    color: 'inherit',
    display: 'flex',
    fontSize: 80,
    lineHeight: 150,
    outline: 'none',
    padding: '0 20px',
    transition: 'all 300ms ease-in-out',
  },

  ".Search::placeholder": {
    opacity: '0',
    color: 'inherit',
    transition: 'all 300ms ease-in-out',
  },

  ".Search:hover::placeholder": {
    opacity: '0.9'
  },

  ".Search:focus::placeholder": {
    opacity: '0.5'
  },
})

Example #2

File: Nav.js Project: jeffpeterson/music

  render() {
    return (
      <div className={`Nav_Item ${this.props.selected && 'Nav_Item-selected'}`}>
        {this.props.children}
      </div>
    )
  }
}

Nav.Item = Item

css('.Nav', {
  display: 'flex',
  alignItems: 'flex-end',
  paddingBottom: 10,
  position: 'absolute',
  bottom: 0,
  right: 0,
  left: 0,
})

css({
  '.Nav_Item': {
    display: 'inline-block',
    textTransform: 'uppercase',
    fontSize: 20,
    padding: '0 10px',
    lineHeight: '1',
    cursor: 'pointer',
    verticalAlign: 'baseline',
    transition: 'all 200ms ease-in-out',

Example #3

File: GridTrack.js Project: jeffpeterson/music

  handleClick(e) {
    let {track, controls} = this.props
    controls.play(track)
  }

  handleDragStart(e) {
    let {track} = this.props
    e.dataTransfer.setData('application/json', JSON.stringify(track))
  }
}

css('.GridTrack', {
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  width: '100%',
  height: '100%',
  position: 'absolute',
  top: 0,
  left: 0
})

css('.GridTrack:active', {
  transform: 'scale(0.9)',
})

css('.GridTrack-content', {
  position: 'absolute',
  left: 0,
  bottom: 0,
  right: 0,
  lineHeight: 24,

Example #4

File: Queue.js Project: jeffpeterson/music

    return this.props.tracks.map((track, index) => (
      <QueueTrack
        track={track}
        index={index}
        key={track.id}
        controls={this.props.controls} />
    ))
  }

  handleDragOver(e) {
    e.preventDefault()
  }

  handleDrop(e) {
    var track = JSON.parse(e.dataTransfer.getData('application/json'))
    this.props.controls.addToQueue(track)
  }
}

Queue.defaultProps = {
  tracks: [],
}

css('.Queue', {
  transform: 'translate3d(0,0,0)',
  paddingTop: 150,
  overflow: 'scroll',
  position: 'relative',
  flexShrink: 0,
})

Example #5

File: WaveForm.js Project: jeffpeterson/music

    }

    return <canvas style={style} className="WaveForm" />
  }
}

WaveForm.defaultProps = {
  fftSize: 1024,
  isDimmed: false,
  colors: {0: '255,255,255', 1: '255,255,255'},
}

css('.WaveForm', {
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
  zIndex: -1,
  position: 'absolute',
})

function warp(x) {
  return -(x * 2 - 2) * x
}

function incAvg(avg, x, i) {
  return (avg * i + x) / (i + 1)
}

function avg(nums) {
  return nums.reduce(incAvg)
}

Example #6

File: QueueTrack.js Project: jeffpeterson/music

  onRemove(e) {
    e.stopPropagation()
    e.preventDefault()

    this.props.controls.removeFromQueue(this.props.track)
  }

  onClick() {
    this.props.controls.play(this.props.track)
  }
}

css('.QueueTrack', {
  backgroundSize: 'cover',
  backgroundPosition: 'center center',
  position: 'absolute',
  transition: '0.5s',
})

css('.QueueTrack::before', {
  transition: '0.5s',
  paddingTop: '33.333%',
  content: "''",
  display: 'block',
})

css('.QueueTrack:first-child::before', {
  paddingTop: '100%',
})

css('.QueueTrack:last-child', {

Example #7

File: Grid.js Project: jeffpeterson/music

import {css} from 'lib'
import Base from './Base'
import GridItem from './GridItem'
import Scroller from './Scroller'

export default class Grid extends Base {
  render() {
    let {
      props: {children, loadNextPage}
    } = this

    let items = children.map(child => (
      <GridItem key={child.key}>{child}</GridItem>
    ))

    return (
      <Scroller loadNextPage={loadNextPage}>
        <div className="Grid">{items}</div>
      </Scroller>
    )
  }
}

css('.Grid', {
  transform: "translate3d(0,0,0)",
})