curls/dist/es/Flex/styles.js

💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion

import {css} from '@emotion/core'
import {unit, memoValue, memoTheme, get} from '../utils'
import {d} from '../Box/styles'
import * as dT from './defaultTheme'
export const flex = d.flex
export const fixed = {
  name: '1tu59u4',
  styles: 'flex:0 0 auto;',
}
export const fluid = {
  name: '1ozmmu8',
  styles: 'flex:1 1 auto;max-width:none;',
}
export const grow = memoValue(value =>
  /*#__PURE__*/
  css('flex-grow:', value === true ? 1 : value, ';')
)
export const shrink = memoValue(value =>
  /*#__PURE__*/
  css('flex-shrink:', value === true ? 1 : value, ';')
)
export const basis = memoTheme((value, theme) =>
  /*#__PURE__*/
  css('flex-basis:', unit(value, get(theme.flex, 'basisUnit', dT)), ';')
)
export const order = memoValue(value =>
  /*#__PURE__*/
  css('order:', value, ';')
)
const rowCSS = {
  name: '1l0z8uk',
  styles: 'flex-direction:row;',
}
export const row = {
  [true]: rowCSS,
  row: rowCSS,
  reverse: {
    name: '8kj89b',
    styles: 'flex-direction:row-reverse;',
  },
}
const columnCSS = {
  name: 'cgq59l',
  styles: 'flex-direction:column;',
}
export const column = {
  [true]: columnCSS,
  column: columnCSS,
  reverse: {
    name: 'qpiomr',
    styles: 'flex-direction:column-reverse;',
  },
}
const wrapCSS = {
  name: '1jkp9i7',
  styles: 'flex-wrap:wrap;',
}
export const wrap = {
  [true]: wrapCSS,
  wrap: wrapCSS,
  no: {
    name: '1n0sxg9',
    styles: 'flex-wrap:nowrap;',
  },
  reverse: {
    name: 'hp4whp',
    styles: 'flex-wrap:wrap-reverse;',
  },
}
export const justify = {
  start: {
    name: '1fn0841',
    styles: 'justify-content:flex-start;',
  },
  end: {
    name: '1a9getn',
    styles: 'justify-content:flex-end;',
  },
  center: {
    name: '1tyndxa',
    styles: 'justify-content:center;',
  },
  around: {
    name: 'kp4oss',
    styles: 'justify-content:space-around;',
  },
  between: {
    name: 'x4dmss',
    styles: 'justify-content:space-between;',
  },
}
export const align = {
  start: {
    name: '1jfvg9w',
    styles: 'align-items:flex-start;',
  },
  end: {
    name: 'y1kcm0',
    styles: 'align-items:flex-end;',
  },
  center: {
    name: 'zcxndt',
    styles: 'align-items:center;',
  },
  stretch: {
    name: 'k51ack',
    styles: 'align-items:stretch;',
  },
  baseline: {
    name: '1y3jl3a',
    styles: 'align-items:baseline;',
  },
}
export const alignContent = {
  start: {
    name: '1crvgc7',
    styles: 'align-content:flex-start;',
  },
  end: {
    name: '4zx96o',
    styles: 'align-content:flex-end;',
  },
  center: {
    name: '1a5ho4p',
    styles: 'align-content:center;',
  },
  stretch: {
    name: 'zssg0i',
    styles: 'align-content:stretch;',
  },
  between: {
    name: '1c5t6ef',
    styles: 'align-content:space-between;',
  },
  around: {
    name: '1okulzr',
    styles: 'align-content:space-around;',
  },
}
export const alignSelf = {
  start: {
    name: '1bf7e4w',
    styles: 'align-self:flex-start;',
  },
  end: {
    name: '56sg73',
    styles: 'align-self:flex-end;',
  },
  center: {
    name: 'hoe9xz',
    styles: 'align-self:center;',
  },
  stretch: {
    name: 'fzqoy4',
    styles: 'align-self:stretch;',
  },
  baseline: {
    name: 'chwum8',
    styles: 'align-self:baseline;',
  },
}